Design System

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 bodySecondary text on bodyLink text on body
surface — cards, modals, menus
Primary text on surfaceSecondary text on surfaceLink text on surface
neutralSoft — disabled inputs, soft buttons
Primary text on neutralSoftSecondary text on neutralSoftLink text on neutralSoft
neutralLight — badges, tags, table headers
Primary text on neutralLightSecondary text on neutralLightLink text on neutralLight
neutral — tooltips, toasts, solid buttons
Inverted text on neutralWhite 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.

criticalWhite text on criticalErrors, destructive actions
criticalLightCritical text on criticalLightInline validation, subtle alerts
cautionWhite text on cautionWarnings, attention needed
cautionLightCaution text on cautionLightSoft warnings, attention hints
positiveWhite text on positiveSuccess, confirmation
positiveLightPositive text on positiveLightSuccess confirmations, completed states
infoWhite text on infoInformation, help
infoLightInfo text on infoLightInformational callouts, help text
promoteWhite text on promotePremium, features
promoteLightPromote text on promoteLightPremium features, upgrades
brandWhite text on brandBrand identity
brandAccentWhite text on brandAccentBrand 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