Halotone system · 01

The Halotone system.

The core tokens and components behind every screen. Override the custom properties in custom.css — no Sass rebuild, and template updates leave that file untouched.

Colour

Neutral surfaces keep the interface quiet. Product colourways are reserved for atmosphere and media light.

--color-bg-canvas: #f7f8fd
--color-bg-surface: #fbfbff
--color-text-primary: #171823
--color-text-secondary: #5f6070
--color-action-primary: #171823
--color-focus-ring: #2b59ff
--colorway-aqua: #78e6df
--colorway-violet: #c4a9ff
--colorway-pink: #f2bdf4

Typography

Type scales in rem, follows browser preferences and stays intentionally close to a neutral system face.

--font-size-h1

Sound, shaped around you.

--font-size-h2

Section heading

--font-size-body

Body copy stays measured, readable and calm at every breakpoint.

--letter-spacing-eyebrow

Listening · open back

Controls

Primary actions carry weight. Secondary routes stay light and reuse the directional language from the product stage.

Primary link Secondary link

Quiet call to action

Space & shape

A compact four-point rhythm scales into generous viewport compositions without one-off spacing patches.

--space-2: 0.5rem
--space-4: 1rem
--space-8: 2rem
--space-16: 4rem
--container-max: 72rem
--touch-target: 2.75rem

Motion and layout

Product, copy and ambient light share one controlled timeline. Reduced motion always lands on the same complete end state.

--duration-stage — the product and copy transition share this timeline.
--depth-blur-step — blur added per step of distance from the active product.
--stage-max — width the hero composition is centred within.
--topbar-reserve / --pager-reserve — vertical space held for the fixed chrome.
--container-max / --container-gutter — page container.

Every animation has a designed reduced-motion end state. With prefers-reduced-motion: reduce the range still changes, instantly, and nothing is left mid-transition.