gear_ai_v1

Gear AI CoPilot - “Liquid Glass” Design System

Overview

The “Liquid Glass” design system is the visual manifestation of Gear AI CoPilot’s advanced capabilities. It evokes the high-tech, futuristic aesthetic of modern automotive digital dashboards found in premium electric vehicles, characterized by depth, translucency, and fluid motion.

Design Philosophy

Core Principles

Glassmorphism: Semi-transparent surfaces with background blur create depth hierarchy
Fluid Motion: Smooth animations and transitions reinforce the “liquid” metaphor
Neon Accents: High-contrast text and icons ensure legibility on translucent surfaces
Performance Aesthetics: Visual design reflects the automotive performance theme
Information Density: Maximize data visibility without overwhelming the user

Visual Metaphor

The design system treats the UI as a series of floating glass panels over a dynamic, abstract background representing motion and speed. Critical information “floats” closest to the user, creating a natural visual hierarchy through depth and opacity.

Color Palette

Primary Colors

const colors = {
  // Performance Orange (Primary Action)
  primaryOrange: '#FF4500',      // OrangeRed - Primary CTAs, alerts
  accentOrange: '#FF8C00',       // DarkOrange - Secondary actions
  
  // Electric Blue (Information)
  electricBlue: '#1E90FF',       // DodgerBlue - Info states, links
  cyanAccent: '#00BFFF',         // DeepSkyBlue - Highlights
  
  // Grayscale (Glass Tints)
  glassWhite: 'rgba(255, 255, 255, 0.1)',  // Light glass surfaces
  glassDark: 'rgba(0, 0, 0, 0.1)',         // Dark glass surfaces
  borderLight: 'rgba(255, 255, 255, 0.2)', // Glass borders
  borderDark: 'rgba(0, 0, 0, 0.2)',
  
  // Status Colors
  successGreen: '#4CAF50',       // Material Green
  warningYellow: '#FFC107',      // Material Amber
  errorRed: '#F44336',           // Material Red
  infoBlue: '#2196F3',           // Material Blue
  
  // Text Colors
  textPrimary: '#FFFFFF',        // White for high contrast
  textSecondary: 'rgba(255, 255, 255, 0.7)',
  textTertiary: 'rgba(255, 255, 255, 0.5)',
  textNeon: '#FFFFFF',           // With neon glow effect
};

Gradient Definitions

const gradients = {
  // Primary action gradient
  performanceGradient: ['#FF4500', '#FF8C00'],
  
  // Glass overlay gradients
  glassDefault: [
    'rgba(30, 144, 255, 0.25)',
    'rgba(0, 191, 255, 0.15)',
    'rgba(30, 144, 255, 0.1)'
  ],
  glassPerformance: [
    'rgba(255, 69, 0, 0.3)',
    'rgba(255, 140, 0, 0.2)',
    'rgba(255, 69, 0, 0.1)'
  ],
  glassWarning: [
    'rgba(255, 193, 7, 0.3)',
    'rgba(255, 235, 59, 0.2)',
    'rgba(255, 193, 7, 0.1)'
  ],
  glassSuccess: [
    'rgba(76, 175, 80, 0.3)',
    'rgba(139, 195, 74, 0.2)',
    'rgba(76, 175, 80, 0.1)'
  ],
};

Typography

Font Stack

const typography = {
  // System font stack for optimal performance
  fontFamily: {
    primary: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
    monospace: '"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace',
  },
  
  // Font sizes (mobile-first, responsive)
  fontSize: {
    xs: 11,    // Metadata, captions
    sm: 13,    // Secondary text
    base: 16,  // Body text
    lg: 18,    // Subheadings
    xl: 24,    // Section titles
    '2xl': 32, // Page headers
    '3xl': 36, // Hero text
  },
  
  // Font weights
  fontWeight: {
    regular: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
    extrabold: '800',
    black: '900',
  },
  
  // Line heights
  lineHeight: {
    tight: 1.2,
    normal: 1.5,
    relaxed: 1.75,
  },
  
  // Letter spacing
  letterSpacing: {
    tight: -0.5,
    normal: 0,
    wide: 0.5,
    wider: 1,
    widest: 2,
  },
};

