Foundations
Color
Every theme defines the same 23 roles in light and dark, so code never changes when the theme does. Use the --e-* variables; the ratios below are checked in CI on every change (text 4.5:1, control borders, focus rings and chart marks 3:1).
Mode
| Role | Swatch | Value | Contrast |
|---|---|---|---|
--e-bgCanvas | #0a0b0d | Background or decoration | |
--e-surfaceCards and sheets | #121316 | Background or decoration | |
--e-raisedGroups inside a surface | #1a1b1f | Background or decoration | |
--e-fieldInputs | #16171a | Background or decoration | |
--e-lineHairlines | #25272c | Background or decoration | |
--e-line-strongControl borders | #5f646e |
| |
--e-inkPrimary text | #edeef0 |
| |
--e-ink-2Secondary text | #959ba4 |
| |
--e-primaryCall to action | #d4ff3a | Background or decoration | |
--e-on-primaryText on primary | #0a0b0d |
| |
--e-accentThe spark | #d4ff3a |
| |
--e-on-accentText on accent | #0a0b0d |
| |
--e-accent-inkAccent as text | #d4ff3a |
| |
--e-accent-softAccent tint | #232b0c | Background or decoration | |
--e-positivePositive text | #6ee7a0 |
| |
--e-positive-softPositive tint | #10261a | Background or decoration | |
--e-negativeNegative text | #ff8e7a |
| |
--e-negative-softNegative tint | #2e1512 | Background or decoration | |
--e-heroHero fill | #17181c | Background or decoration | |
--e-on-heroHero text | #edeef0 |
| |
--e-on-hero-2Hero secondary text | #959ba4 |
| |
--e-trackChart and progress track | #26282d | Background or decoration | |
--e-focusFocus ring | #d4ff3a |
|
inkandink-2hold 4.5:1 on bg, surface, raised and field. Never putink-2on accent or hero fills.- Text on an accent fill is
on-accent; accent as text isaccent-ink. - Status always carries a word too ("Paid", "Overdue"), never color alone.
- Glass translucency, the Glass and Ember glows and Graphite's dot grid are canvas decoration. Don't recreate them by hand.