Foundations

Every value on this page is read out of the running cascade, not typed here. Switch the mode above and watch the numbers move — wire is a real mode, not a filter: it multiplies every chroma channel in the token file by zero and leaves lightness alone, which is why the ranking survives it.

Type

Inter Variable, self-hosted for its optical-size axis, with IBM Plex Mono for identifiers only. Eight steps, ratio 1.125 below 16px and 1.2 above, and every step ships its own tracking — a step is one class, never four utilities assembled by hand, so tracking cannot be forgotten.

Three things on the worker screen are read from two metres: the hero title, the countdown, and which tier a row is in. At a 24-inch 1080p panel’s 0.277mm pixel pitch, that needs 19px or more for a sentence and about 12px for a known word. Everything else is a one-metre lean-in surface, and 14 to 16px is right for it.

Hero title

.t-hero

Label printer offline at Pack 7

The one first thing. The largest type on any working screen

…

Hero title, handheld

.t-hero-sm

Label printer offline at Pack 7

The hero below 768 only

…

Section

.t-section

2 need you now · UPS Ground in 50 min

The status line, sheet titles, section heads

…

Row title

.t-row

Order 4821 payment mismatch, held at pack

Every row in the product — queue and people alike. One step, no exceptions

…

Body

.t-body

140 orders need labels before the UPS truck leaves at 11:30.

Running prose: the why sentence, detail body, deck captions

…

Colour

The interface is near-monochrome. Rank descends in three channels at once — lightness, chroma and weight — so pulling the hue out leaves the ranking intact.

Surface

…

surface-1

…

surface-2

…

surface-3

…

Ink

text-1

…

text-2

…

text-3

…

Line

line-1

…

line-2

…

Action

primary-bg

…

primary-fg

…

accent

…

focus

…

Done

success-fg

…

success-bg

…

The ladder, in all three modes

Light

…

surface-1

…

surface-2

…

surface-3

…

text-1

…

text-2

…

text-3

…

line-1

…

Act nowUp nextWhen you canFor your infoDone

Dark

…

surface-1

…

surface-2

…

surface-3

…

text-1

…

text-2

…

text-3

…

line-1

…

Act nowUp nextWhen you canFor your infoDone

Wire

…

surface-1

…

surface-2

…

surface-3

…

text-1

…

text-2

…

text-3

…

line-1

…

Act nowUp nextWhen you canFor your infoDone

Contrast, measured live

text-1 on canvas

……

text-2 on canvas

……

text-1 on a card

……

text-2 on a card

……

text-3 on canvas (large only)

……

the primary button

……

The four tiers

Tier	Label	Tint	Line	Icon
Act now	act-fg …	act-bg …	act-line …	filled octagon, weight 600
Up next	next-fg …	next-bg …	next-line …	filled triangle, weight 600
When you can	when-fg …	when-bg …	when-line …	hollow circle, weight 500
For your info	fyi-fg …	fyi-bg …	fyi-line …	hollow square, weight 500

Act now: label on its own tint

……

Up next: label on its own tint

……

When you can: label on its own tint

……

For your info: label on its own tint

……

Only Act now carries a row tint. “When you can” and “For your info” sit deliberately close in lightness — they never appear in the same list, and they are told apart by chroma and by icon shape.

Where a saturated hue may appear

Tier foreground: the icon, the tier label, and a time chip's text and border
The Act-now row tint and the hero's tint and tier rail — Act now is the only tier with a row tint
The focus ring, and only under :focus-visible
The done check and the “n of m done” counter
Links inside prose

Banned everywhere else. The primary button’s fill, nav active state, avatars, presence dots, load meters, progress tracks, the shift timeline, and every deck element except one inverted divider.

Geometry

Radius is a function of height — r = round(h × 0.28), snapped to the ladder — not a constant. Anything sharing a row shares one height token and one vertical centre.

Radius

…
r-2
Chip and time pill (h28), small control (h32)
…
r-3
Input and default control (h40)
…
r-4
Primary action (h48), row, rail card
…
r-5
Hero card, sheet, palette, toast
…
r-1
Inner boxes that share a corner with a larger one
…
r-full
Avatar, icon-only round button

Heights

…
h-xs
Chip, time pill
…
h-sm
Small control
…
h-md
Input, default control
…
h-lg
Primary action
…
h-band
Tier group band
…
h-row-dense
Manager roster row
…
h-row
Queue row
…
h-topbar
Top bar

Depth

Three steps, and each has exactly one job: e1 a resting card, e2 the hero and the toast, e3 overlays. In dark, depth is a lighter surface plus a 1px inner top highlight — a dark card never casts a shadow, and a bordered card never contains a bordered card, because alpha-white borders compound.

Light

Dark

Wire

Focus

One ring for everything: a 2px outline at a 2px offset, in the focus token, on :focus-visible only. It is an outline and not a box-shadow, so it follows the corner radius and needs no background to match. It is never animated in. It is there on the frame the key lands.

A link in prose

Iconography

Lucide, three sizes, and the stroke steps up with the size so the optical weight stays level: 16px at 1.5, 18px at 1.5, 20px at 1.75, 24px at 1.75. An icon never carries meaning alone. The four tier shapes are the exception that proves it, because each one is paired with its label everywhere it appears.

Sizes

icon-sm16px · stroke 1.5

icon-md18px · stroke 1.5

icon-lg20px · stroke 1.75

icon-xl24px · stroke 1.75

The set in use

Plus
Check
Close
Clock
Search
Chevron
More
Alert

Tier shapes

Octagon
Triangle
Circle
Square

Motion

Three curves and two springs, and no component may inline a curve. Nothing exceeds 700ms, nothing loops except the all-clear aurora, and nothing moves while the hero is being read unless the reader caused it. The eighteen named moments are playable, each beside its reduced variant, on Motion.

Duration

Row tint, press…
Reveals, crossfades…
Panels, the check draw…
Number roll…
Undo, theme reveal…
The moved-row wash, aurora fade-in…

Easing

Entrances and reveals…
Overlays, sheets, glides…
Exits only…