Text Styles

const textStyles = {
  // Neon text with glow effect
  neon: {
    color: colors.textPrimary,
    textShadowColor: 'rgba(255, 255, 255, 0.7)',
    textShadowOffset: { width: 0, height: 0 },
    textShadowRadius: 5,
  },
  
  // Performance text (for stats, numbers)
  performance: {
    fontWeight: typography.fontWeight.black,
    fontSize: typography.fontSize['2xl'],
    color: colors.primaryOrange,
    textShadowColor: 'rgba(255, 69, 0, 0.5)',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 4,
    letterSpacing: typography.letterSpacing.wider,
  },
  
  // Section headers
  sectionHeader: {
    fontSize: typography.fontSize.xl,
    fontWeight: typography.fontWeight.extrabold,
    color: colors.textPrimary,
    letterSpacing: typography.letterSpacing.wide,
    textTransform: 'uppercase',
  },
};

Component Library

1. Glass Card Component

The fundamental building block of the UI.

React Native Implementation

import React from 'react';
import { View, StyleSheet, ViewStyle } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { BlurView } from 'expo-blur';

interface GlassCardProps {
  children: React.ReactNode;
  style?: ViewStyle;
  intensity?: number;
  tint?: 'light' | 'dark' | 'default';
  variant?: 'default' | 'performance' | 'warning' | 'success';
  borderRadius?: number;
}

export function GlassCard({
  children,
  style,
  intensity = 25,
  tint = 'dark',
  variant = 'default',
  borderRadius = 16,
}: GlassCardProps) {
  const gradientColors = {
    default: [
      'rgba(30, 144, 255, 0.25)',
      'rgba(0, 191, 255, 0.15)',
      'rgba(30, 144, 255, 0.1)'
    ],
    performance: [
      'rgba(255, 69, 0, 0.3)',
      'rgba(255, 140, 0, 0.2)',
      'rgba(255, 69, 0, 0.1)'
    ],
    warning: [
      'rgba(255, 193, 7, 0.3)',
      'rgba(255, 235, 59, 0.2)',
      'rgba(255, 193, 7, 0.1)'
    ],
    success: [
      'rgba(76, 175, 80, 0.3)',
      'rgba(139, 195, 74, 0.2)',
      'rgba(76, 175, 80, 0.1)'
    ],
  };

  const borderColors = {
    default: 'rgba(30, 144, 255, 0.3)',
    performance: 'rgba(255, 69, 0, 0.4)',
    warning: 'rgba(255, 193, 7, 0.4)',
    success: 'rgba(76, 175, 80, 0.4)',
  };

  return (
    <View style={[styles.container, { borderRadius }, style]}>
      <BlurView intensity={intensity} tint={tint} style={[styles.blur, { borderRadius }]}>
        <LinearGradient
          colors={gradientColors[variant] as readonly [string, string, string]}
          start=
          end=
          style={[
            styles.gradient,
            { 
              borderRadius,
              borderColor: borderColors[variant]
            }
          ]}
        >
          <View style={styles.content}>{children}</View>
        </LinearGradient>
      </BlurView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 12 },
    shadowOpacity: 0.25,
    shadowRadius: 32,
    elevation: 12,
  },
  blur: {
    flex: 1,
  },
  gradient: {
    flex: 1,
    borderWidth: 1.5,
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
  },
  content: {
    flex: 1,
    padding: 20,
  },
});

2. Glass Button Component

import React from 'react';
import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { BlurView } from 'expo-blur';

interface GlassButtonProps {
  title: string;
  onPress: () => void;
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  style?: ViewStyle;
}

