Foundations
Color
Every color is a semantic token — what it's for, not a raw hex. Components read the token by name and pick up the mode automatically. Click a value to copy.
Surfaces & text
Page background
Light
Dark
In-flow card / raised row
Light
Dark
Panel / elevated card
Light
Dark
Hairline dividers
Light
Dark
Emphasis / control borders
Light
Dark
Body + headings
Light
Dark
Supporting text
Light
Dark
Hints, timestamps, placeholders
Light
Dark
Accent
Primary buttons, FAB, active toggle, links
Light
Dark
Tinted accent surfaces (your-message bubble, selected)
Light
Dark
Text/icons on tinted accent surfaces
Light
Dark
Text on a solid accent fill
Light
Dark
In dark mode accent.on is near-black — the signature dark-mode button treatment on the bright accent.
Domain tints
Each connected domain gets a stable color that follows it across inbox dots, thread badges, compose “From”, and notification cards. The *Bg variant is derived at 14% alpha.
--domain-blue · --domain-blue-bgblue@company.comblue@company.com
--domain-teal · --domain-teal-bgteal@company.comteal@company.com
--domain-coral · --domain-coral-bgcoral@company.comcoral@company.com
--domain-purple · --domain-purple-bgpurple@company.compurple@company.com
--domain-amber · --domain-amber-bgamber@company.comamber@company.com
--domain-pink · --domain-pink-bgpink@company.compink@company.com
--domain-green · --domain-green-bggreen@company.comgreen@company.com
Status
Light
Dark
Light
Dark
Light
Dark
Light
Dark
Light
Dark
Light
Dark
Contrast (WCAG)
Contrast ratios for the pairs components actually use. AA needs ≥4.5 for body text (≥3 for large text or non-text UI). Computed at build.
PairLightDark
Body text on canvas
15.25AAA17.18AAABody text on surface.1
16.20AAA15.78AAASecondary text on canvas
5.80AA7.69AAAMuted text on canvas
3.17AA large3.82AA largeAccent.on over accent
3.59AA large6.75AAAccent.text on accent.bg
5.70AA7.07AAAStatus high text on bg
6.13AA7.32AAAStatus success on bg
5.46AA6.40AAStatus warning on bg
5.87AA6.36AA