Internal · Phase 2B Task 4
Component gallery.
Every piece of the design system in one place — buttons, type, colour tokens, all 15 formations, and every pitch-token state — so regressions are visible at a glance.
Buttons
Every variant.
Buttons
Switched off.
A .button can be switched off two ways, and both must look the same: a real disabled attribute on a <button>, and aria-disabled where the .button is a link and disabled is not an attribute it has. Neither lifts on hover, neither shows a pointer cursor, and the label holds 4.5:1 against the surface underneath it — a dimmed mint fill does not.
Focus
The keyboard ring.
One treatment for every focusable control: a mint outline, offset clear of the control, on :focus-visible only — so a mouse press never draws it and a Tab always does. Tab through the row below to see it on a button, a link-button, a bare link and an input; it has to stay legible against both the page ground and the lighter cards.
Selection controls
Radio groups, segments, switches.
The setup screen's pickers, live. Each group is a single tab stop that lands on the current choice; the arrow keys move and select within it, Home and End jump to the ends. The unavailable card carries aria-disabled rather than disabled, so it stays reachable and the reason it is unavailable stays readable.
Type scale
Headings, body, small print, mono.
Build your perfect XI.
Every name has a story.
Spin the history.
Body copy — p — sits at the muted colour with 1.55 line-height. This is the paragraph style used for descriptions and helper text throughout the app.
DM MONO — LABELS, CHIPS, CAPTIONS, TIMESTAMPS
Eyebrow section label
Colour tokens
Base palette.
Line tokens.
The six canonical position-line colours — the only colours a pitch token, badge or chip may use for position type. Never a raw hex duplicate elsewhere in the app.
The pitch system
All 15 formations.
Static mode — position codes only, no names. Every formation carries exactly one GK.
Board mode — every token state.
Left back: empty (default, dashed). Right mid: empty but eligible — a selected side-list player listed at RM pulses the one open RM slot. Goalkeeper, one centre mid and one striker: plain filled. Right back: filled with the captain crown badge. The two centre backs: filled with a positive and a negative manager rating-delta badge.
Marketing only