Colors

Semantic tokens for backgrounds, text, and borders. Each swatch shows real text to verify contrast.

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