A calm wall for a chaotic race.

Lap 34 of 57. Two laps to decide.

The leader is 4.4 s up the road. Your tyres are 19 laps old. Rain is 18 km out, moving at 58 km/h. Somebody on the pit wall has two laps to make the call worth more points than anything the driver does all afternoon.

Stint is the screen they look at.

It doesn't show data. It shows the call.

Box lap 36 → Hard. Three reasons, what would break it, and the laps it stays valid (L36–L38). Every other block on the screen is evidence for or against that one card.

Eight pages. One race. Zero filler.

• 
  01Pit WallThe call, the car and the live field on a clay circuit.
• 
  02Strategy LabScenario tree, outcome fans and the inputs that would flip the plan.
• 
  03TyresCliff clock: our Medium falls off on lap 41.
• 
  04TelemetryCorner delta map, lap overlay, sector trend.
• 
  05WeatherRain radar on a regional clay map, slick-to-inter crossover at lap 48.
• 
  06RivalsThe field around car #7, trigger board, threat ladder.
• 
  07DebriefLuck vs skill: grade the decisions, not the result.
• 
  08SeasonChampionship trace, what we need, title odds.

Most dark modes are a repaint. This one is a switch.

104 variables in one collection, Light and Dark. Flip a frame's mode and the whole page follows. Yes, the images switch too.

What you get

• 8 product pages: each in light and dark (18 frames, 1920 wide)
• Foundations: colour ramps and semantic roles, type scale, number treatment, spacing, radius, elevation, motion tokens
• Components: 12 sets, 49 variants (chips, tags, verdicts, nav, toggles, buttons, hotspot pins, callouts, stats)
• Variables: 104, one “Stint” collection, Light / Dark modes
• Styles: 19 text styles (Geist + Geist Mono), 2 effect styles
• Data visualisation: scenario trees, outcome fans, lap overlay, corner delta map, rain radar, crossover model, championship trace
• Photoreal assets: car, tyres, top-down liveries, clay circuit dioramas, day and night
• Motion: showcase scenes on the Motion page

Ten rules. Here are four.

1. 1Start with the decision, not the data. If a block can't say which call it serves, it doesn't ship.
2. 2Write the dataset before the first pixel. Plan A is 16.1 expected points on three pages because it's the same table.
3. 3One accent, one meaning. Orange is our car. Not hover, not links, not decoration.
4. 4Never draw a vector of a real object next to real UI. It looks cheap immediately.

It moves, too.

Good to know