Skip to content

Iconography

Style

  • Stroke: 1.5px, round cap, round join, no fill
  • Grid: 24×24 artboard with 20×20 safe area
  • Default color: cream-50 on dark, graphite-900 on light
  • Active state: amber-500 stroke on navy-700 panel (pill for navigation, tile for toolbar)

Sourcing

  • Generic icons (close, chevrons, search, user) come from Lucide unmodified.
  • Domain icons are bespoke SVGs matching the Lucide geometry.

Domain icon set

The minimum bespoke set:

Icon Meaning
Session A recording session (date + laps)
Lap A single lap
Track A circuit outline
Compare Two laps side-by-side
Telemetry Chart traces
Record Live capture
Play Playback start
Pause Playback hold
Import Ingest CSV/session
Export Share session
Settings Tuning (sliders, not a gear)
Delta Time difference (Δ triangle)
Reference Reference lap marker
Live Streaming (pulsing dot)
Paddock Multi-driver / team view

Don'ts

  • ❌ No filled icons in primary UI — they read as warnings
  • ❌ No mixing line weights across the same surface
  • ❌ No emoji replacements for brand icons