export function GlassButton({
  title,
  onPress,
  variant = 'primary',
  size = 'medium',
  disabled = false,
  style,
}: GlassButtonProps) {
  const sizes = {
    small: { paddingVertical: 8, paddingHorizontal: 16, fontSize: 14 },
    medium: { paddingVertical: 12, paddingHorizontal: 24, fontSize: 16 },
    large: { paddingVertical: 16, paddingHorizontal: 32, fontSize: 18 },
  };

  const gradients = {
    primary: ['#FF4500', '#FF8C00'],
    secondary: ['rgba(30, 144, 255, 0.3)', 'rgba(0, 191, 255, 0.3)'],
    outline: ['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.05)'],
  };

  return (
    <TouchableOpacity
      onPress={onPress}
      disabled={disabled}
      style={[styles.container, style]}
      activeOpacity={0.8}
    >
      <BlurView intensity={15} tint="dark" style={styles.blur}>
        <LinearGradient
          colors={gradients[variant] as readonly [string, string]}
          start=
          end=
          style={[
            styles.gradient,
            {
              paddingVertical: sizes[size].paddingVertical,
              paddingHorizontal: sizes[size].paddingHorizontal,
            },
            disabled && styles.disabled,
          ]}
        >
          <Text
            style={[
              styles.text,
              { fontSize: sizes[size].fontSize },
              variant === 'outline' && styles.outlineText,
            ]}
          >
            {title}
          </Text>
        </LinearGradient>
      </BlurView>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    borderRadius: 12,
    overflow: 'hidden',
  },
  blur: {
    borderRadius: 12,
  },
  gradient: {
    borderRadius: 12,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.3)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#FFFFFF',
    fontWeight: '700',
    textAlign: 'center',
  },
  outlineText: {
    color: '#1E90FF',
  },
  disabled: {
    opacity: 0.5,
  },
});

3. Animated Background Component

Creates the dynamic, motion-filled background.

import React, { useEffect } from 'react';
import { StyleSheet, Animated, Dimensions } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

const { width, height } = Dimensions.get('window');

export function AnimatedBackground() {
  const animatedValue = new Animated.Value(0);

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(animatedValue, {
          toValue: 1,
          duration: 10000,
          useNativeDriver: true,
        }),
        Animated.timing(animatedValue, {
          toValue: 0,
          duration: 10000,
          useNativeDriver: true,
        }),
      ])
    ).start();
  }, []);

  const translateX = animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -width],
  });

  return (
    <Animated.View style={[styles.container, { transform: [{ translateX }] }]}>
      <LinearGradient
        colors={['#0a0e27', '#1a1f3a', '#0a0e27']}
        style={styles.gradient}
      />
      {/* Add animated elements like particles or grid lines here */}
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    width: width * 2,
    height: height,
    top: 0,
    left: 0,
  },
  gradient: {
    flex: 1,
  },
});

Layout Patterns

1. Garage Dashboard Layout

┌─────────────────────────────────────┐
│           GARAGE HEADER             │
│      "Performance Dashboard"        │
├─────────────────────────────────────┤
│  ┌────────────┐  ┌────────────┐    │
│  │ Stats Card │  │ Stats Card │    │
│  │  Vehicles  │  │ Avg Miles  │    │
│  └────────────┘  └────────────┘    │
│  ┌────────────┐  ┌────────────┐    │
│  │ Stats Card │  │ Stats Card │    │
│  │  Service   │  │   Codes    │    │
│  └────────────┘  └────────────┘    │
├─────────────────────────────────────┤
│          MY RIDES SECTION           │
├─────────────────────────────────────┤
│  ┌─────────────────────────────┐   │
│  │   Vehicle Card 1            │   │
│  │   (Glass with blur)         │   │
│  └─────────────────────────────┘   │
│  ┌─────────────────────────────┐   │
│  │   Vehicle Card 2            │   │
│  └─────────────────────────────┘   │
├─────────────────────────────────────┤
│          [+ FAB Button]             │
└─────────────────────────────────────┘

2. Eisenhower Maintenance Matrix

┌─────────────────────────────────────┐
│    URGENT/       │    NOT URGENT/   │
│    IMPORTANT     │    IMPORTANT     │
│  ┌────────────┐  │  ┌────────────┐  │
│  │ Red Glass  │  │  │ Blue Glass │  │
│  │ Check Eng  │  │  │Tire Rotat  │  │
│  └────────────┘  │  └────────────┘  │
├─────────────────────────────────────┤
│    URGENT/       │    NOT URGENT/   │
│  NOT IMPORTANT   │  NOT IMPORTANT   │
│  ┌────────────┐  │  ┌────────────┐  │
│  │Orange Glass│  │  │ Grey Glass │  │
│  │Wiper Blade │  │  │Cabin Filtr │  │
│  └────────────┘  │  └────────────┘  │
└─────────────────────────────────────┘

