Colour

Every colour on the site comes from one seed, run through Google's material-color-utilities — the same library Android uses for Material You. It happens once, at build time; readers download a few dozen CSS custom properties, not a colour library.

The live scheme

These swatches read the site's actual tokens, so they follow light/dark mode and the style switch in the top bar.

Accent

primary--md-sys-color-primary

primary-container--md-sys-color-primary-container

secondary--md-sys-color-secondary

secondary-container--md-sys-color-secondary-container

tertiary--md-sys-color-tertiary

tertiary-container--md-sys-color-tertiary-container

error--md-sys-color-error

error-container--md-sys-color-error-container

Surface

surface-container-lowest--md-sys-color-surface-container-lowest

surface-container-low--md-sys-color-surface-container-low

surface--md-sys-color-surface

surface-container--md-sys-color-surface-container

surface-container-high--md-sys-color-surface-container-high

surface-container-highest--md-sys-color-surface-container-highest

inverse-surface--md-sys-color-inverse-surface

outline--md-sys-color-outline

Custom colours

success--md-custom-color-success

success-container--md-custom-color-success-container

warning--md-custom-color-warning

warning-container--md-custom-color-warning-container

info--md-custom-color-info

info-container--md-custom-color-info-container

From seed to scheme

1. The seed is converted to HCT (hue, chroma, tone), a colour space where equal steps of tone look like equal steps of lightness.
2. The scheme variant derives six key palettes — primary, secondary, tertiary, neutral, neutral-variant, error — each a full 0–100 tone ramp.
3. Every role (primary, on-primary-container, surface-container-high, …) picks a tone from its palette, separately for light and dark, chosen so that each foreground role contrasts with the background roles it sits on.

Tokens

Prefix	What	Example
--md-sys-color-*	Every M3 colour role, light or dark	--md-sys-color-primary-container
--md-custom-color-*	Your custom colours, four roles each	--md-custom-color-success-container
--md-ref-palette-*	Raw palette tones, same in both modes	--md-ref-palette-tertiary90

All of the default theme's --vp-c-* variables are wired to these roles, so anything VitePress draws — and any plugin that uses --vp-c-brand-1 — is already on-scheme.

How the containers map

Markdown	Container role
::: info	info container (custom colour)
::: tip	success container (custom colour)
::: warning	warning container (custom colour)
::: danger, > [!CAUTION]	error container
> [!IMPORTANT]	tertiary container
> [!NOTE], ::: details	surface container high

INFO

Info is the info custom colour.

TIP

Tip is success — harmonised toward the seed.

IMPORTANT

Important is tertiary.

WARNING

Warning is the warning custom colour.

DANGER

Danger is error.

Contrast

Each text role is paired with its background and checked against WCAG AA (4.5:1) by the test suite — in light and dark, for both styles, across four seeds chosen to stress different corners of colour space (a teal, M3's baseline purple, a near-grey and a hot orange). A seed that would produce an unreadable pairing fails CI, not a reader.

For readers who need more, raise contrast:

md3: { contrast: 0.5 } // Material's "medium contrast"