The system

Everything below is read from the installed copy of @blakesteve/roster at build time. The component list, the token ramps, and the specimens are the library itself, not a description of it. When a new version is published, this page reports it on the next deploy.

Version
5.9.0
Components
59
Color families
9
Production states
2
Tokens9 families

Each swatch is shown twice. The top half is the hex Roster ships; the bottom half is what var(--roster-*) resolves to on this page, after this site remaps it. Where the two halves differ, that is an override doing its job: same library, this site’s palette, no fork. Toggle the state above and the lower half repaints while the upper half holds still.

primary
50
100
200
300
400
500
600
700
800
900
950
orange
50
100
200
300
400
500
600
700
800
900
950
teal
50
100
200
300
400
500
600
700
800
900
950
purple
50
100
200
300
400
500
600
700
800
900
950
amber
50
100
200
300
400
500
600
700
800
900
950
success
50
100
200
300
400
500
600
700
800
900
error
50
100
200
300
400
500
600
700
800
900
info
50
100
200
300
400
500
600
700
800
900
gray
50
100
200
300
400
500
600
700
800
900
950
Catalog59 components

Parsed from the package’s own type definitions, so nothing here is transcribed. Names link to their Storybook page where one is deployed.

atoms29
molecules21
organisms9
Specimenslive

Real components, rendered here rather than screenshotted. Press ⌥X and every one of them is outlined and named, which is also how you can check that this page is not drawing pictures of buttons.

Button
Badge
PrimaryShippedBroken
Pill
2,515 verdictsLive nowFiltered
Avatar
BB
GV
MS
Switch
Spinner
Input
SegmentBar
Controller64%Keyboard29%Either7%
Alert

Tokens are remapped here

The swatches above show it: same component, this site’s palette.
Stat
Components
59live · package exports
States
2press, blueline
Pullquote
A token is a promise that the same component can belong to a different product.
The whole idea
InlineCode

Wrapped in @layer roster, between components and utilities.