3. AI Chat Interface

┌─────────────────────────────────────┐
│  Vehicle: 2023 Toyota Supra         │
├─────────────────────────────────────┤
│                                     │
│  ┌──────────────────┐               │
│  │  User Message    │ Blue Glass   │
│  └──────────────────┘               │
│               ┌──────────────────┐  │
│    Grey Glass │  AI Response     │  │
│               └──────────────────┘  │
│                                     │
│  ┌──────────────────┐               │
│  │  User Message    │               │
│  └──────────────────┘               │
│               ┌──────────────────┐  │
│               │  AI Response     │  │
│               │  [Typing...]     │  │
│               └──────────────────┘  │
│                                     │
├─────────────────────────────────────┤
│  [Text Input Glass Panel]           │
└─────────────────────────────────────┘

Animations & Transitions

Standard Durations

const animationDuration = {
  fast: 150,      // Micro-interactions
  normal: 300,    // Standard transitions
  slow: 500,      // Page transitions
  verySlow: 800,  // Emphasis animations
};

Easing Functions

const easing = {
  // Standard easing for most animations
  standard: 'ease-in-out',
  
  // Sharp for entering elements
  enter: 'cubic-bezier(0.4, 0, 0.2, 1)',
  
  // Sharp for exiting elements
  exit: 'cubic-bezier(0.4, 0, 1, 1)',
  
  // Bounce for playful interactions
  bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
};

Common Animations

// Fade in animation
const fadeIn = {
  from: { opacity: 0 },
  to: { opacity: 1 },
  duration: animationDuration.normal,
};

// Slide up animation
const slideUp = {
  from: { opacity: 0, transform: [{ translateY: 20 }] },
  to: { opacity: 1, transform: [{ translateY: 0 }] },
  duration: animationDuration.normal,
};

// Scale bounce animation (for buttons)
const scaleBounce = {
  from: { transform: [{ scale: 0.95 }] },
  to: { transform: [{ scale: 1 }] },
  duration: animationDuration.fast,
};

Accessibility

Contrast Requirements

Text on Glass: Minimum 4.5:1 contrast ratio
Interactive Elements: Minimum 3:1 contrast ratio
Neon Text: Always use on dark backgrounds with sufficient blur

Touch Targets

Minimum Size: 44x44 points (iOS), 48x48 dp (Android)
Spacing: Minimum 8px between interactive elements
Feedback: Visual feedback on all touch interactions (scale, opacity change)

All interactive elements have descriptive labels
Status changes are announced
Critical information has text alternatives

Responsive Breakpoints

const breakpoints = {
  mobile: 0,      // 0-767px
  tablet: 768,    // 768-1023px
  desktop: 1024,  // 1024px+
};

Platform-Specific Considerations

iOS

Use native iOS haptics for feedback
Respect safe area insets
Support dark mode color scheme
Use SF Symbols for icons

Android

Use Material ripple effects
Respect system navigation bar
Support Android 12+ Material You theming
Use Material Icons

Web

Use CSS backdrop-filter for blur effects
Fallback to solid backgrounds for unsupported browsers
Optimize for mouse and keyboard interactions
Support PWA installation

Performance Guidelines

Blur Optimization: Limit backdrop-filter usage to visible viewport
Animation Performance: Use transform and opacity for animations (GPU-accelerated)
Image Optimization: Compress and lazy-load vehicle images
Component Memoization: Use React.memo for heavy glass components
Gradient Caching: Reuse gradient configurations across components

Conclusion

The “Liquid Glass” design system provides a cohesive, modern aesthetic that differentiates Gear AI CoPilot in the automotive app market. By combining glassmorphism with performance-inspired visual elements, the design communicates both sophistication and technical capability while maintaining excellent usability and accessibility standards.

This site is open source. Improve this page.