---
name: Motorcycle Digital Dashboard
colors:
  surface: '#0D0D0D'
  surface-dim: '#000000'
  surface-bright: '#242424'
  surface-container-lowest: '#050505'
  surface-container-low: '#0E0E0E'
  surface-container: '#141414'
  surface-container-high: '#1A1A1A'
  surface-container-highest: '#222222'
  on-surface: '#FFFFFF'
  on-surface-variant: '#B3B3B3'
  inverse-surface: '#FFFFFF'
  inverse-on-surface: '#0D0D0D'
  outline: '#333333'
  outline-variant: '#1F1F1F'
  surface-tint: '#00E5FF'
  primary: '#00E5FF'
  on-primary: '#000000'
  primary-container: '#00363D'
  on-primary-container: '#80F2FF'
  inverse-primary: '#006874'
  secondary: '#FF2A2A'
  on-secondary: '#FFFFFF'
  secondary-container: '#3D0000'
  on-secondary-container: '#FFB4AB'
  tertiary: '#69F0AE'
  on-tertiary: '#003822'
  tertiary-container: '#005234'
  on-tertiary-container: '#86FFC5'
  warning: '#FFD740'
  on-warning: '#3F2E00'
  error: '#FF2A2A'
  on-error: '#FFFFFF'
  background: '#000000'
  on-background: '#FFFFFF'
  surface-glass: rgba(255, 255, 255, 0.05)
  stroke-technical: '#222222'
typography:
  speedometer:
    fontFamily: JetBrains Mono
    fontSize: 96px
    fontWeight: '900'
    lineHeight: 96px
    letterSpacing: -0.04em
  speedometer-unit:
    fontFamily: JetBrains Mono
    fontSize: 20px
    fontWeight: '700'
    lineHeight: 20px
    letterSpacing: 0.15em
  heading-compass:
    fontFamily: Sora
    fontSize: 28px
    fontWeight: '900'
    lineHeight: 32px
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: Sora
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
  headline-md:
    fontFamily: Sora
    fontSize: 22px
    fontWeight: '700'
    lineHeight: 28px
  telemetry-value:
    fontFamily: JetBrains Mono
    fontSize: 18px
    fontWeight: '700'
    lineHeight: 22px
  telemetry-label:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: '700'
    lineHeight: 14px
    letterSpacing: 0.12em
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: '400'
    lineHeight: 18px
  badge-label:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: '800'
    lineHeight: 12px
    letterSpacing: 0.1em
rounded:
  sm: 4px
  DEFAULT: 8px
  md: 12px
  lg: 16px
  xl: 20px
  full: 9999px
spacing:
  unit: 4px
  gutter: 16px
  margin-mobile: 16px
  margin-desktop: 24px
  container-gap: 12px
---

# Motorcycle Digital Dashboard — Design System

## 1. Brand & Aesthetic Vision
Built specifically for motorcycles, the **Motorcycle Digital Dashboard** delivers glanceable, high-contrast, technical telemetry for daytime sunlight and pitch-black night rides. It mirrors high-end factory TFT superbike displays (Yamaha YZF-R6 / R1, Ducati Panigale, BMW S1000RR) while providing real-time 5Hz HUD dynamics, 3D G-force visualization, active police/hazard road alerts, and automated ride diagnostics.

### Core Principles:
* **Sub-Second Glanceability:** High-contrast, bold tabular fonts ensure vital data (Speed, Lean, G-force, Alerts) is absorbed in $<0.3$ seconds.
* **Functional Color System:** Colors strictly indicate real physical dynamics—Cyan for active telemetry, Neon Green for acceleration, Bright Red for heavy braking/critical alerts, and Amber for cornering loads.
* **AMOLED Deep Cockpit Black:** Eliminates light bleed and bezel glare on handlebar phone mounts.

---

## 2. Color Palette & Functional Tokens
* **Background (`#000000`):** Pure AMOLED black for zero light scatter.
* **Scaffold Surface (`#0D0D0D`):** Dark matte base layer.
* **Card / Container (`#1A1A1A`):** High-contrast surface for telemetry modules and garage specs.
* **Primary Accent (`#00E5FF` — Cyber Cyan):** Primary HUD gauges, compass heading, active GPS status, and route polylines.
* **Secondary / Danger (`#FF2A2A` — Race Red):** Heavy braking indicators ($<-0.25\text{G}$), recording badges (`● REC`), and critical road alerts.
* **Tertiary / Launch (`#69F0AE` — Neon Green):** Forward acceleration ($>+0.25\text{G}$), healthy GPS status, and performance timer completion.
* **Warning (`#FFD740` — Amber Accent):** Cornering load ($|\text{Lat G}| > 0.3\text{G}$), degraded GPS, and construction hazards.

---

## 3. Typography
A strict triple-font hierarchy designed to prevent numerical jitter during high-vibration riding:
1. **JetBrains Mono (Telemetry & Numbers):** Monospace numerals ensure zero UI jitter as speed, G-force, and lean angle update at 5Hz.
2. **Sora (Headings & Navigation):** Bold, wide-aperture sans-serif for high-speed readability.
3. **Inter (Body & Specifications):** Clean, balanced text for garage specifications and historical logs.

---

## 4. Cockpit Layouts
1. **Minimal Layout:** Massive center speedometer with simple REC status badge and GPS lock icon.
2. **Sport HUD Layout:** Tripartite layout featuring:
   * **Center (50%):** Tabular Speedometer, Speed Limit Indicator, and Digital Compass (`NNW 355°`).
   * **Left (25%):** Concentric G-Force Dial with animated glide, reference rings ($0.33\text{G}, 0.66\text{G}, 1.0\text{G}$), and live digital readout.
   * **Right (25%):** Dynamic Lean Angle Arc with peak hold memory and bank indicators.
   * **Bottom Strip:** Trip Distance, Elapsed Duration, Max Lean, Max Speed, and Action Buttons.
3. **Touring Layout:** Integrated split-screen showing live OpenStreetMap/Google Maps navigation with real-time incident overlays alongside speed and heading.

---

## 5. Component Design Specifications

### G-Force Visualizer
* Circular dial with concentric rings ($0.33\text{G}$ and $0.66\text{G}$) and crosshairs.
* Smoothly animated tracking dot with dynamic color grading based on acceleration vector.
* Instantaneous digital readout: `LIVE: +0.45 G` (Green) or `-0.60 G` (Red) or `0.00 G`.

### Lean Angle Visualizer
* Circular gauge displaying calibrated motorcycle roll ($\pm 65^\circ$).
* Left/Right bank indicator with peak session hold markers.

### Road Alert Banner
* High-visibility banner sliding down from the top bar with category icon, distance ahead, and TTS voice integration.

### Garage Technical Cards
* Detailed spec sheet for active motorcycle (Bore x Stroke, Compression Ratio, Carburetor/Fuel Injection, Horsepower @ RPM, Torque @ RPM, Redline, Wet Weight, and 0–60 claimed times).