Themes

Multi-brand ships 6 themes: aster-light, aster-dark, birch-light, birch-dark, coral-light, coral-dark. Only semantic tokens change between themes; components never do.

How to switch

• Dark mode: add the class dark to <html>.
• Brand: set data-brand on <html> to aster, birch, coral.

Brands

• Aster (aster): Calm and precise: teal, Inter, small corners.
• Birch (birch): Friendly and helpful: violet, Plus Jakarta Sans, soft corners.
• Coral (coral): Upbeat and energetic: coral orange, Poppins, pill controls.

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.

• Every brand: the neutral is slate-deep (cool). A cool, firm gray stays out of the way of every brand's accent.

Token	aster-light	aster-dark	birch-light	birch-dark	coral-light	coral-dark
color.surface.canvas	Aaslate-deep.light.50via neutral.50 · #F8FAFC	Aaslate-deep.dark.0via neutral.0 · #020617	Aaslate-deep.light.50via neutral.50 · #F8FAFC	Aaslate-deep.dark.0via neutral.0 · #020617	Aaslate-deep.light.50via neutral.50 · #F8FAFC	Aaslate-deep.dark.0via neutral.0 · #020617
color.surface.default	Aaslate-deep.light.0via neutral.0 · #FFFFFF	Aaslate-deep.dark.50via neutral.50 · #0F172A	Aaslate-deep.light.0via neutral.0 · #FFFFFF	Aaslate-deep.dark.50via neutral.50 · #0F172A	Aaslate-deep.light.0via neutral.0 · #FFFFFF	Aaslate-deep.dark.50via neutral.50 · #0F172A
color.text.primary	Aaslate-deep.light.900via neutral.900 · #0F172A	Aaslate-deep.dark.900via neutral.900 · #F8FAFC	Aaslate-deep.light.900via neutral.900 · #0F172A	Aaslate-deep.dark.900via neutral.900 · #F8FAFC	Aaslate-deep.light.900via neutral.900 · #0F172A	Aaslate-deep.dark.900via neutral.900 · #F8FAFC
color.action.primary	Aateal.light.600#0F766E	Aateal.dark.600#7FCFC6	Aapurple.light.600#6D28D9	Aapurple.dark.600#B79DF7	Aaorange.light.600#C2410C	Aaorange.dark.600#F7A67F
color.action.primary.hover	Aateal.light.700#015852	Aateal.dark.700#A1DCD4	Aapurple.light.700#5212AA	Aapurple.dark.700#C9B7FC	Aaorange.light.700#942D02	Aaorange.dark.700#FCBD9F
color.border.focus	Aateal.light.600#0F766E	Aateal.dark.600#7FCFC6	Aapurple.light.600#6D28D9	Aapurple.dark.600#B79DF7	Aaorange.light.600#C2410C	Aaorange.dark.600#F7A67F