01 — Foundations

Neutrals carry the interface.

Every neutral is chroma 0 — literally grey. Chroma appears only in the accent and the four indicators, which is what makes a status colour readable at a glance.

The accent is two numbers

--a-accent-h · --a-accent-c
Presets
Hue265
Chroma multiplier1.00

Drag either slider — buttons, rings, badges, charts and every gradient on the site re-tone live. Current: indigo

Derived accent ramp
--a-accent-soft
--a-accent-soft-2
--a-accent-line
--a-accent
--a-accent-hover
--a-accent-active
--a-accent-text
Redefine it globally — or for one subtree
:root {
  --a-accent-h: 320;   /* any oklch hue */
  --a-accent-c: 1.1;   /* 0 = grey, 1 = default, 1.3 = vivid */
}

/* scoped to a section only */
<section style={accentStyle({ h: 150 })}> … </section>

Neutrals

chroma 0 · light-dark()
page--a-bg
subtle--a-bg-2
surface--a-surface
raised--a-surface-2
sunken--a-sunken
fill--a-fill
fill 2--a-fill-2
fill 3--a-fill-3
hairline--a-line
hairline 2--a-line-2
text 3--a-text-3
text 2--a-text-2
text--a-text

Indicators

the only other chroma in the system
ok
Live
warn
Degraded
err
Failing
info
Notice

Type

Manrope · Roboto Mono · fluid clamp()
Display · var(--a-fs-display)Interfaces people live in
Heading 1 · var(--a-fs-h1)Interfaces people live in
Heading 2 · var(--a-fs-h2)Interfaces people live in
Heading 3 · var(--a-fs-h3)Interfaces people live in
Lead · var(--a-fs-lead)Interfaces people live in
Body · var(--a-fs-body)Interfaces people live in
Small · var(--a-fs-sm)Interfaces people live in
Caption · var(--a-fs-xs)Interfaces people live in
0123456789 · sk_live_9f2a · p95 412ms · Roboto Mono for facts

Space

4px rhythm
--a-s-1
--a-s-2
--a-s-3
--a-s-4
--a-s-5
--a-s-6
--a-s-8
--a-s-10
--a-s-12
--a-s-16
--a-s-20
--a-s-24

Radius & elevation

xs
sm
md
lg
xl
2xl
sh-1
sh-2
sh-3

Icons

Material Symbols Outlined · wght 200
search
dashboard
database
key
receipt_long
settings
bolt
terminal
notifications
cloud_upload
graph_3
shield_lock
package_2
rocket_launch
monitoring
tune
history
arrow_outward
weight axis
100
200 · default
300
400
500

Gradient fields

marketing surfaces only · hue-linked

Five fields, all derived from the accent hue. They exist for the occasional large surface — an auth panel, a campaign page — and are deliberately absent from product chrome, where colour has to mean something.

--a-grad-accent
--a-grad-dusk
--a-grad-tide
--a-grad-ember
--a-grad-spectrum

Motion

110 / 180 / 300ms · never bouncy
tokens.css
--a-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
--a-ease-io: cubic-bezier(0.4, 0, 0.2, 1);
--a-t-fast: 110ms;   /* hover, press */
--a-t-base: 180ms;   /* enter, exit  */
--a-t-slow: 300ms;   /* layout, sheets */