Colors
Semantic color tokens and how they adapt to light and dark mode.Live values of the current theme. Switch light/dark or open the customizer to see them change. Ratios are WCAG contrast of the text color on its surface.
Semantic tokens
Surfaces
Aa foreground
$background#ffffff · 16.4:1
Aa cardForeground
$card#ffffff · 16.4:1
Aa popoverForeground
$popover#ffffff · 16.4:1
Aa mutedForeground
$muted#f9f9fb · 5.6:1
Brand
Aa primaryForeground
$primary#3e63dd · 5.2:1
Aa primarySoftForeground
$primarySoft#edf2fe · 5.4:1
Aa secondaryForeground
$secondary#f0f0f3 · 14.4:1
Aa accentForeground
$accent#f0f0f3 · 14.4:1
Intent
Aa destructiveForeground
$destructive#d73a41 · 4.6:1
Aa successForeground
$success#008853 · 4.5:1
Aa warningForeground
$warning#ffc53d · 10.4:1
Aa errorForeground
$error#d73a41 · 4.6:1
Aa infoForeground
$info#0078d6 · 4.5:1
Aa successSoftForeground
$successSoft#e6f6eb · 4.6:1
Aa warningSoftForeground
$warningSoft#fff7c2 · 4.6:1
Aa errorSoftForeground
$errorSoft#feebec · 4.5:1
Aa infoSoftForeground
$infoSoft#e6f4fe · 4.6:1
Lines
$border#d9d9e0
$borderStrong#cdced6
$input#cdced6
$ring#3e63dd
RuleComponents never contain raw colors — an ESLint rule rejects hex/rgb/hsl literals in component source.