Every theme record in the repo, one column each, read from
themes/*.json. Tokens
documents the vocabulary; this is what each record actually says in it.
3 records · 11 tokens
A row is one token across every record. That is the whole idea: a binding read on its own always looks deliberate, and only the row shows you the one that is out of step with its neighbours. Colour chips are the live value for that record rather than a restatement of the hex beside them — if the two ever disagree, believe the chip.
| Token | Mark | Impact | Volt |
|---|---|---|---|
| undertone | |||
undertone |
neutral | cool | cool |
| radius | |||
control1 |
.375rem | 0 | 10px |
surface2 |
.375rem | 0 | 10px |
pill3 |
50rem | 50rem | 100px |
| type | |||
family-base |
system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif | "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
webfont4 |
not declared | 2 stylesheets | /assets/fonts/poppins.css |
weight-heading |
800 | 600 | 800 |
tracking-heading5 |
-.02em | not declared | -0.04em |
tracking-eyebrow |
.08em | .08em | .14em |
heading6 |
not declared | poster | not declared |
| motion | |||
duration7 |
.2s | not declared | .2s |
| modes.dark — what each record restates | |||
overrides |
0 tokens | 0 tokens | 0 tokens |
computed, not asserted
Flags are derived from the records on every render: a token some records bind and others leave to fall back, one token stated in two different units, and mixed opaque and translucent colour notation. Fix a record and its flag disappears here without anyone editing this page.
radius/control — Stated in rem and px — a length in px stops scaling with the root font size.radius/surface — Stated in rem and px — a length in px stops scaling with the root font size.radius/pill — Stated in rem and px — a length in px stops scaling with the root font size.type/webfont — Not declared by Mark — the value falls back rather than being chosen.type/tracking-heading — Not declared by Impact — the value falls back rather than being chosen.type/heading — Not declared by Mark or Volt — the value falls back rather than being chosen.motion/duration — Not declared by Impact — the value falls back rather than being chosen.declared · fallen back · derived
Not declared does not mean broken. A record binds what it wants to move and leaves the rest to the reference rendering, which is the contract working as intended — the flag only says the value was inherited rather than chosen, which is worth knowing when two records disagree about whether a thing is part of their identity.
Some tokens never appear here at all, because a theme author never writes
them: the -rgb triplets, the dark secondary tint, and the
on-primary contrast fallback are all derived by
dev/build-themes-css.mjs from the values above. They are real
custom properties in the compiled CSS and they are not part of the
binding, which is why this sheet does not offer them.
The modes.dark row counts what a record restates for
dark, not what it ends up with. A record overriding one token is not
thinner than one overriding seven; it is saying that only one thing about
it changes in the dark.