Theming

Modes and brands.

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

Light

Content firstA reader arrives from search on a phone and reads a long guide in one sitting.FinishedOut of dateSaveNot now

Dark

Content firstA reader arrives from search on a phone and reads a long guide in one sitting.FinishedOut of dateSaveNot now

What a mode changes

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

What stays the same in every mode

Corners

control · 0.5rem (8px)badge · 9999pxcontainer · 0.75rem (12px)

Type families

Display, Title, Heading, Body, DataSource Serif 4

Label, CaptionInter

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 publication, one brand.
Which modes ship?	Light and dark	Light and dark ship as standard; dark helps night reading.
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	Inverting images	Only semantic colors change; the reading layout stays.