Components
Every primitive in semantic tokens. Flip the theme — the components stay; the colors swap. Composed layouts (nav, overlays, tables) live in patterns.
Buttons — variants
Five weights of emphasis plus destructive. Hover shifts color and elevation; a lift alone is easy to miss on a busy background.
primary
secondary
Buttons — sizes & icon-only
Icon-only buttons stay 44 × 44 at default size so they clear the minimum touch target.
sizes
icon-only
with icon
Buttons — every state
Hover, focus, and active are shown here as static specimens so you can check them without a pointer.
default
hover
focus
active
loading
disabled
ghost default
ghost hover
ghost focus
ghost disabled
glow default
glow hover
Chips
variantsDefaultActiveWith iconDismissible
defaultLabradorite
hoverLabradorite
selectedLabradorite
selected hoverLabradorite
disabledLabradorite
Badges
statusNeutralNewSuccessWarningDanger
Text fields
Every field shares one shell: label above, hint or error below, 44px-tall control.
Text fields — every state
Checkbox
off
on
indeterminate
hover
focus
error
disabled
disabled + on
Radio group
off
on
focus
disabled
Slider, segmented, stepper
File upload
idle↑Drop a file, or browsePNG, SVG or PDF · up to 10MB
drag over↑Release to uploadPNG, SVG or PDF · up to 10MB
uploadeddonelogo-stacked.svg
Avatars
sizesSBSBSBSB
presenceSBgroupSBJLMR+4
Progress, spinners, skeletons
Cards & alerts
AI-assisted writing tool for friends of Built by Stephen. Shipping in three themes, obviously.
labradoriteopalitebeta
Theme savedWe remember your choice. Flip anytime with Cmd/Ctrl + Shift + T.
Heads upYour jadeite heart is missing from the footer. Add it before you ship.
Build failedTwo tokens resolved to nothing. Check the field notes for the rename.