Themes

Content first ships 2 themes: light, dark. Only semantic tokens change between themes; components never do.

How to switch

• Dark mode: add the class dark to <html>.

Brands

• Content first (default): The single brand: deep navy ink on warm paper, a serif for reading.

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 stone (warm). A warm gray is calm, like paper, for long reading.

Token	light	dark
color.surface.canvas	Aastone.light.50via neutral.50 · #FFFDF8	Aastone.dark.0via neutral.0 · #14110D
color.surface.default	Aastone.light.0via neutral.0 · #FFFFFF	Aastone.dark.50via neutral.50 · #1F1B16
color.text.primary	Aastone.light.900via neutral.900 · #1F1B16	Aastone.dark.900via neutral.900 · #FFFDF8
color.action.primary	Aanavy.light.600#1E3A5F	Aanavy.dark.600#8FA6C4
color.action.primary.hover	Aanavy.light.700#122948	Aanavy.dark.700#ACBDD5
color.border.focus	Aanavy.light.600#1E3A5F	Aanavy.dark.600#8FA6C4