Colors

Theme

TokenLightDark

--background
Page/app background.
43 26% 95%
231 8% 18%
--foreground
Default text color.
231 8% 18%
43 26% 95%
--card
Elevated surface background (Card, Select content, menus).
0 0% 100%
231 8% 18%
--card-foreground
Text color on card surfaces.
231 8% 18%
43 26% 95%
--primary
Brand accent — primary buttons, active states.
78 51% 64%
78 51% 64%
--primary-foreground
Text/icon color on top of primary.
231 8% 18%
231 8% 18%
--primary-hover
Primary color on hover.
77 45% 55%
77 45% 55%
--secondary
Secondary accent color.
181 23% 38%
181 23% 38%
--secondary-foreground
Text/icon color on top of secondary.
0 0% 100%
0 0% 100%
--brand-dark
Literal dark brand constant (mode-independent), e.g. SectionDivider color="dark".
231 8% 18%
231 8% 18%
--brand-light
Literal light brand constant (mode-independent).
43 26% 95%
43 26% 95%
--surface-muted
A gentle shift from the background for alternating sections (Band tone "muted"): a touch deeper in light mode, a touch lifted in dark.
43 22% 92.6%
231 8% 22%
--surface-inverse
Inverse section surface (Band tone "inverse"): the brand's dark in light mode, a deeper dark in dark mode so it still reads on a dark page.
231 8% 18%
231 8% 30.6%
--surface-primary
Primary section surface (Band tone "primary"): the primary in light mode, softened in dark so it doesn't glare; primary-foreground stays at 4.6:1 or more on it.
78 51% 64%
78 32% 61.5%
--surface-secondary
Secondary section surface (Band tone "secondary"): the secondary in light mode, softened in dark; secondary-foreground stays at 4.6:1 or more on it.
181 23% 38%
181 23% 28.1%
--surface-tint
Emphasis section surface (Band tone "tint"): a soft primary tint in light mode (a light page never breaks into a dark block), the inverse surface in dark mode. Foreground stays the page's.
78 45% 84.5%
231 8% 30.6%
--surface-tint-secondary
Emphasis section surface (Band tone "tint-secondary"): a soft secondary tint in light mode, the secondary surface in dark mode. Foreground stays the page's.
181 24% 87%
181 23% 28.1%
--success
Success/positive semantic color.
142 72% 26%
142 65% 52%
--success-foreground
Text/icon color on top of success.
0 0% 100%
231 8% 18%
--warning
Warning/caution semantic color.
28 90% 30%
38 92% 55%
--warning-foreground
Text/icon color on top of warning.
0 0% 100%
231 8% 18%
--danger
Danger/destructive semantic color.
356 65% 42%
356 90% 76%
--danger-foreground
Text/icon color on top of danger.
0 0% 100%
231 8% 18%
--info
Informational semantic color.
221 83% 45%
217 90% 74%
--info-foreground
Text/icon color on top of info.
0 0% 100%
231 8% 18%