Racing HUD Design Expert

The Core Tension

Racing HUDs exist in a unique space: they must convey dense, rapidly-changing data to a driver or viewer who can only glance at the screen for fractions of a second. Every design decision is a trade-off between:

• Information density vs glanceability — More data helps strategy, but cluttered displays are unreadable at speed
• Visual richness vs performance — Effects enhance the broadcast feel but consume frame budget
• Precision vs pattern recognition — Exact numbers (3247 iR) vs visual indicators (green bar = good) serve different needs

Information Hierarchy

Tier 1 — Peripheral vision (always visible, no eye movement needed):

• Gear indicator (large, center-ish)
• RPM via tachometer color zone (green/yellow/red/redline)
• Flag state via color overlay

Tier 2 — Quick glance (< 0.5s eye movement):

• Speed
• Lap delta (+/- to best, color-coded)
• Position (P1, P2, etc.)
• Gap to car ahead/behind

Tier 3 — Intentional look (1-2s during straight or caution):

• Fuel status (laps remaining, pit window)
• Tire temperatures and wear
• Sector times
• Leaderboard

Tier 4 — Extended viewing (pit stops, caution periods, post-race):

• Full leaderboard with intervals
• Race timeline heatmap
• Commentary analysis panel
• Detailed strategy data

Color Coding Standards

Typography for Speed

• Large numerals — Gear, speed, position. Must be readable from viewing distance in peripheral vision.
• Monospace for data — Lap times, gaps, ratings use JetBrains Mono for consistent digit width (no layout shift as numbers change).
• Condensed for labels — Sofia Pro Comp saves horizontal space for labels and names.
• Display for headers — Stolzl for section titles and branding elements.

Panel Design Patterns

The "glanceable gauge" pattern:

• Color bar/fill provides instant state reading (green = good, red = bad)
• Exact number provides precision when time allows
• Label provides context
• Example: Fuel gauge = green-to-red bar + "23.4L" + "Fuel" label

The "delta display" pattern:

• Centered zero point
• Positive (green) extends right, negative (red) extends left
• Number overlaid on bar
• Example: Lap delta = "+0.342" in red on red bar

The "cycling card" pattern:

• Limited screen space → alternate between data pages on a timer (45s default)
• Smooth crossfade transition
• Example: Rating card cycles between iR/SR gauges and position/gap display

Broadcast vs Driver Mode

Transparency and Compositing

The overlay composites on top of the game:

• x64: Native window transparency via Electron
• ARM: Green chroma key (#00FF00) for OBS Color Key filter
• Panel backgrounds use hsla() with 85-95% opacity to maintain readability while showing the game beneath
• Effects (glow, bloom) bleed naturally over the game image in transparent mode

Evaluation Framework

When reviewing or designing a HUD panel, check:

1. Glanceability — Can the primary information be understood in < 0.5s?
2. Contrast — Is text readable against both the panel background AND the game image beneath?
3. Color meaning — Does color usage follow the established coding system?
4. Animation purpose — Does animation convey information (delta changing) or is it decorative? Decorative animation should be subtle.
5. Performance — Does the panel update efficiently within the 33ms budget?
6. Scalability — Does it work at different overlay sizes and zoom levels?
7. State handling — What does it show when data is missing, zero, or extreme?

Rules

1. Readability over aesthetics — If an effect makes data harder to read, remove it.
2. Color is information — Don't use color purely decoratively. Every color should encode meaning.
3. Monospace for changing numbers — Lap times, gaps, ratings must use monospace font to prevent layout shift.
4. Respect the hierarchy — Tier 1 info should be largest/brightest. Tier 4 should be smallest/dimmest.
5. Test with game footage — Panel readability depends on what's behind it. Test with actual game screenshots.
6. ARM degradation — Design panels that still work with green-screen backgrounds (no transparency blending).
7. No framework dependencies — Panels are vanilla JS Web Components. Don't introduce React/Vue.