Theming

Modes and brands.

Multi-brand has 2 modes and 3 brands. A mode swaps the colors; corners and type stay the same in every mode. Pick a brand in the top bar to see its set.

Aster

LightAster

Multi-brandA customer signs up for a plan on the Birch site, then manages it in the shared account area.ActiveRenews in 3 daysSaveCancel

DarkAster

Multi-brandA customer signs up for a plan on the Birch site, then manages it in the shared account area.ActiveRenews in 3 daysSaveCancel

What a mode changes

Job	Light	Dark
Surface · 7
surface.canvas	slate-deep.light.50 · via neutral.50	slate-deep.dark.0 · via neutral.0
surface.default	slate-deep.light.0 · via neutral.0	slate-deep.dark.50 · via neutral.50
surface.raised	slate-deep.light.0 · via neutral.0	slate-deep.dark.100 · via neutral.100
surface.sunken	slate-deep.light.100 · via neutral.100	slate-deep.dark.100 · via neutral.100
surface.selected	teal.light.100	teal.dark.100
surface.inverse	slate-deep.light.900 · via neutral.900	slate-deep.dark.900 · via neutral.900
surface.scrim	black.light.scrim	black.dark.scrim
Text · 7
text.primary	slate-deep.light.900 · via neutral.900	slate-deep.dark.900 · via neutral.900
text.secondary	slate-deep.light.700 · via neutral.700	slate-deep.dark.500 · via neutral.500
text.muted	slate-deep.light.600 · via neutral.600	slate-deep.dark.400 · via neutral.400
text.inverse	slate-deep.light.0	slate-deep.light.900
text.on-action	slate-deep.light.0	slate-deep.light.900
text.link	teal.light.700	teal.dark.700
text.on-danger	slate-deep.light.0	slate-deep.light.900
Border · 4
border.default	slate-deep.light.200 · via neutral.200	slate-deep.dark.100 · via neutral.100
border.strong	slate-deep.light.500 · via neutral.500	slate-deep.dark.400 · via neutral.400
border.focus	teal.light.600	teal.dark.600
border.selected	teal.light.600	teal.dark.600
Action · 6
action.primary	teal.light.600	teal.dark.600
action.primary.hover	teal.light.700	teal.dark.700
action.secondary	slate-deep.light.0 · via neutral.0	slate-deep.dark.50 · via neutral.50
action.secondary.hover	slate-deep.light.100 · via neutral.100	slate-deep.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	teal.light.600	teal.dark.600
category.1.subtle	teal.light.100	teal.dark.100
category.2	purple.light.600	purple.dark.600
category.2.subtle	purple.light.100	purple.dark.100
category.3	orange.light.600	orange.dark.600
category.3.subtle	orange.light.100	orange.dark.100
category.4	blue.light.600	blue.dark.600
category.4.subtle	blue.light.100	blue.dark.100
category.5	green.light.600	green.dark.600
category.5.subtle	green.light.100	green.dark.100
Disabled · 3
disabled.text	slate-deep.light.500 · via neutral.500	slate-deep.dark.500 · via neutral.500
disabled.surface	slate-deep.light.100 · via neutral.100	slate-deep.dark.100 · via neutral.100
disabled.border	slate-deep.light.200 · via neutral.200	slate-deep.dark.200 · via neutral.200
Card · 1
card	0px 2px 8px 0px #0F172A14	0px 2px 8px 0px #00000066
Overlay · 1
overlay	0px 12px 32px 0px #0F172A29	0px 12px 32px 0px #00000080

What stays the same in every mode

Corners

control · 0.25rem (4px)badge · 0.25rem (4px)container · 0.5rem (8px)

Type families

Display, Title, Heading, Body, Label, Caption, DataInter

Birch

LightBirch

Multi-brandA customer signs up for a plan on the Birch site, then manages it in the shared account area.ActiveRenews in 3 daysSaveCancel

DarkBirch

Multi-brandA customer signs up for a plan on the Birch site, then manages it in the shared account area.ActiveRenews in 3 daysSaveCancel

What a mode changes

Job	Light	Dark
Surface · 7
surface.canvas	slate-deep.light.50 · via neutral.50	slate-deep.dark.0 · via neutral.0
surface.default	slate-deep.light.0 · via neutral.0	slate-deep.dark.50 · via neutral.50
surface.raised	slate-deep.light.0 · via neutral.0	slate-deep.dark.100 · via neutral.100
surface.sunken	slate-deep.light.100 · via neutral.100	slate-deep.dark.100 · via neutral.100
surface.selected	purple.light.100	purple.dark.100
surface.inverse	slate-deep.light.900 · via neutral.900	slate-deep.dark.900 · via neutral.900
surface.scrim	black.light.scrim	black.dark.scrim
Text · 7
text.primary	slate-deep.light.900 · via neutral.900	slate-deep.dark.900 · via neutral.900
text.secondary	slate-deep.light.700 · via neutral.700	slate-deep.dark.500 · via neutral.500
text.muted	slate-deep.light.600 · via neutral.600	slate-deep.dark.400 · via neutral.400
text.inverse	slate-deep.light.0	slate-deep.light.900
text.on-action	slate-deep.light.0	slate-deep.light.900
text.link	purple.light.700	purple.dark.700
text.on-danger	slate-deep.light.0	slate-deep.light.900
Border · 4
border.default	slate-deep.light.200 · via neutral.200	slate-deep.dark.100 · via neutral.100
border.strong	slate-deep.light.500 · via neutral.500	slate-deep.dark.400 · via neutral.400
border.focus	purple.light.600	purple.dark.600
border.selected	purple.light.600	purple.dark.600
Action · 6
action.primary	purple.light.600	purple.dark.600
action.primary.hover	purple.light.700	purple.dark.700
action.secondary	slate-deep.light.0 · via neutral.0	slate-deep.dark.50 · via neutral.50
action.secondary.hover	slate-deep.light.100 · via neutral.100	slate-deep.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	teal.light.600	teal.dark.600
category.1.subtle	teal.light.100	teal.dark.100
category.2	purple.light.600	purple.dark.600
category.2.subtle	purple.light.100	purple.dark.100
category.3	orange.light.600	orange.dark.600
category.3.subtle	orange.light.100	orange.dark.100
category.4	blue.light.600	blue.dark.600
category.4.subtle	blue.light.100	blue.dark.100
category.5	green.light.600	green.dark.600
category.5.subtle	green.light.100	green.dark.100
Disabled · 3
disabled.text	slate-deep.light.500 · via neutral.500	slate-deep.dark.500 · via neutral.500
disabled.surface	slate-deep.light.100 · via neutral.100	slate-deep.dark.100 · via neutral.100
disabled.border	slate-deep.light.200 · via neutral.200	slate-deep.dark.200 · via neutral.200
Card · 1
card	0px 2px 8px 0px #0F172A14	0px 2px 8px 0px #00000066
Overlay · 1
overlay	0px 12px 32px 0px #0F172A29	0px 12px 32px 0px #00000080

