Skip to main content
Voyager’s colour system is built around four brand tokens, four background schemes, and three functional colours. Every section can choose which scheme it renders against — the brand tokens stay consistent across the storefront while schemes provide rhythm. All colours live in Theme settings → Colors.

​
Brand palette

The four brand tokens are the centre of gravity for the storefront. Most sections inherit from them. Change these four and the whole storefront shifts mood. For example, swapping Primary from navy to a warm brown and Accent from caramel to soft terracotta produces the Warm Cream preset on the fly.

​
The four schemes

Voyager uses background-and-foreground colour pairs — called schemes — that any section can choose from. Pick a scheme on a section and Voyager applies the matching ink colour automatically, so contrast is correct without manual tuning. You can override any scheme’s background and foreground independently. Voyager doesn’t enforce a relationship between the four — Scheme 3 is “warm cream” by name, but you can make it sage green if you want a six-colour palette instead of four.

​
Changing schemes per section

Most sections expose a scheme setting in their schema. Open the section in the Theme Editor and pick from a dropdown. The section background and text colour swap immediately. This lets you compose contrast rhythm — a page that goes paper → navy → paper → soft-cream → navy reads with intentional pace, where a page on a single background reads flat.

​
Functional colours

Three tokens are reserved for system feedback. They don’t change with section schemes — they’re consistent everywhere. The rule colour is small but mighty. It’s the line under every accordion, between every line item in the cart drawer, around every product card. Make it too dark and the storefront looks gridded. Too light and the structure disappears.

​
Dark mode

Voyager ships with a toggleable dark mode. The dark-mode icon (moon) sits in the header next to the cart icon. When toggled, the <html> element gains a data-theme="dark" attribute and the entire token system inverts:
  • --paper (Scheme 1 bg) flips with --ink (Scheme 1 fg)
  • --surface-warm flips to a deep variant
  • The grain overlay switches from mix-blend-mode: multiply to screen
  • The custom cursor flips from navy to paper
The preference is stored in localStorage (voyage-theme), so the visitor’s choice persists across pages and sessions.
Dark mode is purely CSS-driven. There’s no JavaScript on the critical path — the token flip is instant and avoids the white-flash that plagues many dark-mode implementations. See Dark mode and grain for the full mechanic.

​
Accessibility & contrast

The default palette is WCAG-AA compliant on every preset: If you change the brand tokens, run a contrast check (Stark, WebAIM, Figma Contrast) before publishing. The “Accent” colour is the easiest one to fail on, because the eye reads it as “rich” rather than “legible” — confine it to large headings, hover states, and decorative marks.

​
What’s next

Typography

Pair fonts that hold the editorial register.

Theme styles

Switch the whole palette in one click — three named presets.