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. Publish a change and this page reports it on the next deploy.

Version
4.2.0
Components
40
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
Catalog40 components

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

atoms24
  • Avatar
  • AvatarStrip
  • Badge
  • Button
  • Card
  • Checkbox
  • CollapsibleSection
  • Disclosure
  • Eyebrow
  • InlineCode
  • Input
  • LabeledDivider
  • Link
  • LiquidTabs
  • PasswordInput
  • Pill
  • SegmentBar
  • Select
  • Spinner
  • Stat
  • Switch
  • Textarea
  • ThemeToggle
  • Tooltip
molecules9
  • Accordion
  • Alert
  • Breadcrumbs
  • CallToAction
  • DescriptionList
  • EmptyState
  • ErrorState
  • MatchupCard
  • Pullquote
organisms7
  • ActionBar
  • Countdown
  • DataTable
  • Dialog
  • Footer
  • Navbar
  • Table
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,334 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
40
Components
live · package exports
2
States
press, blueline
Pullquote
A component library that hardcodes its palette is a library you can use exactly once.
The whole idea
InlineCode

Wrapped in @layer roster, between components and utilities.