Dev-only component harness — contract patterns under the current stylesheet. Skins: classic · slate · sport · paper

UI preview harness

Dashboard Primary action

Metric cards

Organisers1,284+12 this week
Races3,407241 live now
GPX scans18,932last 30 days
Very-long-metric-label-that-should-wrap-not-overflow99,999,999,999overflow guard test

Toolbar + fields

Table

UserOrganisationPlanStatus
anna@granfondo.example — with a fairly long email address Gran Fondo Alpes Pro Active
ben@memorialrun.example Memorial Run Trial Past due

Cards, form + empty state

Form field contract

Badges

Admin Organiser Live WIP Admin

Empty state

Nothing here yet — create your first race to see it in this list.

Infrastructure detail modal (static preview)

Infrastructure detail

Share live / public map

Live Surface Spectators + field (no login)

What is this?

Share live / public map is a screen you open. It shows fans where the race is — no login needed.

Who uses itFans & people on the course
Where you see itPublic / share / field map links
Ready?Live — working now

Infrastructure diagram nodes

Step 1 of 4

Client surfaces

Pages organisers, spectators, and broadcast open in the browser.

↓

Step 2 of 4

Engines & features

Product logic — scans, map, live tracking, timetable, icons…