Themes
Dense data 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
- Dense data (
default): The single brand: precise blue on cool grey.
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
slate(cool). Muted color keeps attention on the data; a cool gray reads as precise.
| Token | light | dark |
|---|---|---|
color.surface.canvas | Aaslate.light.50via neutral.50 · #F7F8FA | Aaslate.dark.0via neutral.0 · #0D1117 |
color.surface.default | Aaslate.light.0via neutral.0 · #FFFFFF | Aaslate.dark.50via neutral.50 · #161B23 |
color.text.primary | Aaslate.light.900via neutral.900 · #161B23 | Aaslate.dark.900via neutral.900 · #F7F8FA |
color.action.primary | Aaviolet.light.600#4B3FD9 | Aaviolet.dark.600#A9A3F6 |
color.action.primary.hover | Aaviolet.light.700#3729AA | Aaviolet.dark.700#BEBBFB |
color.border.focus | Aaviolet.light.600#4B3FD9 | Aaviolet.dark.600#A9A3F6 |