Color
The brand color and the color tokens of both themes.
Brand color
--primary #4f63e0 · --primary-focus #3f52d6 · --on-primary #ffffff
It is the color of the logo and does not change. Buttons, links, selected states and the focus ring come from this color.
Themes
There are two themes: White (default) and Anthracite (dark). The same token name takes a different value in each theme; components read only the token name.
White
- Page background
--theme-bg#f5f5f7 - Card surface
--theme-surface#ffffff - Inner surface
--theme-surface-2#f5f5f7 - Primary text
--theme-ink#1d1d1f - Secondary body
--theme-ink-2#56565a - Caption text
--theme-ink-3#7a7a7a - Faint / inactive
--theme-ink-4#a3a3a8 - Separator
--theme-separator#e0e0e0 - Field border
--theme-field#e0e0e0 - Accent
--theme-accent#4f63e0 - Accent pressed
--theme-accent-press#3f52d6 - Accent text
--theme-accent-text#4f63e0 - Accent tint
--theme-accent-soft#eff1fd - Accent line
--theme-accent-line#c4cbf5 - Text on accent
--theme-on-accent#ffffff - Error text
--theme-danger-ink#c9241a - Error tint
--theme-danger-soft#fff2f1 - Error line
--theme-danger-line#ffd1cc - Success text
--theme-success-ink#1f7a35 - Success tint
--theme-success-soft#eaf9ef - Success line
--theme-success-line#b0e8c2 - Warning text
--theme-warning-ink#8a5000 - Warning tint
--theme-warning-soft#fff6e9 - Warning line
--theme-warning-line#ffe0ad - Hover
--theme-hover#eeeef2 - Table stripe
--theme-zebra#f5f5f7 - Loading skeleton
--theme-skeleton#e9e9ed - Scrim
--theme-scrimrgba(0, 0, 0, 0.3) - Tooltip background
--theme-tooltip-bg#1d1d1f - Tooltip text
--theme-tooltip-ink#ffffff
Anthracite
- Page background
--theme-bg#1c1c1e - Card surface
--theme-surface#2c2c2e - Inner surface
--theme-surface-2#3a3a3c - Primary text
--theme-ink#f5f5f7 - Secondary body
--theme-ink-2#d1d1d6 - Caption text
--theme-ink-3#aeaeb2 - Faint / inactive
--theme-ink-4#8e8e93 - Separator
--theme-separator#48484a - Field border
--theme-field#7c7c80 - Accent
--theme-accent#4f63e0 - Accent pressed
--theme-accent-press#6274e6 - Accent text
--theme-accent-text#8b98f0 - Accent tint
--theme-accent-soft#33385a - Accent line
--theme-accent-line#4d5594 - Text on accent
--theme-on-accent#ffffff - Error text
--theme-danger-ink#ff6961 - Error tint
--theme-danger-soft#45282a - Error line
--theme-danger-line#7a3a37 - Success text
--theme-success-ink#30d158 - Success tint
--theme-success-soft#213a28 - Success line
--theme-success-line#2f6b3e - Warning text
--theme-warning-ink#ffb340 - Warning tint
--theme-warning-soft#43341c - Warning line
--theme-warning-line#7a5a26 - Hover
--theme-hover#3a3a3c - Table stripe
--theme-zebra#313133 - Loading skeleton
--theme-skeleton#3a3a3c - Scrim
--theme-scrimrgba(0, 0, 0, 0.5) - Tooltip background
--theme-tooltip-bg#48484a - Tooltip text
--theme-tooltip-ink#f5f5f7
Contrast
Ratios are computed from the token values when this page is generated (WCAG 2 relative luminance formula).
| Text / background | White | Anthracite |
|---|---|---|
| Primary text / Page background | 15.46:1 | 15.63:1 |
| Primary text / Card surface | 16.83:1 | 12.80:1 |
| Secondary body / Card surface | 7.31:1 | 9.16:1 |
| Caption text / Card surface | 4.29:1 | 6.30:1 |
| Faint / inactive / Card surface | 2.51:1 | 4.27:1 |
| Accent text / Card surface | 5.01:1 | 5.21:1 |
| Text on accent / Accent | 5.01:1 | 5.01:1 |
| Error text / Error tint | 5.13:1 | 4.68:1 |
| Success text / Success tint | 4.96:1 | 6.11:1 |
| Warning text / Warning tint | 6.08:1 | 6.74:1 |