Arno colours-gradient-cta
Styled live from tokens
background · colours-surface-base
Design system · Published tokens colours-text-ai · accents-violet

Tokens you publish. Products that update themselves.

typography-display-40-extra-bold · colours-text-primary + colours-gradient-cta

Every colour, space, radius and type style on this page is a live Arno token — fetched over the network, not hand-copied. Publish a change, and this site follows.

typography-title-24 · colours-text-secondary
Get the tokens colours-gradient-cta · radius-full · spacing-12/24 See the system ↓ colours-border-strong · colours-text-primary
background · colours-surface-canvas

Built entirely from the token set

typography-display-24-bold · colours-text-primary

No hardcoded values — surfaces, borders, spacing, radii and typography all resolve from the published tokens.css. This is exactly what a partner product consumes.

typography-label-14 · colours-text-tertiary

Colour & surface

Base, raised and canvas surfaces, semantic text and border roles, mint & violet accents — one contract, every screen.

colours-surface-raised · colours-border-subtle · radius-16 · icon: gradient-cta

Space & radius

A single spacing scale (2–64) and a radius scale drive rhythm and shape — the same numbers your design tool exports.

colours-surface-raised · colours-border-subtle · radius-16 · icon: surface-hover + border-active

Typography

Display, title and label styles carry weight, size and line-height together, so headings and body stay in tune.

colours-surface-raised · colours-border-subtle · radius-16 · icon: gradient-ai
colours-interactive-primary
colours-accents-mint
colours-accents-violet
colours-surface-raised
colours-surface-hover
colours-gradient-surface
radius-2
radius-8
radius-16
radius-24
radius-full
radius-circle