Accessibility
Neutral
neutralInverted/neutralwhite/neutral
Critical
critical/body
criticalwhite/critical
criticalLightneutral/criticalLightcritical/criticalLight
Caution
caution/body
cautionwhite/caution
cautionLightneutral/cautionLightcaution/cautionLight
Positive
positive/body
positivewhite/positive
positiveLightneutral/positiveLightpositive/positiveLight
Info
info/body
infowhite/info
infoLightneutral/infoLightinfo/infoLight
Promote
promote/body
promotewhite/promote
promoteLightneutral/promoteLightpromote/promoteLight
Brand
brand/body
brandwhite/brand
brandAccentwhite/brandAccent
Social
white/mastodon
white/bluesky
white/twitter
white/discord
white/linkedin
Usage Guidelines
Dos and don'ts for colour, surface, and button usage. Don't examples are excluded from the contrast audit.
Solid buttons — primary actions only
Solid buttons communicate action priority, not outcome status. Only brand, neutral, and critical have solid variants. Status tones (caution, positive, info, promote) are soft-only — they label states, not actions.
✓ DoSolid for primary actions. Soft for status-adjacent actions.
✗ Don'tStatus tones as solid buttons — they have no solid variant by design.
Light surfaces use tone text, not white
Semantic light backgrounds (criticalLight, positiveLight, etc.) are pastel — white text vanishes. Use the matching tone foreground or neutral.
✓ Do
info text on infoLight
neutral text on criticalLight
✗ Don't
white text on infoLight — invisible
White on pastel light surfaces has near-zero contrast.Notice component
Maps tone to a light surface + tone text pairing.
ErrorYour changes could not be saved. Please check your connection and try again.
WarningYour session expires in 5 minutes. Save your work to avoid losing changes.
SuccessYour profile has been updated successfully.
InfoA newer version of this document is available. Refresh to see the latest changes.
TipUpgrade to Pro to unlock unlimited exports and priority support.