For developers and for Noah · everything here comes from
tokens.cssDesign reference
Screens and states
Every admin screen and every state it has. Each link opens the screen in that state; the black bar at the bottom right of any screen switches states too. The checklist of what each state must do is in design/STATES.md.
| Screen | States | Built in |
|---|
Colour
Use the token name, never the hex value. Status colours mean the same thing everywhere: green done, amber needs attention, blue in progress, red failed.
Type
Barlow for everything you read; Big Shoulders Display, uppercase, for titles and big numbers. Ten sizes in total.
Spacing and corners
Spacing steps are named by pixels (--sp-16 is 16px). Corners: 8 for controls, 12 for inner boxes, 16 for cards.
Components
The shared pieces. If a new screen needs something that isn't here, add it here first.