What stays the same in every mode

Corners

control · 0.75rem (12px)badge · 9999pxcontainer · 1rem (16px)

Type families

Display, Title, Heading, Body, Label, Caption, DataPlus Jakarta Sans

Coral

LightCoral

Multi-brandA customer signs up for a plan on the Birch site, then manages it in the shared account area.ActiveRenews in 3 daysSaveCancel

DarkCoral

Multi-brandA customer signs up for a plan on the Birch site, then manages it in the shared account area.ActiveRenews in 3 daysSaveCancel

What a mode changes

Job	Light	Dark
Surface · 7
surface.canvas	slate-deep.light.50 · via neutral.50	slate-deep.dark.0 · via neutral.0
surface.default	slate-deep.light.0 · via neutral.0	slate-deep.dark.50 · via neutral.50
surface.raised	slate-deep.light.0 · via neutral.0	slate-deep.dark.100 · via neutral.100
surface.sunken	slate-deep.light.100 · via neutral.100	slate-deep.dark.100 · via neutral.100
surface.selected	orange.light.100	orange.dark.100
surface.inverse	slate-deep.light.900 · via neutral.900	slate-deep.dark.900 · via neutral.900
surface.scrim	black.light.scrim	black.dark.scrim
Text · 7
text.primary	slate-deep.light.900 · via neutral.900	slate-deep.dark.900 · via neutral.900
text.secondary	slate-deep.light.700 · via neutral.700	slate-deep.dark.500 · via neutral.500
text.muted	slate-deep.light.600 · via neutral.600	slate-deep.dark.400 · via neutral.400
text.inverse	slate-deep.light.0	slate-deep.light.900
text.on-action	slate-deep.light.0	slate-deep.light.900
text.link	orange.light.700	orange.dark.700
text.on-danger	slate-deep.light.0	slate-deep.light.900
Border · 4
border.default	slate-deep.light.200 · via neutral.200	slate-deep.dark.100 · via neutral.100
border.strong	slate-deep.light.500 · via neutral.500	slate-deep.dark.400 · via neutral.400
border.focus	orange.light.600	orange.dark.600
border.selected	orange.light.600	orange.dark.600
Action · 6
action.primary	orange.light.600	orange.dark.600
action.primary.hover	orange.light.700	orange.dark.700
action.secondary	slate-deep.light.0 · via neutral.0	slate-deep.dark.50 · via neutral.50
action.secondary.hover	slate-deep.light.100 · via neutral.100	slate-deep.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	teal.light.600	teal.dark.600
category.1.subtle	teal.light.100	teal.dark.100
category.2	purple.light.600	purple.dark.600
category.2.subtle	purple.light.100	purple.dark.100
category.3	orange.light.600	orange.dark.600
category.3.subtle	orange.light.100	orange.dark.100
category.4	blue.light.600	blue.dark.600
category.4.subtle	blue.light.100	blue.dark.100
category.5	green.light.600	green.dark.600
category.5.subtle	green.light.100	green.dark.100
Disabled · 3
disabled.text	slate-deep.light.500 · via neutral.500	slate-deep.dark.500 · via neutral.500
disabled.surface	slate-deep.light.100 · via neutral.100	slate-deep.dark.100 · via neutral.100
disabled.border	slate-deep.light.200 · via neutral.200	slate-deep.dark.200 · via neutral.200
Card · 1
card	0px 2px 8px 0px #0F172A14	0px 2px 8px 0px #00000066
Overlay · 1
overlay	0px 12px 32px 0px #0F172A29	0px 12px 32px 0px #00000080

What stays the same in every mode

Corners

control · 9999pxbadge · 9999pxcontainer · 1.25rem (20px)

Type families

Display, Title, Heading, Body, Label, Caption, DataPoppins

The five answers

Question	Answer	Why
What can a theme change?	Mode and brand	Brand and mode both change.
How many themes ship?	Several	Three brands in light and dark: six themes.
How are brands handled?	Brands as modes	Brands are theme modes over shared semantics.
Which modes ship?	Light and dark	Light and dark ship for every brand.
What changes when the theme changes?	Colors, type and shape	A brand switch changes colors, fonts and corners.

When to use what

Situation	Use	Not	Why
Someone switches to dark	The dark mode of the active brand	One dark theme for all brands	Every brand ships light and dark.