Accessibility
Neutral
neutralInverted/neutral white/neutral
Critical
critical/body
critical white/critical
criticalLight neutral/criticalLight critical/criticalLight
Caution
caution/body
caution white/caution
cautionLight neutral/cautionLight caution/cautionLight
Positive
positive/body
positive white/positive
positiveLight neutral/positiveLight positive/positiveLight
Info
info/body
info white/info
infoLight neutral/infoLight info/infoLight
Promote
promote/body
promote white/promote
promoteLight neutral/promoteLight promote/promoteLight
Brand
brand/body
brand white/brand
brandAccent white/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.
✓ Do Solid for primary actions. Soft for status-adjacent actions.
✗ Don't Status 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.