docs: add DESIGN.md design system for Stitch
This commit is contained in:
Developer
parent
f7fbe71d0d
commit
0cc6ed9978
|
|
@ -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).
|
||||||
Loading…
Reference in New Issue