169 lines
6.2 KiB
Markdown
169 lines
6.2 KiB
Markdown
---
|
||
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).
|