Themes
Brand expressive ships 2 themes: light, dark. Only semantic tokens change between themes; components never do.
How to switch
- Dark mode: add the class
darkto<html>.
Brands
- Brand expressive (
default): The single brand: vivid magenta, Bricolage Grotesque display, pill controls.
Key colors in each theme
The page, its main surface and text, the main action at rest and on hover, and the focus ring: the colors that show a theme at a glance. Each shows the primitive it points at, then its value.
- the neutral is
taupe(warm-rosy). A warm, rosy gray sits under the vivid pink brand without competing.
| Token | light | dark |
|---|---|---|
color.surface.canvas | Aataupe.light.50via neutral.50 · #FFF8F3 | Aataupe.dark.0via neutral.0 · #120B09 |
color.surface.default | Aataupe.light.0via neutral.0 · #FFFFFF | Aataupe.dark.50via neutral.50 · #1F1411 |
color.text.primary | Aataupe.light.900via neutral.900 · #1F1411 | Aataupe.dark.900via neutral.900 · #FFF8F3 |
color.action.primary | Aapink.light.600#D61F7A | Aapink.dark.600#F59ACA |
color.action.primary.hover | Aapink.light.700#A6025B | Aapink.dark.700#FBB4D8 |
color.border.focus | Aapink.light.600#D61F7A | Aapink.dark.600#F59ACA |