Theming

Modes and brands.

Brand expressive has 2 modes and 1 brand. A mode swaps the colors; corners and type stay the same in every mode.

Light

Brand expressiveA visitor lands on a launch page from a social post and joins the waiting list.On the listAlmost goneGoNot now

Dark

Brand expressiveA visitor lands on a launch page from a social post and joins the waiting list.On the listAlmost goneGoNot now

What a mode changes

Job	Light	Dark
Surface · 7
surface.canvas	taupe.light.50 · via neutral.50	taupe.dark.0 · via neutral.0
surface.default	taupe.light.0 · via neutral.0	taupe.dark.50 · via neutral.50
surface.raised	taupe.light.0 · via neutral.0	taupe.dark.100 · via neutral.100
surface.sunken	taupe.light.100 · via neutral.100	taupe.dark.100 · via neutral.100
surface.selected	pink.light.100	pink.dark.100
surface.inverse	taupe.light.900 · via neutral.900	taupe.dark.900 · via neutral.900
surface.scrim	black.light.scrim	black.dark.scrim
Text · 7
text.primary	taupe.light.900 · via neutral.900	taupe.dark.900 · via neutral.900
text.secondary	taupe.light.700 · via neutral.700	taupe.dark.500 · via neutral.500
text.muted	taupe.light.600 · via neutral.600	taupe.dark.400 · via neutral.400
text.inverse	taupe.light.0	taupe.light.900
text.on-action	taupe.light.0	taupe.light.900
text.link	pink.light.700	pink.dark.700
text.on-danger	taupe.light.0	taupe.light.900
Border · 4
border.default	taupe.light.200 · via neutral.200	taupe.dark.100 · via neutral.100
border.strong	taupe.light.500 · via neutral.500	taupe.dark.400 · via neutral.400
border.focus	pink.light.600	pink.dark.600
border.selected	pink.light.600	pink.dark.600
Action · 6
action.primary	pink.light.600	pink.dark.600
action.primary.hover	pink.light.700	pink.dark.700
action.secondary	taupe.light.0 · via neutral.0	taupe.dark.50 · via neutral.50
action.secondary.hover	taupe.light.100 · via neutral.100	taupe.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	pink.light.600	pink.dark.600
category.1.subtle	pink.light.100	pink.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	taupe.light.500 · via neutral.500	taupe.dark.700 · via neutral.700
category.5.subtle	taupe.light.100 · via neutral.100	taupe.dark.100 · via neutral.100
Disabled · 3
disabled.text	taupe.light.500 · via neutral.500	taupe.dark.500 · via neutral.500
disabled.surface	taupe.light.100 · via neutral.100	taupe.dark.100 · via neutral.100
disabled.border	taupe.light.200 · via neutral.200	taupe.dark.200 · via neutral.200
Card · 1
card	0px 12px 32px 0px #1F141124	0px 12px 32px 0px #00000080
Overlay · 1
overlay	0px 24px 48px 0px #1F141133	0px 24px 48px 0px #00000099

What stays the same in every mode

Corners

control · 9999pxbadge · 9999pxcontainer · 1.5rem (24px)

Type families

Display, Title, HeadingBricolage Grotesque

Body, Label, Caption, DataDM Sans

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 brand per campaign.
Which modes ship?	Light and dark	Light and dark ship as standard.
What changes when the theme changes?	Colors only	Only colors change.

When to use what

Situation	Use	Not	Why
Someone switches to dark	The dark semantic mode	A separate campaign palette	Dark ships as standard; campaigns change values, not structure.