Theming
Modes and brands.
Dense data has 2 modes and 1 brand. A mode swaps the colors; corners and type stay the same in every mode.
Light
Dense dataA security analyst opens the alert queue at 8:00 and scans 200 rows for escalated threats.InvestigatingEscalatedSaveCancel
Dark
Dense dataA security analyst opens the alert queue at 8:00 and scans 200 rows for escalated threats.InvestigatingEscalatedSaveCancel
What a mode changes
| Job | Light | Dark |
|---|---|---|
| Surface · 7 | ||
surface.canvas | slate.light.50 · via neutral.50 | slate.dark.0 · via neutral.0 |
surface.default | slate.light.0 · via neutral.0 | slate.dark.50 · via neutral.50 |
surface.raised | slate.light.0 · via neutral.0 | slate.dark.100 · via neutral.100 |
surface.sunken | slate.light.100 · via neutral.100 | slate.dark.100 · via neutral.100 |
surface.selected | violet.light.100 | violet.dark.100 |
surface.inverse | slate.light.900 · via neutral.900 | slate.dark.900 · via neutral.900 |
surface.scrim | black.light.scrim | black.dark.scrim |
| Text · 7 | ||
text.primary | slate.light.900 · via neutral.900 | slate.dark.900 · via neutral.900 |
text.secondary | slate.light.700 · via neutral.700 | slate.dark.500 · via neutral.500 |
text.muted | slate.light.600 · via neutral.600 | slate.dark.400 · via neutral.400 |
text.inverse | slate.light.0 | slate.light.900 |
text.on-action | slate.light.0 | slate.light.900 |
text.link | violet.light.700 | violet.dark.700 |
text.on-danger | slate.light.0 | slate.light.900 |
| Border · 4 | ||
border.default | slate.light.200 · via neutral.200 | slate.dark.100 · via neutral.100 |
border.strong | slate.light.500 · via neutral.500 | slate.dark.400 · via neutral.400 |
border.focus | violet.light.600 | violet.dark.600 |
border.selected | violet.light.600 | violet.dark.600 |
| Action · 6 | ||
action.primary | violet.light.600 | violet.dark.600 |
action.primary.hover | violet.light.700 | violet.dark.700 |
action.secondary | slate.light.0 · via neutral.0 | slate.dark.50 · via neutral.50 |
action.secondary.hover | slate.light.100 · via neutral.100 | slate.dark.100 · via neutral.100 |
action.danger | red.light.600 | red.dark.600 |
action.danger.hover | red.light.700 | red.dark.700 |
| Status · 8 | ||
status.info | blue.light.600 | blue.dark.600 |
status.info.subtle | blue.light.100 | blue.dark.100 |
status.success | green.light.600 | green.dark.600 |
status.success.subtle | green.light.100 | green.dark.100 |
status.warning | amber.light.600 | amber.dark.600 |
status.warning.subtle | amber.light.100 | amber.dark.100 |
status.danger | red.light.600 | red.dark.600 |
status.danger.subtle | red.light.100 | red.dark.100 |
| Category · 10 | ||
category.1 | violet.light.600 | violet.dark.600 |
category.1.subtle | violet.light.100 | violet.dark.100 |
category.2 | blue.light.600 | blue.dark.600 |
category.2.subtle | blue.light.100 | blue.dark.100 |
category.3 | green.light.600 | green.dark.600 |
category.3.subtle | green.light.100 | green.dark.100 |
category.4 | amber.light.600 | amber.dark.600 |
category.4.subtle | amber.light.100 | amber.dark.100 |
category.5 | slate.light.500 · via neutral.500 | slate.dark.700 · via neutral.700 |
category.5.subtle | slate.light.100 · via neutral.100 | slate.dark.100 · via neutral.100 |
| Disabled · 3 | ||
disabled.text | slate.light.500 · via neutral.500 | slate.dark.500 · via neutral.500 |
disabled.surface | slate.light.100 · via neutral.100 | slate.dark.100 · via neutral.100 |
disabled.border | slate.light.200 · via neutral.200 | slate.dark.200 · via neutral.200 |
| Card · 1 | ||
card | 0px 0px 0px 0px #00000000 | 0px 0px 0px 0px #00000000 |
| Overlay · 1 | ||
overlay | 0px 8px 24px 0px #0D111729 | 0px 8px 24px 0px #00000080 |
What stays the same in every mode
Corners
control · 0.125rem (2px)badge · 0rem (0px)container · 0.25rem (4px)
Type families
Display, Title, Heading, Body, Label, CaptionIBM Plex Sans
DataIBM Plex Mono
The five answers
| Question | Answer | Why |
|---|---|---|
| What can a theme change? | Mode only | One brand, so only the mode changes. |
| How many themes ship? | Two | Light and dark. |
| How are brands handled? | One brand | One product, one brand. |
| Which modes ship? | Light and dark | Light first, always; dark ships as standard for night shifts. |
| What changes when the theme changes? | Colors only | A mode switch changes colors only, so layout never moves. |
When to use what
| Situation | Use | Not | Why |
|---|---|---|---|
| Someone switches to dark | The dark semantic mode | A second palette in components | Only semantic colors change, so layout never moves. |