Cadence Tokens, live

Cadence

Page

The system

Five numbers, a derivation rule, and the reasoning behind both.

Text

Everything visible on this site is a function of five values. This page is the documentation.

Hue

A single angle, 0 to 360. Every colour in the theme — backgrounds, rules, muted text, the accent, the second accent — is composed from it at a fixed lightness and a fixed chroma multiplier. There is no colour picker anywhere in the theme, and no hexadecimal value in either stylesheet.

Chroma

A multiplier, not an absolute. It scales every chroma in the ramp at once. Below about 0.7 the site reads institutional; above about 1.1 it reads consumer. It is the fastest single control for changing register without changing identity.

Scale ratio

Each step of the type scale is the step below it multiplied by this number. The base size is fluid; the steps are not, because a ratio that changes with the viewport is not a ratio. Display sizes are capped against the viewport so a wide ratio cannot push a headline off a phone.

Radius

One base value. Every rounded corner in the theme is a multiple of it, so setting it to zero squares the entire interface in one move and setting it to 22 makes everything, including the photography, soft.

Density

Multiplies the spacing rhythm. Section padding, grid gaps, button padding and the header height are all expressed against it, so a clinic can have air and a foundry can be tight without either one being a separate build.

What the theme does not derive

Line height, and the tracking on display text. Both need judgement per typeface and both are set per display face rather than calculated. Everything else is downstream.

Next

Tell us what youare actually trying to do.

Most engagements start with a ninety-minute call and a one-page note back. No deck, no discovery invoice.