Getting started · Principles
Getting started

Principles

Six rules that decide arguments. Each one is enforceable — a reviewer can point at a line and cite it.

01
Blue navigates, black commits

--color-primary is links, focus rings, category icons and select indicators. --color-cta is the solid button, and nothing else. They are different values on purpose.

02
The system is flat

Planes separate with a hairline, never a shadow and never a tint. --shadow-card is none by decision, declared so conformant markup resolves instead of failing silently. Only floating layers — popover, overlay, widget — cast anything.

03
Colour is never the only signal

Every tier colour travels with the number, the word, or both. Status is always icon plus text. Filled and empty stars are two different shapes, so the control survives forced-colors mode.

04
Tone paints the rule, not the surface

Callout and Toast carry status on a 3px left rule. A status colour never floods a background, and a -fill token never carries text.

05
One voice, shorter sentences

A dashboard is not a different typeface at a different scale. All densities share every colour, type and radius token; they differ only in rhythm — and in how many words fit the register.

06
The package ships no strings

A user-readable string literal in ui/src/ is a defect. The one exception is RATING_LABELS — product vocabulary, exported so the app can override it.

Sporting Scouter Design System
Every token on this site is generated from theme.css.