From 0cc6ed9978ebaa53211981eda48292a4bb2b0c98 Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Thu, 27 Aug 2026 16:09:21 -0400
Subject: [PATCH] docs: add DESIGN.md design system for Stitch

---
 DESIGN.md | 168 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 168 insertions(+)
 create mode 100644 DESIGN.md

diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..f2cf46b
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,168 @@
+---
+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).