Colors
Neutral surfaces
Light backgrounds use dark text; dark backgrounds use inverted text.
body — page foundation
Primary text on body Secondary text on body Link text on body surface — cards, modals, menus
Primary text on surface Secondary text on surface Link text on surface neutralSoft — disabled inputs, soft buttons
Primary text on neutralSoft Secondary text on neutralSoft Link text on neutralSoft neutralLight — badges, tags, table headers
Primary text on neutralLight Secondary text on neutralLight Link text on neutralLight neutral — tooltips, toasts, solid buttons
Inverted text on neutral White text on neutral Neutral dark surface in practice
neutral stays dark across all themes so that neutralInverted/white text is always safe — no React context needed.
Tooltip
Copy to clipboard
Toast notification
Changes saved successfully. Dismiss
Semantic tones
Full tones use white/black text; light tones use their semantic foreground color.
critical White text on critical Errors, destructive actions
criticalLight Critical text on criticalLight Inline validation, subtle alerts
caution White text on caution Warnings, attention needed
cautionLight Caution text on cautionLight Soft warnings, attention hints
positive White text on positive Success, confirmation
positiveLight Positive text on positiveLight Success confirmations, completed states
info White text on info Information, help
infoLight Info text on infoLight Informational callouts, help text
promote White text on promote Premium, features
promoteLight Promote text on promoteLight Premium features, upgrades
brand White text on brand Brand identity
brandAccent White text on brandAccent Brand accent actions
Foreground
Text colors shown on the current body background.
Aa
neutral Aa
secondary Aa
neutralInverted Aa
link Aa
brand Aa
critical Aa
caution Aa
positive Aa
info Aa
promote Borders
Applied via boxShadow as inset shadows. Standard (1px) and large (2px) widths.
neutral
neutralLight
brand
critical
caution
positive
info
promote
neutralLarge
brandLarge
criticalLarge
Social
Brand colors for social platform links and buttons.
Mastodon
Bluesky
Twitter
Discord
LinkedIn