Foundations
Colour
Warm platinum greys carry almost everything. One signal orange means act. Screen colours only appear on dark screens. Click a swatch to copy it.
Platinum
Signal
Screen
Text
Negative
Aliases
| Token | Points to |
|---|---|
--surface-body | var(--platinum-200) |
--surface-panel | var(--platinum-100) |
--surface-raised | var(--platinum-50) |
--surface-paper | var(--platinum-0) |
--surface-inset | var(--platinum-300) |
--surface-screen | var(--screen-bg) |
--surface-ink | var(--platinum-900) |
--text-1 | var(--platinum-900) |
--text-2 | var(--platinum-700) |
--text-label | var(--text-3) |
--text-on-ink | var(--platinum-0) |
--border-hair | var(--platinum-300) |
--border-1 | var(--platinum-400) |
--border-ink | var(--platinum-900) |
--accent | var(--signal-orange) |
--accent-press | var(--signal-orange-press) |
--accent-tint | var(--signal-orange-tint) |
--positive | var(--signal-green) |
--positive-tint | var(--signal-green-tint) |
--focus-ring | var(--signal-orange) |
--block-when | var(--platinum-900) |
--block-if | var(--platinum-50) |
--block-then | var(--signal-orange) |
--block-until | var(--platinum-400) |