motorsignal
/
MotorSignal-App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
MotorSignal-App/DESIGN.md

6.2 KiB
Raw Blame History

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