The same components, twice.
shadcn/ui markup with nothing behind it but this system's tokens. One import of @weekndlabs/design/shadcn.css, and bg-primary and text-muted-foreground become real classes. Nothing on this page sets a colour.
light
Neutral ground, ink at 16.12:1, blue at 4.83:1. Corners 6, 10 and 14px, all continuous.
Button
Badge
Input
We never send anything. There is nothing to send.
Card
Token coverage
Every role, measured on the surface it sits on.
Twelve contrast pairs, derived from the role names so none can be forgotten.
Alert
Heads up
Corners are continuous, not circular. A browser without corner-shape keeps the radius.
Contrast failed
terminal-cyan sat 24.9 degrees from terminal-blue, need 25.
Table
| Theme | Radius | State |
|---|---|---|
| light | 10px | pass |
| dark | 10px | pass |
Sidebar, skeleton, charts
Terminal
$ npm test
# pass 61
# fail 0dark
Ink at 16.90:1, blue at 6.50:1. Same corners. The default when nothing sets a theme.
Button
Badge
Input
We never send anything. There is nothing to send.
Card
Token coverage
Every role, measured on the surface it sits on.
Twelve contrast pairs, derived from the role names so none can be forgotten.
Alert
Heads up
Corners are continuous, not circular. A browser without corner-shape keeps the radius.
Contrast failed
terminal-cyan sat 24.9 degrees from terminal-blue, need 25.
Table
| Theme | Radius | State |
|---|---|---|
| light | 10px | pass |
| dark | 10px | pass |
Sidebar, skeleton, charts
Terminal
$ npm test
# pass 61
# fail 0