Token graph
Read at build time. Values shown are the :root light defaults
compiled into @esa/tokens — theme blocks are deliberately excluded so you see the
shipped default chain, not one theme’s overrides. The graph is a snapshot of the checkout
that built this site, not a live read.
Every token in the system, classified by the tier that declares it (source of truth: which directory the JSON lives in, not a name pattern), with its full resolution chain and its reverse dependencies — who points at it.
Health
Tripwires the per-component “Theming surface” table can’t see, because each is a statement about the graph rather than about one component. Three of these are inventory, not defects — dimension roles, ad-hoc hooks, and unused ramp steps — and are excluded from the headline number. Folding them in would make the tally permanently alarming and therefore ignorable.
Scan coverage — where “nothing reads this” is measured from
Every check below that says a token is unread is only as good as the set of files this
module opens. That set is now explicit and rendered here, because it has been wrong three
times: --duration-0 (its only reader was an @media block),
--topbar-* (filed “staged” for months), and most recently
102 --typography-* tokens reported as orphans while
packages/tokens/src/typography.css read them 169 times. An unscanned surface
that ships is now itself a health finding.
| Root | Kind | Files | Tokens read | Why |
|---|---|---|---|---|
packages/ecology/src | component | 64 | 257 | The component kit. Files directly under components/ carry slug identity; anything else in the package is recorded by path. |
packages/tokens/src | file | 4 | 277 | The authored partials @esa/tokens ships alongside the compiled output — typography.css assembles the composites into classes, layouts.css the layout primitives. |
packages/docs/src | file | 10 | 33 | @esa/docs — the shared doc-site chrome, consumed by this site and by every spoke. |
packages/spoke-template/src | file | 6 | 43 | The seed scripts/create-spoke.mjs copies wholesale, so a token it reads is load-bearing for every spoke that will ever exist. |
packages/tokens/src/component-tokens.css | not scanned | — | — | Already covered twice over. Every var() in the file sits on the right-hand side of a custom-property declaration — the only exceptions are three mentions inside comments — so refsOf() -> usedByTokens carries the :root ones and conditionalEdges the at-rule ones. Read-scanning would double-count every edge and push tier-3 right-hand refs into `undeclared`, inventing bugs. |
packages/tokens/dist/tokens.css | not scanned | — | — | The compiled output — declarations, not reads. parseDefs() already takes every one of them, and every var() in the file sits on a declaration right-hand side, which refsOf() carries. Same reasoning as component-tokens.css above. |
apps/site/src | not scanned | — | — | A documentation surface, not a consumer of the packages — the question orphan answers is "is this load-bearing for anyone consuming @esa/tokens", and the manual is not a consumer. Two concrete hazards if it were included: this debug page would de-orphan --color-background-ai-subtle by styling ITSELF, and styles/themes.css would re-enter through the back door as reader edges when its `--x: var(--y)` lines are writes, which the header rule above excludes on purpose. It would rescue exactly three tokens (--color-background-accent, --color-background-ai-subtle, --transition-slow); those want a component reader or folding away, not an exemption. |
Shipped surfaces nobody scans 0
A .css file @esa/tokens exports that no scan root covers and no exemption names. Every token it reads will report as an ORPHAN, and orphan on this page reads as “delete it”. Derived from the package’s own exports map rather than a hand-kept list, so adding a partial without rostering it turns this red on the next build. Third occurrence of this class — see the SCAN_ROOTS comment in token-graph.ts.
None.
Undefined references 0
Declared nowhere AND read with no fallback, so the declaration drops entirely. Unambiguous bugs.
None.
Theme re-points a primitive 0
SPEC.md: “Primitives never move — not in the hub, not in a theme.” themes.css says the same in its own header. Moving a primitive moves everything downstream of it, which is the exact blast radius the tier model exists to prevent. Re-point the semantic or component token instead — which is what both shipped themes now do, re-skinning shape through --radius-md rather than --radius-200.
None.
Declared at two tiers 0
The same name declared in the token JSON and again in component-tokens.css. The tier-3 copy loads last and wins, so the compiled declaration is dead while still reading as authoritative in the source JSON. It also breaks the tier model — the token is both “never moves” and “a per-component hook”. Pick one tier.
None.
Tier-3 color skipping tier 2 0
A component color token wired straight to a primitive. A spoke re-pointing the semantic layer will NOT re-skin these.
None.
Semantic colour hardcodes 8
A tier-2 COLOUR terminating in a raw literal without passing through a ramp — a magic value hiding at the intent layer, off the palette and unconstrained by it.
| Token | Detail | Where |
|---|---|---|
--color-background-dataviz-sequential-1 | raw #75c183 — never touches a ramp | — |
--color-background-dataviz-sequential-2 | raw #50ae64 — never touches a ramp | — |
--color-background-dataviz-sequential-3 | raw #389850 — never touches a ramp | — |
--color-background-dataviz-sequential-4 | raw #288240 — never touches a ramp | — |
--color-background-dataviz-sequential-5 | raw #266a36 — never touches a ramp | — |
--color-background-dataviz-sequential-6 | raw #24522e — never touches a ramp | — |
--color-background-field | raw rgba(0, 0, 0, 0) — never touches a ramp | — |
--color-background-overlay-hover | raw rgba(0, 0, 0, 0.03) — never touches a ramp | — |
Dimension roles (tier 2, no ramp behind them) 8
Tier-2 dimension tokens that hold a literal rather than aliasing a primitive — control heights, chip heights, layout widths. Not a defect: no tier-1 ramp exists for these, so tier 2 is where the definition belongs. Inventory, so that if one ever grows a ramp it can move onto it.
| Token | Detail | Where |
|---|---|---|
--touch-target-min | defines 44px — no tier-1 ramp behind it | — |
--z-dropdown | defines 50 — no tier-1 ramp behind it | — |
--z-header | defines 200 — no tier-1 ramp behind it | — |
--z-modal | defines 400 — no tier-1 ramp behind it | — |
--z-modal-backdrop | defines 300 — no tier-1 ramp behind it | — |
--z-sidebar | defines 100 — no tier-1 ramp behind it | — |
--z-toast | defines 500 — no tier-1 ramp behind it | — |
--z-tooltip | defines 600 — no tier-1 ramp behind it | — |
Orphan hooks (tier 2 + 3) 38
Declared, but nothing reads it — no token, no component, and no other shipped surface (see the Scan coverage table above for exactly which files that means). Either dead surface to fold away, or a hook nobody wired up. Primitives are excluded here — see “unused ramp steps” below. Staged surfaces are excluded too — see the next check.
| Token | Detail | Where |
|---|---|---|
--color-background-accent | tier-2 semantic, resolves to #f76b15 | — |
--color-background-accent-hover | tier-2 semantic, resolves to #ef5f00 | — |
--color-background-ai-subtle | tier-2 semantic, resolves to #fdfcfc | — |
--color-background-brand-active | tier-2 semantic, resolves to #3e9b4f | — |
--color-background-dataviz-categorical-1 | tier-2 semantic, resolves to #3e9b4f | — |
--color-background-dataviz-categorical-2 | tier-2 semantic, resolves to #3e63dd | — |
--color-background-dataviz-categorical-3 | tier-2 semantic, resolves to #ef5f00 | — |
--color-background-dataviz-categorical-4 | tier-2 semantic, resolves to #0090ff | — |
--color-background-dataviz-categorical-5 | tier-2 semantic, resolves to #cb1d63 | — |
--color-background-dataviz-categorical-6 | tier-2 semantic, resolves to #0797b9 | — |
--color-background-dataviz-categorical-7 | tier-2 semantic, resolves to #6550b9 | — |
--color-background-dataviz-categorical-8 | tier-2 semantic, resolves to #0d9b8a | — |
--color-background-dataviz-diverging-1 | tier-2 semantic, resolves to #0d74ce | — |
--color-background-dataviz-diverging-2 | tier-2 semantic, resolves to #0090ff | — |
--color-background-dataviz-diverging-3 | tier-2 semantic, resolves to #8ec8f6 | — |
--color-background-dataviz-diverging-4 | tier-2 semantic, resolves to #f0f0f0 | — |
--color-background-dataviz-diverging-5 | tier-2 semantic, resolves to #f4a9aa | — |
--color-background-dataviz-diverging-6 | tier-2 semantic, resolves to #e5484d | — |
--color-background-dataviz-diverging-7 | tier-2 semantic, resolves to #ce2c31 | — |
--color-background-dataviz-sequential-1 | tier-2 semantic, resolves to #75c183 | — |
--color-background-dataviz-sequential-2 | tier-2 semantic, resolves to #50ae64 | — |
--color-background-dataviz-sequential-3 | tier-2 semantic, resolves to #389850 | — |
--color-background-dataviz-sequential-4 | tier-2 semantic, resolves to #288240 | — |
--color-background-dataviz-sequential-5 | tier-2 semantic, resolves to #266a36 | — |
--color-background-dataviz-sequential-6 | tier-2 semantic, resolves to #24522e | — |
--color-background-dataviz-sequential-7 | tier-2 semantic, resolves to #203c25 | — |
--color-background-default-hover | tier-2 semantic, resolves to #e8e8e8 | — |
--color-background-default-knockout-hover | tier-2 semantic, resolves to #646464 | — |
--color-content-default-tertiary | tier-2 semantic, resolves to #646464 | — |
--color-content-link-hover | tier-2 semantic, resolves to #3e9b4f | — |
--color-content-on-accent | tier-2 semantic, resolves to #fcfcfc | — |
--color-content-on-ai | tier-2 semantic, resolves to #fcfcfc | — |
--color-content-on-utility-info | tier-2 semantic, resolves to #fcfcfc | — |
--touch-target-min | tier-2 semantic, resolves to 44px | — |
--transition-slow | tier-2 semantic, resolves to 300ms ease | — |
--typography-font-weight-light | tier-2 semantic, resolves to 300 | — |
--z-header | tier-2 semantic, resolves to 200 | — |
--z-modal-backdrop | tier-2 semantic, resolves to 300 | — |
Staged surfaces (component not built yet) 24
Unread because the component that will read them does not exist yet — the contract is declared first so it can be reviewed before code depends on it. Governed by STAGED_PREFIXES in token-graph.ts; each prefix must be documented in SPEC.md and have a component doc page. Removing a prefix from that list should mean the component landed, not that the finding got annoying.
| Token | Detail | Where |
|---|---|---|
--grid-bg | staged — resolves to #fcfcfc | — |
--grid-border-color | staged — resolves to #cecece | — |
--grid-cell-padding-x | staged — resolves to 0.75rem | — |
--grid-cell-padding-y | staged — resolves to 0.5rem | — |
--grid-font-family | staged — resolves to 'DM Sans', sans-serif | — |
--grid-font-size | staged — resolves to clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | — |
--grid-header-bg | staged — resolves to #fcfcfc | — |
--grid-header-border-color | staged — resolves to #cecece | — |
--grid-header-color | staged — resolves to #202020 | — |
--grid-header-font-size | staged — resolves to clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | — |
--grid-header-weight | staged — resolves to 550 | — |
--grid-pagination-bg | staged — resolves to #fcfcfc | — |
--grid-pagination-border-color | staged — resolves to #cecece | — |
--grid-radius | staged — resolves to 0.5rem | — |
--grid-row-bg | staged — resolves to #fcfcfc | — |
--grid-row-bg-hover | staged — resolves to #f0f0f0 | — |
--grid-row-bg-selected | staged — resolves to color-mix(in srgb, #46a758 6%, transparent) | — |
--grid-row-border-color | staged — resolves to #d9d9d9 | — |
--grid-row-font-size | staged — resolves to clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | — |
--grid-row-stripe-bg | staged — resolves to #fcfcfc | — |
--grid-shadow | staged — resolves to 0 | — |
--grid-toolbar-bg | staged — resolves to #fcfcfc | — |
--grid-toolbar-gap | staged — resolves to 0.5rem | — |
--grid-toolbar-padding | staged — resolves to 0.5rem 0.75rem | — |
Chrome, exempt by decision (component EXISTS) 0
Not staged and not dead: the component is built and these map onto real elements in it, and we are choosing not to wire them. Kept in its own bucket because --topbar-* spent months filed as "staged" — which reads as "arriving soon" — on the false premise that no component owned it. The "Where" column names the owner so that cannot recur. Governed by CHROME_EXEMPT in token-graph.ts; every entry states what a spoke loses.
None.
Ad-hoc hooks — undeclared tier-3 (should be empty) 3
Declared in no token file, but always read WITH a fallback. This note used to call that legitimate per SPEC.md; the spec says the opposite, giving two dispositions and no third — promote into component-tokens.css, or fold onto the role it aliases. An undeclared read is not a fourth tier, it is a tier-3 token missing its declaration: unguarded, absent from token-names.json, invisible to any spoke that has not read the component source. Resolved to zero on 2026-08-16 (9 declared, 24 folded), so a row here is a regression rather than a backlog.
| Token | Detail | Where |
|---|---|---|
--category-11 | offered via inline fallback only — promote into component-tokens.css or fold away | esa-pill |
--category-2 | offered via inline fallback only — promote into component-tokens.css or fold away | esa-pill |
--category-6 | offered via inline fallback only — promote into component-tokens.css or fold away | esa-pill |
Unused ramp steps (tier 1) 748
Primitive steps nothing references. Normal — a 12-step scale is a palette, not a checklist. Useful only for spotting a whole ramp that is carried but never used.
| Token | Detail | Where |
|---|---|---|
--border-width-300 | 3px | — |
--border-width-400 | 4px | — |
--color-amber-1 | #fefdfb | — |
--color-amber-10 | #ffba18 | — |
--color-amber-11 | #ab6400 | — |
--color-amber-12 | #4f3422 | — |
--color-amber-2 | #fefbe9 | — |
--color-amber-3 | #fff7c2 | — |
--color-amber-4 | #ffee9c | — |
--color-amber-5 | #fbe577 | — |
--color-amber-6 | #f3d673 | — |
--color-amber-7 | #e9c162 | — |
--color-amber-8 | #e2a336 | — |
--color-amber-9 | #ffc53d | — |
--color-amber-dark-1 | #16120c | — |
--color-amber-dark-10 | #ffd60a | — |
--color-amber-dark-11 | #ffca16 | — |
--color-amber-dark-12 | #ffe7b3 | — |
--color-amber-dark-2 | #1d180f | — |
--color-amber-dark-3 | #302008 | — |
--color-amber-dark-4 | #3f2700 | — |
--color-amber-dark-5 | #4d3000 | — |
--color-amber-dark-6 | #5c3d05 | — |
--color-amber-dark-7 | #714f19 | — |
--color-amber-dark-8 | #8f6424 | — |
--color-amber-dark-9 | #ffc53d | — |
--color-black-a-10 | rgba(0, 0, 0, 0.8) | — |
--color-black-a-11 | rgba(0, 0, 0, 0.9) | — |
--color-black-a-12 | rgba(0, 0, 0, 0.95) | — |
--color-black-a-3 | rgba(0, 0, 0, 0.15) | — |
--color-black-a-4 | rgba(0, 0, 0, 0.2) | — |
--color-black-a-5 | rgba(0, 0, 0, 0.3) | — |
--color-black-a-6 | rgba(0, 0, 0, 0.4) | — |
--color-black-a-8 | rgba(0, 0, 0, 0.6) | — |
--color-black-a-9 | rgba(0, 0, 0, 0.7) | — |
--color-blue-4 | #d5efff | — |
--color-blue-5 | #c2e5ff | — |
--color-blue-8 | #5eb1ef | — |
--color-blue-dark-1 | #0d1520 | — |
--color-blue-dark-10 | #3b9eff | — |
--color-blue-dark-11 | #70b8ff | — |
--color-blue-dark-12 | #c2e6ff | — |
--color-blue-dark-2 | #111927 | — |
--color-blue-dark-3 | #0d2847 | — |
--color-blue-dark-4 | #003362 | — |
--color-blue-dark-5 | #004074 | — |
--color-blue-dark-6 | #104d87 | — |
--color-blue-dark-7 | #205d9e | — |
--color-blue-dark-8 | #2870bd | — |
--color-blue-dark-9 | #0090ff | — |
--color-bronze-1 | #fdfcfc | — |
--color-bronze-10 | #957468 | — |
--color-bronze-11 | #7d5e54 | — |
--color-bronze-12 | #43302b | — |
--color-bronze-2 | #fdf7f5 | — |
--color-bronze-3 | #f6edea | — |
--color-bronze-4 | #efe4df | — |
--color-bronze-5 | #e7d9d3 | — |
--color-bronze-6 | #dfcdc5 | — |
--color-bronze-7 | #d3bcb3 | — |
--color-bronze-8 | #c2a499 | — |
--color-bronze-9 | #a18072 | — |
--color-bronze-dark-1 | #141110 | — |
--color-bronze-dark-10 | #ae8c7e | — |
--color-bronze-dark-11 | #d4b3a5 | — |
--color-bronze-dark-12 | #ede0d9 | — |
--color-bronze-dark-2 | #1c1917 | — |
--color-bronze-dark-3 | #262220 | — |
--color-bronze-dark-4 | #302a27 | — |
--color-bronze-dark-5 | #3b3330 | — |
--color-bronze-dark-6 | #493e3a | — |
--color-bronze-dark-7 | #5a4c47 | — |
--color-bronze-dark-8 | #6f5f58 | — |
--color-bronze-dark-9 | #a18072 | — |
--color-brown-1 | #fefdfc | — |
--color-brown-10 | #a07553 | — |
--color-brown-11 | #815e46 | — |
--color-brown-12 | #3e332e | — |
--color-brown-2 | #fcf9f6 | — |
--color-brown-3 | #f6eee7 | — |
--color-brown-4 | #f0e4d9 | — |
--color-brown-5 | #ebdaca | — |
--color-brown-6 | #e4cdb7 | — |
--color-brown-7 | #dcbc9f | — |
--color-brown-8 | #cea37e | — |
--color-brown-9 | #ad7f58 | — |
--color-brown-dark-1 | #12110f | — |
--color-brown-dark-10 | #b88c67 | — |
--color-brown-dark-11 | #dbb594 | — |
--color-brown-dark-12 | #f2e1ca | — |
--color-brown-dark-2 | #1c1816 | — |
--color-brown-dark-3 | #28211d | — |
--color-brown-dark-4 | #322922 | — |
--color-brown-dark-5 | #3e3128 | — |
--color-brown-dark-6 | #4d3c2f | — |
--color-brown-dark-7 | #614a39 | — |
--color-brown-dark-8 | #7c5f46 | — |
--color-brown-dark-9 | #ad7f58 | — |
--color-copper-2 | #fdf7f5 | — |
--color-copper-3 | #f6edea | — |
--color-copper-4 | #efe4df | — |
--color-copper-5 | #e7d9d3 | — |
--color-copper-6 | #dfcdc5 | — |
--color-copper-7 | #d3bcb3 | — |
--color-copper-8 | #c2a499 | — |
--color-crimson-1 | #fffcfd | — |
--color-crimson-10 | #df3478 | — |
--color-crimson-12 | #621639 | — |
--color-crimson-2 | #fef7f9 | — |
--color-crimson-3 | #ffe9f0 | — |
--color-crimson-4 | #fedce7 | — |
--color-crimson-5 | #facedd | — |
--color-crimson-6 | #f3bed1 | — |
--color-crimson-7 | #eaacc3 | — |
--color-crimson-8 | #e093b2 | — |
--color-crimson-9 | #e93d82 | — |
--color-crimson-dark-1 | #191114 | — |
--color-crimson-dark-10 | #ee518a | — |
--color-crimson-dark-11 | #ff92ad | — |
--color-crimson-dark-12 | #fdd3e8 | — |
--color-crimson-dark-2 | #201318 | — |
--color-crimson-dark-3 | #381525 | — |
--color-crimson-dark-4 | #4d122f | — |
--color-crimson-dark-5 | #5c1839 | — |
--color-crimson-dark-6 | #6d2545 | — |
--color-crimson-dark-7 | #873356 | — |
--color-crimson-dark-8 | #b0436e | — |
--color-crimson-dark-9 | #e93d82 | — |
--color-cyan-1 | #fafdfe | — |
--color-cyan-11 | #107d98 | — |
--color-cyan-12 | #0d3c48 | — |
--color-cyan-2 | #f2fafb | — |
--color-cyan-3 | #def7f9 | — |
--color-cyan-4 | #caf1f6 | — |
--color-cyan-5 | #b5e9f0 | — |
--color-cyan-6 | #9ddde7 | — |
--color-cyan-7 | #7dcedc | — |
--color-cyan-8 | #3db9cf | — |
--color-cyan-9 | #00a2c7 | — |
--color-cyan-dark-1 | #0b161a | — |
--color-cyan-dark-10 | #23afd0 | — |
--color-cyan-dark-11 | #4ccce6 | — |
--color-cyan-dark-12 | #b6ecf7 | — |
--color-cyan-dark-2 | #101b20 | — |
--color-cyan-dark-3 | #082c36 | — |
--color-cyan-dark-4 | #003848 | — |
--color-cyan-dark-5 | #004558 | — |
--color-cyan-dark-6 | #045468 | — |
--color-cyan-dark-7 | #12677e | — |
--color-cyan-dark-8 | #11809c | — |
--color-cyan-dark-9 | #00a2c7 | — |
--color-gold-1 | #fdfdfc | — |
--color-gold-10 | #8c7a5e | — |
--color-gold-11 | #71624b | — |
--color-gold-12 | #3b352b | — |
--color-gold-2 | #faf9f2 | — |
--color-gold-3 | #f2f0e7 | — |
--color-gold-4 | #eae6db | — |
--color-gold-5 | #e1dccf | — |
--color-gold-6 | #d8d0bf | — |
--color-gold-7 | #cbc0aa | — |
--color-gold-8 | #b9a88d | — |
--color-gold-9 | #978365 | — |
--color-gold-dark-1 | #121211 | — |
--color-gold-dark-10 | #a39073 | — |
--color-gold-dark-11 | #cbb99f | — |
--color-gold-dark-12 | #e8e2d9 | — |
--color-gold-dark-2 | #1b1a17 | — |
--color-gold-dark-3 | #24231f | — |
--color-gold-dark-4 | #2d2b26 | — |
--color-gold-dark-5 | #38352e | — |
--color-gold-dark-6 | #444039 | — |
--color-gold-dark-7 | #544f46 | — |
--color-gold-dark-8 | #696256 | — |
--color-gold-dark-9 | #978365 | — |
--color-grass-5 | #c9e8ca | — |
--color-grass-7 | #94ce9a | — |
--color-grass-8 | #65ba74 | — |
--color-grass-dark-1 | #0d1912 | — |
--color-grass-dark-10 | #53b365 | — |
--color-grass-dark-11 | #71d083 | — |
--color-grass-dark-12 | #c2f0c2 | — |
--color-grass-dark-2 | #0f1e13 | — |
--color-grass-dark-3 | #133016 | — |
--color-grass-dark-4 | #1b401b | — |
--color-grass-dark-5 | #245322 | — |
--color-grass-dark-6 | #2d662a | — |
--color-grass-dark-7 | #3b7c36 | — |
--color-grass-dark-8 | #4f9a44 | — |
--color-grass-dark-9 | #46a758 | — |
--color-gray-10 | #838383 | — |
--color-gray-2 | #f9f9f9 | — |
--color-gray-5 | #e0e0e0 | — |
--color-gray-a-1 | rgba(0, 0, 0, 0.01) | — |
--color-gray-a-10 | rgba(0, 0, 0, 0.49) | — |
--color-gray-a-11 | rgba(0, 0, 0, 0.61) | — |
--color-gray-a-12 | rgba(0, 0, 0, 0.87) | — |
--color-gray-a-2 | rgba(0, 0, 0, 0.02) | — |
--color-gray-a-3 | rgba(0, 0, 0, 0.06) | — |
--color-gray-a-4 | rgba(0, 0, 0, 0.09) | — |
--color-gray-a-5 | rgba(0, 0, 0, 0.12) | — |
--color-gray-a-6 | rgba(0, 0, 0, 0.15) | — |
--color-gray-a-7 | rgba(0, 0, 0, 0.19) | — |
--color-gray-a-8 | rgba(0, 0, 0, 0.27) | — |
--color-gray-a-9 | rgba(0, 0, 0, 0.45) | — |
--color-gray-dark-1 | #111111 | — |
--color-gray-dark-10 | #7b7b7b | — |
--color-gray-dark-11 | #b4b4b4 | — |
--color-gray-dark-12 | #ededef | — |
--color-gray-dark-2 | #191919 | — |
--color-gray-dark-3 | #222222 | — |
--color-gray-dark-4 | #2a2a2a | — |
--color-gray-dark-5 | #313131 | — |
--color-gray-dark-6 | #3a3a3a | — |
--color-gray-dark-8 | #606060 | — |
--color-gray-dark-9 | #6e6e6e | — |
--color-green-10 | #2b9a66 | — |
--color-green-4 | #d6f1df | — |
--color-green-5 | #c4e8d1 | — |
--color-green-7 | #8eceaa | — |
--color-green-8 | #5bb98b | — |
--color-green-dark-1 | #0e1512 | — |
--color-green-dark-10 | #33b074 | — |
--color-green-dark-11 | #3dd68c | — |
--color-green-dark-12 | #b1f1cb | — |
--color-green-dark-2 | #121b17 | — |
--color-green-dark-3 | #132d21 | — |
--color-green-dark-4 | #113b29 | — |
--color-green-dark-5 | #174933 | — |
--color-green-dark-6 | #20573e | — |
--color-green-dark-7 | #28684a | — |
--color-green-dark-8 | #2f7c57 | — |
--color-green-dark-9 | #30a46c | — |
--color-indigo-1 | #fdfdfe | — |
--color-indigo-10 | #3358d4 | — |
--color-indigo-11 | #3a5bc7 | — |
--color-indigo-12 | #1f2d5c | — |
--color-indigo-2 | #f7f9ff | — |
--color-indigo-3 | #edf2fe | — |
--color-indigo-4 | #e1e9ff | — |
--color-indigo-5 | #d2deff | — |
--color-indigo-6 | #c1d0ff | — |
--color-indigo-7 | #abbdf9 | — |
--color-indigo-8 | #8da4ef | — |
--color-indigo-dark-1 | #11131f | — |
--color-indigo-dark-10 | #5472e4 | — |
--color-indigo-dark-11 | #9eb1ff | — |
--color-indigo-dark-12 | #d6e1ff | — |
--color-indigo-dark-2 | #141726 | — |
--color-indigo-dark-3 | #182449 | — |
--color-indigo-dark-4 | #1d2e62 | — |
--color-indigo-dark-5 | #253974 | — |
--color-indigo-dark-6 | #304384 | — |
--color-indigo-dark-7 | #3a4f97 | — |
--color-indigo-dark-8 | #435db1 | — |
--color-indigo-dark-9 | #3e63dd | — |
--color-iris-1 | #fdfdff | — |
--color-iris-10 | #5151cd | — |
--color-iris-11 | #5753c6 | — |
--color-iris-12 | #272962 | — |
--color-iris-2 | #f8f8ff | — |
--color-iris-3 | #f0f1fe | — |
--color-iris-4 | #e6e7ff | — |
--color-iris-5 | #dadcff | — |
--color-iris-6 | #cbcdff | — |
--color-iris-7 | #b8baf8 | — |
--color-iris-8 | #9b9ef0 | — |
--color-iris-9 | #5b5bd6 | — |
--color-iris-dark-1 | #13131e | — |
--color-iris-dark-10 | #6e6ade | — |
--color-iris-dark-11 | #b1a9ff | — |
--color-iris-dark-12 | #e0dffe | — |
--color-iris-dark-2 | #171625 | — |
--color-iris-dark-3 | #202248 | — |
--color-iris-dark-4 | #262a65 | — |
--color-iris-dark-5 | #303374 | — |
--color-iris-dark-6 | #3d3e82 | — |
--color-iris-dark-7 | #4a4a95 | — |
--color-iris-dark-8 | #5958b1 | — |
--color-iris-dark-9 | #5b5bd6 | — |
--color-jade-1 | #fbfefd | — |
--color-jade-10 | #26997b | — |
--color-jade-11 | #208368 | — |
--color-jade-12 | #1d3b31 | — |
--color-jade-2 | #f4fbf7 | — |
--color-jade-3 | #e6f7ed | — |
--color-jade-4 | #d6f1e3 | — |
--color-jade-5 | #c3e9d7 | — |
--color-jade-6 | #acdec8 | — |
--color-jade-7 | #8bceb6 | — |
--color-jade-8 | #56ba9f | — |
--color-jade-9 | #29a383 | — |
--color-jade-dark-1 | #0d1512 | — |
--color-jade-dark-10 | #27b08b | — |
--color-jade-dark-11 | #1fd8a4 | — |
--color-jade-dark-12 | #adf0d4 | — |
--color-jade-dark-2 | #121c18 | — |
--color-jade-dark-3 | #0f2e22 | — |
--color-jade-dark-4 | #0b3b2c | — |
--color-jade-dark-5 | #114837 | — |
--color-jade-dark-6 | #1b5745 | — |
--color-jade-dark-7 | #246854 | — |
--color-jade-dark-8 | #2a7e68 | — |
--color-jade-dark-9 | #29a383 | — |
--color-lime-1 | #fcfdfa | — |
--color-lime-10 | #b0e64c | — |
--color-lime-11 | #5c7c2f | — |
--color-lime-12 | #37401c | — |
--color-lime-2 | #f8faf3 | — |
--color-lime-3 | #eef6d6 | — |
--color-lime-4 | #e2f0bd | — |
--color-lime-5 | #d3e7a6 | — |
--color-lime-6 | #c2da91 | — |
--color-lime-7 | #abc978 | — |
--color-lime-8 | #8db654 | — |
--color-lime-9 | #bdee63 | — |
--color-lime-dark-1 | #11130c | — |
--color-lime-dark-10 | #b0e64c | — |
--color-lime-dark-11 | #bde56c | — |
--color-lime-dark-12 | #e3f7ba | — |
--color-lime-dark-2 | #151a10 | — |
--color-lime-dark-3 | #1d2b13 | — |
--color-lime-dark-4 | #263a1a | — |
--color-lime-dark-5 | #2e4b20 | — |
--color-lime-dark-6 | #3a5f29 | — |
--color-lime-dark-7 | #4c7a33 | — |
--color-lime-dark-8 | #64a33f | — |
--color-lime-dark-9 | #bdee63 | — |
--color-mauve-1 | #fdfcfd | — |
--color-mauve-10 | #84828e | — |
--color-mauve-11 | #65636d | — |
--color-mauve-12 | #211f26 | — |
--color-mauve-2 | #faf9fb | — |
--color-mauve-3 | #f2eff3 | — |
--color-mauve-4 | #eae7ec | — |
--color-mauve-5 | #e3dfe6 | — |
--color-mauve-6 | #dbd8e0 | — |
--color-mauve-7 | #d0cdd7 | — |
--color-mauve-8 | #bcbac7 | — |
--color-mauve-9 | #8e8c99 | — |
--color-mauve-dark-1 | #121113 | — |
--color-mauve-dark-10 | #7c7a85 | — |
--color-mauve-dark-11 | #b5b2bc | — |
--color-mauve-dark-12 | #eeeef0 | — |
--color-mauve-dark-2 | #1a191b | — |
--color-mauve-dark-3 | #232225 | — |
--color-mauve-dark-4 | #2b292d | — |
--color-mauve-dark-5 | #323035 | — |
--color-mauve-dark-6 | #3c393f | — |
--color-mauve-dark-7 | #49474e | — |
--color-mauve-dark-8 | #625f69 | — |
--color-mauve-dark-9 | #6f6d78 | — |
--color-mint-1 | #f9fefd | — |
--color-mint-10 | #7de0cb | — |
--color-mint-11 | #027864 | — |
--color-mint-12 | #16433c | — |
--color-mint-2 | #f2fbf9 | — |
--color-mint-3 | #ddf9f2 | — |
--color-mint-4 | #c8f4e9 | — |
--color-mint-5 | #b3ecde | — |
--color-mint-6 | #9ce0d0 | — |
--color-mint-7 | #7ecfbd | — |
--color-mint-8 | #4cbba5 | — |
--color-mint-9 | #86ead4 | — |
--color-mint-dark-1 | #0e1515 | — |
--color-mint-dark-10 | #a8f5e5 | — |
--color-mint-dark-11 | #58d5ba | — |
--color-mint-dark-12 | #c4f5e1 | — |
--color-mint-dark-2 | #0f1b1b | — |
--color-mint-dark-3 | #092c2b | — |
--color-mint-dark-4 | #003a38 | — |
--color-mint-dark-5 | #004744 | — |
--color-mint-dark-6 | #105650 | — |
--color-mint-dark-7 | #1e685f | — |
--color-mint-dark-8 | #277f70 | — |
--color-mint-dark-9 | #86ead4 | — |
--color-olive-1 | #fcfdfc | — |
--color-olive-10 | #7f847d | — |
--color-olive-11 | #60655f | — |
--color-olive-12 | #1d211c | — |
--color-olive-2 | #f8faf8 | — |
--color-olive-3 | #eff1ef | — |
--color-olive-4 | #e7e9e7 | — |
--color-olive-5 | #dfe2df | — |
--color-olive-6 | #d7dad7 | — |
--color-olive-7 | #cccfcc | — |
--color-olive-8 | #b9bcb8 | — |
--color-olive-9 | #898e87 | — |
--color-olive-dark-1 | #111210 | — |
--color-olive-dark-10 | #767d74 | — |
--color-olive-dark-11 | #afb5ad | — |
--color-olive-dark-12 | #eceeec | — |
--color-olive-dark-2 | #181917 | — |
--color-olive-dark-3 | #212220 | — |
--color-olive-dark-4 | #282a27 | — |
--color-olive-dark-5 | #2f312e | — |
--color-olive-dark-6 | #383a36 | — |
--color-olive-dark-7 | #454843 | — |
--color-olive-dark-8 | #5c625b | — |
--color-olive-dark-9 | #687066 | — |
--color-orange-1 | #fefcfb | — |
--color-orange-11 | #cc4e00 | — |
--color-orange-2 | #fff7ed | — |
--color-orange-3 | #ffefd6 | — |
--color-orange-4 | #ffdfb5 | — |
--color-orange-5 | #ffd19a | — |
--color-orange-6 | #ffc182 | — |
--color-orange-7 | #f5ae73 | — |
--color-orange-8 | #ec9455 | — |
--color-orange-dark-1 | #17120e | — |
--color-orange-dark-10 | #ff801f | — |
--color-orange-dark-11 | #ffa057 | — |
--color-orange-dark-12 | #ffe0c2 | — |
--color-orange-dark-2 | #1e160f | — |
--color-orange-dark-3 | #331e0b | — |
--color-orange-dark-4 | #462100 | — |
--color-orange-dark-5 | #562800 | — |
--color-orange-dark-6 | #66350c | — |
--color-orange-dark-7 | #7e451d | — |
--color-orange-dark-8 | #a35829 | — |
--color-orange-dark-9 | #f76b15 | — |
--color-pink-1 | #fffcfe | — |
--color-pink-10 | #cf3897 | — |
--color-pink-11 | #c2298a | — |
--color-pink-12 | #651249 | — |
--color-pink-2 | #fef7fb | — |
--color-pink-3 | #fee9f5 | — |
--color-pink-4 | #fbdcef | — |
--color-pink-5 | #f6cee7 | — |
--color-pink-6 | #efbfdd | — |
--color-pink-7 | #e7acd0 | — |
--color-pink-8 | #dd93c2 | — |
--color-pink-9 | #d6409f | — |
--color-pink-dark-1 | #191117 | — |
--color-pink-dark-10 | #de51a8 | — |
--color-pink-dark-11 | #ff8dcc | — |
--color-pink-dark-12 | #fdd1ea | — |
--color-pink-dark-2 | #21121d | — |
--color-pink-dark-3 | #37172f | — |
--color-pink-dark-4 | #4b143d | — |
--color-pink-dark-5 | #591c47 | — |
--color-pink-dark-6 | #692955 | — |
--color-pink-dark-7 | #833869 | — |
--color-pink-dark-8 | #a84885 | — |
--color-pink-dark-9 | #d6409f | — |
--color-plum-1 | #fefcff | — |
--color-plum-10 | #a144af | — |
--color-plum-11 | #953ea3 | — |
--color-plum-12 | #53195d | — |
--color-plum-2 | #fdf7fd | — |
--color-plum-3 | #fbebfb | — |
--color-plum-4 | #f7def8 | — |
--color-plum-5 | #f2d1f3 | — |
--color-plum-6 | #e9c2ec | — |
--color-plum-7 | #deade3 | — |
--color-plum-8 | #cf91d8 | — |
--color-plum-9 | #ab4aba | — |
--color-plum-dark-1 | #181118 | — |
--color-plum-dark-10 | #b658c4 | — |
--color-plum-dark-11 | #e796f3 | — |
--color-plum-dark-12 | #f4d4f4 | — |
--color-plum-dark-2 | #201320 | — |
--color-plum-dark-3 | #351a35 | — |
--color-plum-dark-4 | #451d47 | — |
--color-plum-dark-5 | #512454 | — |
--color-plum-dark-6 | #5e3061 | — |
--color-plum-dark-7 | #734079 | — |
--color-plum-dark-8 | #92549c | — |
--color-plum-dark-9 | #ab4aba | — |
--color-purple-1 | #fefcfe | — |
--color-purple-10 | #8347b9 | — |
--color-purple-11 | #8145b5 | — |
--color-purple-12 | #402060 | — |
--color-purple-2 | #fbf7fe | — |
--color-purple-3 | #f7edfe | — |
--color-purple-4 | #f2e2fc | — |
--color-purple-5 | #ead5f9 | — |
--color-purple-6 | #e0c4f4 | — |
--color-purple-7 | #d1afec | — |
--color-purple-8 | #be93e4 | — |
--color-purple-9 | #8e4ec6 | — |
--color-purple-dark-1 | #18111b | — |
--color-purple-dark-10 | #9a5cd0 | — |
--color-purple-dark-11 | #d19dff | — |
--color-purple-dark-12 | #ecd9fa | — |
--color-purple-dark-2 | #1e1523 | — |
--color-purple-dark-3 | #301c3b | — |
--color-purple-dark-4 | #3d224e | — |
--color-purple-dark-5 | #48295c | — |
--color-purple-dark-6 | #54346b | — |
--color-purple-dark-7 | #664282 | — |
--color-purple-dark-8 | #8457aa | — |
--color-purple-dark-9 | #8e4ec6 | — |
--color-red-10 | #dc3e42 | — |
--color-red-4 | #ffdbdc | — |
--color-red-5 | #ffcdce | — |
--color-red-8 | #eb8e90 | — |
--color-red-dark-1 | #191111 | — |
--color-red-dark-10 | #ec5d5e | — |
--color-red-dark-11 | #ff9592 | — |
--color-red-dark-12 | #ffd1d9 | — |
--color-red-dark-2 | #201314 | — |
--color-red-dark-3 | #3b1219 | — |
--color-red-dark-4 | #500f1c | — |
--color-red-dark-5 | #611623 | — |
--color-red-dark-6 | #72232d | — |
--color-red-dark-7 | #8c333a | — |
--color-red-dark-8 | #b54548 | — |
--color-red-dark-9 | #e5484d | — |
--color-ruby-1 | #fffcfd | — |
--color-ruby-10 | #dc3b5d | — |
--color-ruby-11 | #ca244d | — |
--color-ruby-12 | #64172b | — |
--color-ruby-2 | #fff7f8 | — |
--color-ruby-3 | #feeaed | — |
--color-ruby-4 | #ffdce1 | — |
--color-ruby-5 | #ffced6 | — |
--color-ruby-6 | #f8bfc8 | — |
--color-ruby-7 | #efacb8 | — |
--color-ruby-8 | #e592a3 | — |
--color-ruby-9 | #e54666 | — |
--color-ruby-dark-1 | #191113 | — |
--color-ruby-dark-10 | #ec5a72 | — |
--color-ruby-dark-11 | #ff949d | — |
--color-ruby-dark-12 | #fed2e1 | — |
--color-ruby-dark-2 | #1e1517 | — |
--color-ruby-dark-3 | #3a141e | — |
--color-ruby-dark-4 | #4e1325 | — |
--color-ruby-dark-5 | #5e1a2e | — |
--color-ruby-dark-6 | #6f2539 | — |
--color-ruby-dark-7 | #883447 | — |
--color-ruby-dark-8 | #b3445a | — |
--color-ruby-dark-9 | #e54666 | — |
--color-sage-1 | #fbfdfc | — |
--color-sage-10 | #7c8481 | — |
--color-sage-11 | #5f6563 | — |
--color-sage-12 | #1a211e | — |
--color-sage-2 | #f7f9f8 | — |
--color-sage-3 | #eef1f0 | — |
--color-sage-4 | #e6e9e8 | — |
--color-sage-5 | #dfe2e0 | — |
--color-sage-6 | #d7dad9 | — |
--color-sage-7 | #cbcfcd | — |
--color-sage-8 | #b8bcba | — |
--color-sage-9 | #868e8b | — |
--color-sage-dark-1 | #101211 | — |
--color-sage-dark-10 | #717d79 | — |
--color-sage-dark-11 | #adb5b2 | — |
--color-sage-dark-12 | #eceeed | — |
--color-sage-dark-2 | #171918 | — |
--color-sage-dark-3 | #202221 | — |
--color-sage-dark-4 | #272a29 | — |
--color-sage-dark-5 | #2e3130 | — |
--color-sage-dark-6 | #373b39 | — |
--color-sage-dark-7 | #444947 | — |
--color-sage-dark-8 | #5b625f | — |
--color-sage-dark-9 | #63706b | — |
--color-sand-1 | #fdfdfc | — |
--color-sand-10 | #82827c | — |
--color-sand-11 | #63635e | — |
--color-sand-12 | #21201c | — |
--color-sand-2 | #f9f9f8 | — |
--color-sand-3 | #f1f0ef | — |
--color-sand-4 | #e9e8e6 | — |
--color-sand-5 | #e2e1de | — |
--color-sand-6 | #dad9d6 | — |
--color-sand-7 | #cfceca | — |
--color-sand-8 | #bcbbb5 | — |
--color-sand-9 | #8d8d86 | — |
--color-sand-dark-1 | #111110 | — |
--color-sand-dark-10 | #7c7b74 | — |
--color-sand-dark-11 | #b5b3ad | — |
--color-sand-dark-12 | #eeeeec | — |
--color-sand-dark-2 | #191918 | — |
--color-sand-dark-3 | #222221 | — |
--color-sand-dark-4 | #2a2a28 | — |
--color-sand-dark-5 | #31312e | — |
--color-sand-dark-6 | #3b3a37 | — |
--color-sand-dark-7 | #494844 | — |
--color-sand-dark-8 | #62605b | — |
--color-sand-dark-9 | #6f6d66 | — |
--color-sky-1 | #f9feff | — |
--color-sky-10 | #74daf8 | — |
--color-sky-11 | #00749e | — |
--color-sky-12 | #1d3e56 | — |
--color-sky-2 | #f1fafd | — |
--color-sky-3 | #e1f6fd | — |
--color-sky-4 | #d1f0fa | — |
--color-sky-5 | #bee7f5 | — |
--color-sky-6 | #a9daed | — |
--color-sky-7 | #8dcae3 | — |
--color-sky-8 | #60b3d7 | — |
--color-sky-9 | #7ce2fe | — |
--color-sky-dark-1 | #0d141f | — |
--color-sky-dark-10 | #a8eeff | — |
--color-sky-dark-11 | #75c7f0 | — |
--color-sky-dark-12 | #c2f3ff | — |
--color-sky-dark-2 | #111a27 | — |
--color-sky-dark-3 | #112840 | — |
--color-sky-dark-4 | #113555 | — |
--color-sky-dark-5 | #154467 | — |
--color-sky-dark-6 | #1b537b | — |
--color-sky-dark-7 | #1f6692 | — |
--color-sky-dark-8 | #197cae | — |
--color-sky-dark-9 | #7ce2fe | — |
--color-slate-1 | #fcfcfd | — |
--color-slate-10 | #80838d | — |
--color-slate-11 | #60646c | — |
--color-slate-12 | #1c2024 | — |
--color-slate-2 | #f9f9fb | — |
--color-slate-3 | #f0f0f3 | — |
--color-slate-4 | #e8e8ec | — |
--color-slate-5 | #e0e1e6 | — |
--color-slate-6 | #d9d9e0 | — |
--color-slate-7 | #cdced6 | — |
--color-slate-8 | #b9bbc6 | — |
--color-slate-9 | #8b8d98 | — |
--color-slate-dark-1 | #111113 | — |
--color-slate-dark-10 | #777b84 | — |
--color-slate-dark-11 | #b0b4ba | — |
--color-slate-dark-12 | #edeef0 | — |
--color-slate-dark-2 | #18191b | — |
--color-slate-dark-3 | #212225 | — |
--color-slate-dark-4 | #272a2d | — |
--color-slate-dark-5 | #2e3135 | — |
--color-slate-dark-6 | #363a3f | — |
--color-slate-dark-7 | #43484e | — |
--color-slate-dark-8 | #5a6169 | — |
--color-slate-dark-9 | #696e77 | — |
--color-teal-1 | #fafefd | — |
--color-teal-11 | #008573 | — |
--color-teal-12 | #0d3d38 | — |
--color-teal-2 | #f3fbf9 | — |
--color-teal-3 | #e0f8f3 | — |
--color-teal-4 | #ccf3ea | — |
--color-teal-5 | #b8eae0 | — |
--color-teal-6 | #a1ded2 | — |
--color-teal-7 | #83cdc1 | — |
--color-teal-8 | #53b9ab | — |
--color-teal-9 | #12a594 | — |
--color-teal-dark-1 | #0d1514 | — |
--color-teal-dark-10 | #0eb39e | — |
--color-teal-dark-11 | #0bd8b6 | — |
--color-teal-dark-12 | #adf0dd | — |
--color-teal-dark-2 | #111c1b | — |
--color-teal-dark-3 | #0d2d2a | — |
--color-teal-dark-4 | #023b37 | — |
--color-teal-dark-5 | #084843 | — |
--color-teal-dark-6 | #145750 | — |
--color-teal-dark-7 | #1c6961 | — |
--color-teal-dark-8 | #207e73 | — |
--color-teal-dark-9 | #12a594 | — |
--color-tomato-1 | #fffcfc | — |
--color-tomato-10 | #dd4425 | — |
--color-tomato-11 | #d13415 | — |
--color-tomato-12 | #5c271f | — |
--color-tomato-2 | #fff8f7 | — |
--color-tomato-3 | #feebe7 | — |
--color-tomato-4 | #ffdcd3 | — |
--color-tomato-5 | #ffcdc2 | — |
--color-tomato-6 | #fdbdaf | — |
--color-tomato-7 | #f5a898 | — |
--color-tomato-8 | #ec8e7b | — |
--color-tomato-9 | #e54d2e | — |
--color-tomato-dark-1 | #181111 | — |
--color-tomato-dark-10 | #ec6142 | — |
--color-tomato-dark-11 | #ff977d | — |
--color-tomato-dark-12 | #fbd3cb | — |
--color-tomato-dark-2 | #1f1513 | — |
--color-tomato-dark-3 | #391714 | — |
--color-tomato-dark-4 | #4e1511 | — |
--color-tomato-dark-5 | #5e1c16 | — |
--color-tomato-dark-6 | #6e2920 | — |
--color-tomato-dark-7 | #853a2d | — |
--color-tomato-dark-8 | #ac4d39 | — |
--color-tomato-dark-9 | #e54d2e | — |
--color-violet-1 | #fdfcfe | — |
--color-violet-10 | #654dc4 | — |
--color-violet-12 | #2f265f | — |
--color-violet-2 | #faf8ff | — |
--color-violet-3 | #f4f0fe | — |
--color-violet-4 | #ebe4ff | — |
--color-violet-5 | #e1d9ff | — |
--color-violet-6 | #d4cafe | — |
--color-violet-7 | #c2b5f5 | — |
--color-violet-8 | #aa99ec | — |
--color-violet-9 | #6e56cf | — |
--color-violet-dark-1 | #14121f | — |
--color-violet-dark-10 | #7d66d9 | — |
--color-violet-dark-11 | #baa7ff | — |
--color-violet-dark-12 | #e2ddfe | — |
--color-violet-dark-2 | #1b1525 | — |
--color-violet-dark-3 | #291f43 | — |
--color-violet-dark-4 | #33255b | — |
--color-violet-dark-5 | #3c2e69 | — |
--color-violet-dark-6 | #473876 | — |
--color-violet-dark-7 | #56468b | — |
--color-violet-dark-8 | #6958ad | — |
--color-violet-dark-9 | #6e56cf | — |
--color-white-a-1 | rgba(255, 255, 255, 0.05) | — |
--color-white-a-11 | rgba(255, 255, 255, 0.9) | — |
--color-white-a-12 | rgba(255, 255, 255, 0.95) | — |
--color-white-a-2 | rgba(255, 255, 255, 0.1) | — |
--color-white-a-3 | rgba(255, 255, 255, 0.15) | — |
--color-white-a-4 | rgba(255, 255, 255, 0.2) | — |
--color-white-a-5 | rgba(255, 255, 255, 0.3) | — |
--color-white-a-6 | rgba(255, 255, 255, 0.4) | — |
--color-white-a-7 | rgba(255, 255, 255, 0.5) | — |
--color-white-a-8 | rgba(255, 255, 255, 0.6) | — |
--color-white-a-9 | rgba(255, 255, 255, 0.7) | — |
--color-yellow-4 | #ffee9c | — |
--color-yellow-5 | #fbe577 | — |
--color-yellow-7 | #e9c162 | — |
--color-yellow-8 | #e2a336 | — |
--color-yellow-dark-1 | #16120a | — |
--color-yellow-dark-10 | #ffd60a | — |
--color-yellow-dark-11 | #f1a10d | — |
--color-yellow-dark-12 | #ffe7b3 | — |
--color-yellow-dark-2 | #1d180f | — |
--color-yellow-dark-3 | #302008 | — |
--color-yellow-dark-4 | #3f2700 | — |
--color-yellow-dark-5 | #4d3000 | — |
--color-yellow-dark-6 | #5c3d05 | — |
--color-yellow-dark-7 | #714f19 | — |
--color-yellow-dark-8 | #8f6424 | — |
--color-yellow-dark-9 | #ffc53d | — |
--duration-100 | 100ms | — |
--duration-1000 | 1000ms | — |
--duration-500 | 500ms | — |
--duration-75 | 75ms | — |
--font-size-1000 | clamp(3rem, 2.6rem + 2vw, 4rem) | — |
--font-size-900 | clamp(2.5rem, 2.15rem + 1.75vw, 3.375rem) | — |
--font-style-normal | normal | — |
--font-weight-100 | 100 | — |
--font-weight-200 | 200 | — |
--font-weight-400 | 400 | — |
--font-weight-600 | 600 | — |
--font-weight-700 | 700 | — |
--font-weight-800 | 800 | — |
--font-weight-900 | 900 | — |
--letter-spacing-normal | 0 | — |
--radius-500 | 1rem | — |
--spacing-1000 | 15rem | — |
--spacing-650 | 2.5rem | — |
--spacing-950 | 7.5rem | — |
--text-transform-capitalize | capitalize | — |
--text-transform-lowercase | lowercase | — |
--text-transform-none | none | — |
Tier 3 · Component
Tier 3 — the per-component theming surface, authored in packages/tokens/src/component-tokens.css. A spoke overrides these to diverge ONE component from the semantic default.
alert1
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--alert-box-text-color | --color-content-default-secondary→--color-gray-11→#646464 | #646464 | 1 compComponents:esa-alert-box |
app1
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--app-shell-brand-bg-hover | color-mix(in srgb, currentColor 8%, transparent) | color-mix(in srgb, currentColor 8%, transparent) | 1 compComponents:esa-app-shell |
avatar9
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--avatar-bg | hsl(var(--_avatar-hue, 200) 45% 65%) | hsl(var(--_avatar-hue, 200) 45% 65%) | 1 compComponents:esa-avatar |
--avatar-font-size-lg | --typography-title-font-size→--font-size-400→clamp(1rem, 0.88rem + 0.6vw, 1.25rem) | clamp(1rem, 0.88rem + 0.6vw, 1.25rem) | 1 compComponents:esa-avatar |
--avatar-font-size-md | --typography-label-md-strong-font-size→--font-size-200→clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | 1 compComponents:esa-avatar |
--avatar-font-size-sm | --typography-label-xs-strong-font-size→--font-size-100→clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | 1 compComponents:esa-avatar |
--avatar-font-size-xs | --typography-label-2xs-strong-font-size→--font-size-050→clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | 1 compComponents:esa-avatar |
--avatar-size-lg | 56px | 56px | 1 compComponents:esa-avatar |
--avatar-size-md | 40px | 40px | 1 compComponents:esa-avatar |
--avatar-size-sm | 28px | 28px | 1 compComponents:esa-avatar |
--avatar-size-xs | 20px | 20px | 1 compComponents:esa-avatar |
back1
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--back-to-top-size | 44px | 44px | 1 compComponents:esa-back-to-top |
badge3
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--badge-bg | --color-background-elevation-raised→--color-gray-1→#fcfcfc | #fcfcfc | 1 compComponents:esa-badge |
--badge-border-color | --color-border-default→--color-gray-7→#cecece | #cecece | 1 compComponents:esa-badge |
--badge-text-color | --color-content-default-secondary→--color-gray-11→#646464 | #646464 | 1 compComponents:esa-badge |
breadcrumbs3
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--breadcrumbs-bg | transparent | transparent | 1 compComponents:esa-breadcrumbs |
--breadcrumbs-link-color | --color-content-default-secondary→--color-gray-11→#646464 | #646464 | 1 compComponents:esa-breadcrumbs |
--breadcrumbs-link-hover | --color-content-default→--color-gray-12→#202020 | #202020 | 1 compComponents:esa-breadcrumbs |
button6
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--button-chrome-bg-hover | color-mix(in srgb, currentColor 14%, transparent) | color-mix(in srgb, currentColor 14%, transparent) | 1 compComponents:esa-button |
--button-on-warning | --color-content-on-utility-warning→--color-yellow-12→#4f3422 | #4f3422 | 1 compComponents:esa-button |
--button-radius-lg | --radius-md→--radius-200→0.5rem | 0.5rem | 1 compComponents:esa-button |
--button-radius-md | --radius-md→--radius-200→0.5rem | 0.5rem | 2 compComponents:esa-button, esa-button-group |
--button-radius-sm | --radius-sm→--radius-100→0.25rem | 0.25rem | 1 compComponents:esa-button |
--button-radius-xs | --radius-sm→--radius-100→0.25rem | 0.25rem | 1 compComponents:esa-button |
card3
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--card-bg | --color-background-elevation-raised→--color-gray-1→#fcfcfc | #fcfcfc | 1 compComponents:esa-card |
--card-border-color | --color-border-default→--color-gray-7→#cecece | #cecece | 1 compComponents:esa-card |
--card-header-bg | transparent | transparent | 1 compComponents:esa-card |
command2
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--command-palette-max-height | 440px | 440px | 1 compComponents:esa-command-palette |
--command-palette-width | 560px | 560px | 1 compComponents:esa-command-palette |
confirm1
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--confirm-dialog-width | 360px | 360px | 1 compComponents:esa-confirm-dialog |
dialog4
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--dialog-width | 480px | 480px | 1 compComponents:esa-dialog |
--dialog-width-lg | 640px | 640px | 1 compComponents:esa-dialog |
--dialog-width-sm | 360px | 360px | 1 compComponents:esa-dialog |
--dialog-width-xs | 280px | 280px | 1 compComponents:esa-dialog |
dropdown2
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--dropdown-menu-max-width | 280px | 280px | 1 compComponents:esa-dropdown-menu |
--dropdown-menu-min-width | 160px | 160px | 1 compComponents:esa-dropdown-menu |
empty4
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--empty-state-icon-size-lg | 64px | 64px | 1 compComponents:esa-empty-state |
--empty-state-icon-size-md | 48px | 48px | 1 compComponents:esa-empty-state |
--empty-state-icon-size-sm | 32px | 32px | 1 compComponents:esa-empty-state |
--empty-state-icon-size-xs | 24px | 24px | 1 compComponents:esa-empty-state |
entity2
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--entity-search-max-height | 78vh | 78vh | 1 compComponents:esa-entity-search |
--entity-search-width | 720px | 720px | 1 compComponents:esa-entity-search |
file2
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--file-list-row-padding-x | --spacing-300→0.75rem | 0.75rem | 1 compComponents:esa-file-list |
--file-list-row-padding-y | 2px | 2px | 1 compComponents:esa-file-list |
filter2
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--filter-container-padding | 0 | 0 | 1 compComponents:esa-filter-container |
--filter-dropdown-min-width | 200px | 200px | 1 compComponents:esa-filter-dropdown |
focus3
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--focus-ring-color | --color-border-default-focus→--color-grass-10→#3e9b4f | #3e9b4f | 35 comp1 fileComponents:esa-alert-box, esa-app-shell, esa-back-to-top, esa-button, esa-button-toggle, esa-checkbox, esa-checkbox-group, esa-chip-group, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-date-picker, esa-dialog, esa-dropdown-menu, esa-entity-search, esa-error-summary, esa-file-list, esa-file-upload, esa-filter-clear-button, esa-filter-dropdown, esa-filter-pills, esa-header-nav, esa-input-tag, esa-pagination, esa-pill, esa-radio-group, esa-range-slider, esa-search-panel, esa-select, esa-sidebar-nav, esa-switch-toggle, esa-tab-layout, esa-text-field, esa-textarea Files:packages/tokens/src/focus.css |
--focus-ring-offset | 2px | 2px | 32 comp1 fileComponents:esa-alert-box, esa-app-shell, esa-back-to-top, esa-button, esa-button-toggle, esa-checkbox, esa-checkbox-group, esa-chip-group, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-date-picker, esa-dialog, esa-entity-search, esa-error-summary, esa-file-upload, esa-filter-clear-button, esa-filter-dropdown, esa-header-nav, esa-input-tag, esa-pagination, esa-pill, esa-radio-group, esa-range-slider, esa-search-panel, esa-select, esa-sidebar-nav, esa-snackbar-item, esa-switch-toggle, esa-text-field, esa-textarea Files:packages/tokens/src/focus.css |
--focus-ring-width | --border-width-focus→--border-width-200→2px | 2px | 36 comp1 fileComponents:esa-alert-box, esa-app-shell, esa-back-to-top, esa-button, esa-button-toggle, esa-checkbox, esa-checkbox-group, esa-chip-group, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-date-picker, esa-dialog, esa-dropdown-menu, esa-entity-search, esa-error-summary, esa-file-list, esa-file-upload, esa-filter-clear-button, esa-filter-dropdown, esa-filter-pills, esa-header-nav, esa-input-tag, esa-pagination, esa-pill, esa-radio-group, esa-range-slider, esa-search-panel, esa-select, esa-sidebar-nav, esa-snackbar-item, esa-switch-toggle, esa-tab-layout, esa-text-field, esa-textarea Files:packages/tokens/src/focus.css |
form15
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--form-affix-bg | --color-background-elevation-sunken→--color-gray-3→#f0f0f0 | #f0f0f0 | 1 compComponents:esa-text-field |
--form-affix-border-color | --form-border-color→--color-border-default→--color-gray-7→#cecece | #cecece | 1 compComponents:esa-text-field |
--form-affix-color | --color-content-default-secondary→--color-gray-11→#646464 | #646464 | 1 compComponents:esa-text-field |
--form-border-color | --color-border-default→--color-gray-7→#cecece | #cecece | 1 tok12 compTokens:--form-affix-border-color Components:esa-button-toggle, esa-checkbox, esa-checkbox-group, esa-color-picker, esa-combobox, esa-date-picker, esa-file-upload, esa-input-tag, esa-radio-group, esa-select, esa-text-field, esa-textarea |
--form-border-color-focus | --color-border-default-focus→--color-grass-10→#3e9b4f | #3e9b4f | 12 compComponents:esa-checkbox, esa-checkbox-group, esa-color-picker, esa-combobox, esa-date-picker, esa-file-upload, esa-filter-dropdown, esa-input-tag, esa-radio-group, esa-select, esa-text-field, esa-textarea |
--form-border-color-hover | --color-border-default-strong→--color-gray-8→#bbbbbb | #bbbbbb | 4 compComponents:esa-input-tag, esa-select, esa-text-field, esa-textarea |
--form-border-width | --border-width-default→--border-width-100→1px | 1px | 11 compComponents:esa-button-toggle, esa-checkbox, esa-checkbox-group, esa-color-picker, esa-combobox, esa-date-picker, esa-input-tag, esa-radio-group, esa-select, esa-text-field, esa-textarea |
--form-error-border-color | --color-background-utility-danger→--color-red-11→#ce2c31 | #ce2c31 | 10 compComponents:esa-button-toggle, esa-checkbox-group, esa-combobox, esa-date-picker, esa-form-field, esa-input-tag, esa-radio-group, esa-select, esa-text-field, esa-textarea |
--form-error-color | --color-content-utility-danger→--color-red-11→#ce2c31 | #ce2c31 | 10 compComponents:esa-button-toggle, esa-checkbox-group, esa-combobox, esa-date-picker, esa-form-field, esa-input-tag, esa-radio-group, esa-select, esa-text-field, esa-textarea |
--form-help-color | --color-content-default-secondary→--color-gray-11→#646464 | #646464 | 10 compComponents:esa-button-toggle, esa-checkbox-group, esa-combobox, esa-date-picker, esa-form-field, esa-input-tag, esa-radio-group, esa-select, esa-text-field, esa-textarea |
--form-help-gap | --spacing-100→0.25rem | 0.25rem | 6 compComponents:esa-checkbox-group, esa-field-error, esa-form-field, esa-radio-group, esa-text-field, esa-textarea |
--form-label-color | --color-content-default-secondary→--color-gray-11→#646464 | #646464 | 8 compComponents:esa-button-toggle, esa-combobox, esa-date-picker, esa-form-field, esa-input-tag, esa-select, esa-text-field, esa-textarea |
--form-label-gap | --spacing-100→0.25rem | 0.25rem | 3 compComponents:esa-form-field, esa-text-field, esa-textarea |
--form-placeholder-color | --color-content-default-secondary→--color-gray-11→#646464 | #646464 | 5 compComponents:esa-combobox, esa-input-tag, esa-select, esa-text-field, esa-textarea |
--form-text-color | --color-content-default→--color-gray-12→#202020 | #202020 | 7 compComponents:esa-color-picker, esa-combobox, esa-date-picker, esa-input-tag, esa-select, esa-text-field, esa-textarea |
grid24
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--grid-bg | --color-background-elevation-raised→--color-gray-1→#fcfcfc | #fcfcfc | orphan |
--grid-border-color | --color-border-default→--color-gray-7→#cecece | #cecece | orphan |
--grid-cell-padding-x | --spacing-300→0.75rem | 0.75rem | orphan |
--grid-cell-padding-y | --spacing-200→0.5rem | 0.5rem | orphan |
--grid-font-family | --typography-font-family-sans→--font-family-dm-sans→'DM Sans', sans-serif | 'DM Sans', sans-serif | orphan |
--grid-font-size | --typography-label-md-font-size→--font-size-200→clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | orphan |
--grid-header-bg | --color-background-default→--color-gray-1→#fcfcfc | #fcfcfc | orphan |
--grid-header-border-color | --color-border-default→--color-gray-7→#cecece | #cecece | orphan |
--grid-header-color | --color-content-default→--color-gray-12→#202020 | #202020 | orphan |
--grid-header-font-size | --typography-label-xs-font-size→--font-size-100→clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | orphan |
--grid-header-weight | --typography-font-weight-semibold→--font-weight-550→550 | 550 | orphan |
--grid-pagination-bg | --color-background-elevation-raised→--color-gray-1→#fcfcfc | #fcfcfc | orphan |
--grid-pagination-border-color | --color-border-default→--color-gray-7→#cecece | #cecece | orphan |
--grid-radius | --radius-md→--radius-200→0.5rem | 0.5rem | orphan |
--grid-row-bg | --color-background-elevation-raised→--color-gray-1→#fcfcfc | #fcfcfc | orphan |
--grid-row-bg-hover | --color-background-elevation-sunken→--color-gray-3→#f0f0f0 | #f0f0f0 | orphan |
--grid-row-bg-selected | --color-background-brand→--color-grass-9→#46a758 | color-mix(in srgb, #46a758 6%, transparent) | orphan |
--grid-row-border-color | --color-border-default-subtle→--color-gray-6→#d9d9d9 | #d9d9d9 | orphan |
--grid-row-font-size | --font-size-150→clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | orphan |
--grid-row-stripe-bg | --color-background-default→--color-gray-1→#fcfcfc | #fcfcfc | orphan |
--grid-shadow | --elevation-3→--shadow-offset-x→0 | 0 | orphan |
--grid-toolbar-bg | --color-background-elevation-raised→--color-gray-1→#fcfcfc | #fcfcfc | orphan |
--grid-toolbar-gap | --spacing-200→0.5rem | 0.5rem | orphan |
--grid-toolbar-padding | --spacing-200→0.5rem | 0.5rem 0.75rem | orphan |
header1
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--header-nav-avatar-size | 32px | 32px | 1 compComponents:esa-header-nav |
link1
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--link-column-rule-color | color-mix(in srgb, currentColor 40%, transparent) | color-mix(in srgb, currentColor 40%, transparent) | 1 compComponents:esa-link-column |
loading2
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--loading-spinner-color | --color-background-brand→--color-grass-9→#46a758 | #46a758 | 2 compComponents:esa-loading-overlay, esa-loading-spinner |
--loading-spinner-track-color | --color-border-default-subtle→--color-gray-6→#d9d9d9 | #d9d9d9 | 2 compComponents:esa-loading-overlay, esa-loading-spinner |
nav1
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--nav-dropdown-panel-min-width | 240px | 240px | 1 compComponents:esa-nav-dropdown |
popover1
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--popover-max-width | none | none | 1 compComponents:esa-popover |
progress4
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--progress-bar-height-lg | 12px | 12px | 1 compComponents:esa-progress-bar |
--progress-bar-height-md | 8px | 8px | 1 compComponents:esa-progress-bar |
--progress-bar-height-sm | 4px | 4px | 1 compComponents:esa-progress-bar |
--progress-bar-height-xs | 2px | 2px | 1 compComponents:esa-progress-bar |
search1
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--search-panel-width | 400px | 400px | 1 compComponents:esa-search-panel |
side5
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--side-dialog-backdrop-filter | none | none | 1 compComponents:esa-side-dialog |
--side-dialog-inset | 16px | 16px | 1 compComponents:esa-side-dialog |
--side-dialog-width | 400px | 400px | 1 compComponents:esa-side-dialog |
--side-dialog-width-lg | 520px | 520px | 1 compComponents:esa-side-dialog |
--side-dialog-width-sm | 320px | 320px | 1 compComponents:esa-side-dialog |
sidenav10
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--sidenav-active-border-width | 0 | 0 | 1 compComponents:esa-sidebar-nav |
--sidenav-icon-size | 18px | 18px | 1 compComponents:esa-sidebar-nav |
--sidenav-icon-size-collapsed | 18px | 18px | 1 compComponents:esa-sidebar-nav |
--sidenav-item-gap | 0 | 0 | 1 compComponents:esa-sidebar-nav |
--sidenav-item-height | 40px | 40px | 1 compComponents:esa-sidebar-nav |
--sidenav-link-bg | transparent | transparent | 1 compComponents:esa-sidebar-nav |
--sidenav-nested-gap | 0 | 0 | 1 compComponents:esa-sidebar-nav |
--sidenav-section-margin-top | 0 | 0 | 1 compComponents:esa-sidebar-nav |
--sidenav-width | 280px | 280px | 1 compComponents:esa-sidebar-nav |
--sidenav-width-collapsed | 72px | 72px | 1 compComponents:esa-sidebar-nav |
snackbar1
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--snackbar-container-max-width | 420px | 420px | 1 compComponents:esa-snackbar-container |
stat3
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--stat-accent-color | --color-content-brand→--color-grass-11→#2a7e3b | #2a7e3b | 1 compComponents:esa-stat |
--stat-value-color | --color-content-default→--color-gray-12→#202020 | #202020 | 1 compComponents:esa-stat |
--stat-value-size | --font-size-700→clamp(1.625rem, 1.41rem + 1.08vw, 2.25rem) | clamp(1.625rem, 1.41rem + 1.08vw, 2.25rem) | 1 compComponents:esa-stat |
tab4
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--tab-layout-height-lg | 52px | 52px | 1 compComponents:esa-tab-layout |
--tab-layout-height-md | 44px | 44px | 1 compComponents:esa-tab-layout |
--tab-layout-height-sm | 36px | 36px | 1 compComponents:esa-tab-layout |
--tab-layout-height-xs | 30px | 30px | 1 compComponents:esa-tab-layout |
tooltip1
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--tooltip-max-width | 240px | 240px | 1 compComponents:esa-tooltip |
Tier 2 · Semantic
Tier 2 — intent, compiled from tokens/semantic/*.json. This is where a spoke’s brand lives: re-point a role and every component reading it re-skins.
Grouped by category first — the word each name leads with — then, inside
colour, by the property it lands on. This tree used to open on
background/content/border with every non-colour family
listed after them, which made one category’s properties peers of whole categories and
left color with no heading at all. The rubric’s slot 3 above already asks
which categories exist; this is the same question answered as a tree.
Category here is the NAMESPACE, not the rubric’s taxonomy: the rubric files border
colours and border widths together under border, which is true but cannot be a
tree — --color-border-utility-danger would need to be in two places. One token,
one node. 378 of 378 tier-2 tokens are
filed below.
color 96
Every `--color-*` role. Nested by the PROPERTY the colour lands on — background, content, border — then by variant family, because a colour role is only meaningful as a pair of the two: `danger` alone does not say whether it fills a box or writes a word. This is the one category where the property level earns its own tier of nesting; the rest name their property and stop.
Colour tokens map tier 1 to specific colour roles in the default (vanilla) theme, grouped here by property — the surface the colour lands on — then by variant family within each. All 96 spell their property in the name, so the grouping below is read off the names rather than inferred from convention. This was the point of the property-first rename: nothing here is placed by knowing where it goes.
background 64
Fills and surfaces. Still the largest property, and it used to be the worst named — every bare intent token (--color-primary, --color-danger, and every -subtle) was a background whose name never said so. All of them now lead with `background`.
Spelled in the name as background 64 declared · 0 inferred.
default 4
The tokens say this word now. Ten of them were named without it — --color-background, --color-border, --color-content-primary, --color-border-subtle and the
rest — until 2026-08-15, relying on a convention of intention-by-omission
that only reads if you already know it. See bare-property-to-default and missing-intention-to-default in migrations.json. Everything here is the DEFAULT intention: the token
itself, its prominence variants and its states.
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-background-default | default | — | — | — | --color-gray-1 · #fcfcfc | 2 tok 1 comp 1 fileTokens: --grid-header-bg, --grid-row-stripe-bg Components: esa-app-shell Files: packages/docs/src/DocsShell.astro |
--color-background-default-hover | default | — | — | hover | --color-gray-4 · #e8e8e8 | orphan |
--color-background-default-knockout | default | — | knockout | — | --color-gray-12 · #202020 | 4 compComponents: esa-app-bar, esa-popover, esa-snackbar-item, esa-tooltip |
--color-background-default-knockout-hover | default | — | knockout | hover | --color-gray-11 · #646464 | orphan |
elevation 3
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-background-elevation-floating | elevation | floating | — | — | --color-gray-1 · #fcfcfc | 6 compComponents: esa-command-palette, esa-confirm-dialog, esa-dialog, esa-dropdown-menu, esa-entity-search, esa-search-panel |
--color-background-elevation-raised | elevation | raised | — | — | --color-gray-1 · #fcfcfc | 6 tok 25 comp 6 fileTokens: --badge-bg, --card-bg, --grid-bg, --grid-pagination-bg, --grid-row-bg, --grid-toolbar-bg Components: esa-app-bar, esa-app-shell, esa-badge, esa-button, esa-button-toggle, esa-card, esa-chart, esa-chip-group, esa-collapsible, esa-combobox, esa-entity-search, esa-file-list, esa-filter-dropdown, esa-header-nav, esa-input-tag, esa-kbd, esa-loading-overlay, esa-nav-dropdown, esa-pagination, esa-popover, esa-range-slider, esa-select, esa-side-dialog, esa-switch-toggle, esa-tab-layout Files: packages/docs/src/DocsShell.astro, packages/docs/src/Preview.astro, packages/spoke-template/src/layouts/BaseLayout.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro, packages/spoke-template/src/pages/patterns/index.astro |
--color-background-elevation-sunken | elevation | sunken | — | — | --color-gray-3 · #f0f0f0 | 2 tok 24 comp 8 fileTokens: --form-affix-bg, --grid-row-bg-hover Components: esa-app-shell, esa-button, esa-button-toggle, esa-card, esa-chip-group, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-dialog, esa-dropdown-menu, esa-entity-search, esa-file-list, esa-file-upload, esa-filter-dropdown, esa-header-nav, esa-input-tag, esa-pill, esa-progress-bar, esa-search-panel, esa-select, esa-side-dialog, esa-sidebar-nav, esa-tab-layout, esa-text-field Files: packages/docs/src/ApiTable.astro, packages/docs/src/DocsShell.astro, packages/docs/src/Preview.astro, packages/docs/src/PropsTable.astro, packages/docs/src/RadiusFoundation.astro, packages/docs/src/SpacingFoundation.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro |
field 1
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-background-field | field | — | — | — | rgba(0, 0, 0, 0) · rgba(0, 0, 0, 0) | 11 compComponents: esa-checkbox, esa-checkbox-group, esa-color-picker, esa-combobox, esa-date-picker, esa-file-upload, esa-input-tag, esa-radio-group, esa-select, esa-text-field, esa-textarea |
brand 6
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-background-brand | brand | — | — | — | --color-grass-9 · #46a758 | 4 tok 21 comp 7 fileTokens: --color-background-overlay-active, --color-content-link, --grid-row-bg-selected, --loading-spinner-color Components: esa-app-bar, esa-back-to-top, esa-badge, esa-button, esa-card, esa-checkbox, esa-checkbox-group, esa-color-picker, esa-confirm-dialog, esa-entity-search, esa-file-upload, esa-filter-dropdown, esa-header-nav, esa-loading-overlay, esa-loading-spinner, esa-progress-bar, esa-radio-group, esa-range-slider, esa-sidebar-nav, esa-switch-toggle, esa-tab-layout Files: packages/docs/src/DocsShell.astro, packages/docs/src/PropsTable.astro, packages/docs/src/RadiusFoundation.astro, packages/docs/src/SpacingFoundation.astro, packages/spoke-template/src/pages/design-system/foundations/iconography.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro |
--color-background-brand-active | brand | — | — | active | --color-grass-10 · #3e9b4f | orphan |
--color-background-brand-hover | brand | — | — | hover | --color-grass-10 · #3e9b4f | 1 tok 5 compTokens: --color-content-link-hover Components: esa-back-to-top, esa-badge, esa-button, esa-confirm-dialog, esa-entity-search |
--color-background-brand-muted | brand | muted | — | — | --color-grass-3 · #e9f6e9 | 3 compComponents: esa-badge, esa-button, esa-filter-pills |
--color-background-brand-muted-hover | brand | muted | — | hover | --color-grass-4 · #daf1db | 2 compComponents: esa-button, esa-filter-pills |
--color-background-brand-subtle | brand | subtle | — | — | --color-grass-1 · #fbfefb | 4 comp 3 fileComponents: esa-chip-group, esa-filter-dropdown, esa-pill, esa-sidebar-nav Files: packages/docs/src/RadiusFoundation.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro |
accent 2
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-background-accent | accent | — | — | — | --color-orange-9 · #f76b15 | orphan |
--color-background-accent-hover | accent | — | — | hover | --color-orange-10 · #ef5f00 | orphan |
ai 3
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-background-ai | ai | — | — | — | --color-copper-9 · #a18072 | 1 compComponents: esa-button |
--color-background-ai-hover | ai | — | — | hover | --color-copper-10 · #957468 | 1 compComponents: esa-button |
--color-background-ai-subtle | ai | subtle | — | — | --color-copper-1 · #fdfcfc | orphan |
utility 16
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-background-utility-danger | utility | danger | — | — | --color-red-11 · #ce2c31 | 1 tok 3 comp 1 fileTokens: --form-error-border-color Components: esa-button, esa-confirm-dialog, esa-progress-bar Files: packages/spoke-template/src/pages/design-system/foundations/iconography.astro |
--color-background-utility-danger-hover | utility | danger | — | hover | --color-red-12 · #641723 | 3 compComponents: esa-badge, esa-button, esa-confirm-dialog |
--color-background-utility-danger-muted | utility | danger-muted | — | — | --color-red-3 · #feebec | 1 compComponents: esa-badge |
--color-background-utility-danger-subtle | utility | danger-subtle | — | — | --color-red-1 · #fffcfc | 6 compComponents: esa-alert-box, esa-confirm-dialog, esa-danger-zone, esa-dropdown-menu, esa-error-summary, esa-pill |
--color-background-utility-info | utility | info | — | — | --color-blue-11 · #0d74ce | 1 comp 1 fileComponents: esa-button Files: packages/spoke-template/src/pages/design-system/foundations/iconography.astro |
--color-background-utility-info-hover | utility | info | — | hover | --color-blue-12 · #113264 | 2 compComponents: esa-badge, esa-button |
--color-background-utility-info-muted | utility | info-muted | — | — | --color-blue-3 · #e6f4fe | 1 compComponents: esa-badge |
--color-background-utility-info-subtle | utility | info-subtle | — | — | --color-blue-1 · #fbfdff | 3 compComponents: esa-alert-box, esa-confirm-dialog, esa-pill |
--color-background-utility-success | utility | success | — | — | --color-green-11 · #218358 | 2 compComponents: esa-button, esa-progress-bar |
--color-background-utility-success-hover | utility | success | — | hover | --color-green-12 · #193b2d | 2 compComponents: esa-badge, esa-button |
--color-background-utility-success-muted | utility | success-muted | — | — | --color-green-3 · #e6f6eb | 1 compComponents: esa-badge |
--color-background-utility-success-subtle | utility | success-subtle | — | — | --color-green-1 · #fbfefc | 2 comp 1 fileComponents: esa-alert-box, esa-pill Files: packages/docs/src/DocsShell.astro |
--color-background-utility-warning | utility | warning | — | — | --color-yellow-9 · #ffc53d | 3 comp 1 fileComponents: esa-button, esa-confirm-dialog, esa-progress-bar Files: packages/spoke-template/src/pages/design-system/foundations/iconography.astro |
--color-background-utility-warning-hover | utility | warning | — | hover | --color-yellow-10 · #ffba18 | 3 compComponents: esa-badge, esa-button, esa-confirm-dialog |
--color-background-utility-warning-muted | utility | warning-muted | — | — | --color-yellow-3 · #fff7c2 | 1 compComponents: esa-badge |
--color-background-utility-warning-subtle | utility | warning-subtle | — | — | --color-yellow-1 · #fefdfb | 5 comp 1 fileComponents: esa-alert-box, esa-chip-group, esa-combobox, esa-confirm-dialog, esa-pill Files: packages/docs/src/DocsShell.astro |
dataviz 22
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-background-dataviz-categorical-1 | dataviz | categorical-1 | — | — | --color-grass-10 · #3e9b4f | orphan |
--color-background-dataviz-categorical-2 | dataviz | categorical-2 | — | — | --color-indigo-9 · #3e63dd | orphan |
--color-background-dataviz-categorical-3 | dataviz | categorical-3 | — | — | --color-orange-10 · #ef5f00 | orphan |
--color-background-dataviz-categorical-4 | dataviz | categorical-4 | — | — | --color-blue-9 · #0090ff | orphan |
--color-background-dataviz-categorical-5 | dataviz | categorical-5 | — | — | --color-crimson-11 · #cb1d63 | orphan |
--color-background-dataviz-categorical-6 | dataviz | categorical-6 | — | — | --color-cyan-10 · #0797b9 | orphan |
--color-background-dataviz-categorical-7 | dataviz | categorical-7 | — | — | --color-violet-11 · #6550b9 | orphan |
--color-background-dataviz-categorical-8 | dataviz | categorical-8 | — | — | --color-teal-10 · #0d9b8a | orphan |
--color-background-dataviz-diverging-1 | dataviz | diverging-1 | — | — | --color-blue-11 · #0d74ce | orphan |
--color-background-dataviz-diverging-2 | dataviz | diverging-2 | — | — | --color-blue-9 · #0090ff | orphan |
--color-background-dataviz-diverging-3 | dataviz | diverging-3 | — | — | --color-blue-7 · #8ec8f6 | orphan |
--color-background-dataviz-diverging-4 | dataviz | diverging-4 | — | — | --color-gray-3 · #f0f0f0 | orphan |
--color-background-dataviz-diverging-5 | dataviz | diverging-5 | — | — | --color-red-7 · #f4a9aa | orphan |
--color-background-dataviz-diverging-6 | dataviz | diverging-6 | — | — | --color-red-9 · #e5484d | orphan |
--color-background-dataviz-diverging-7 | dataviz | diverging-7 | — | — | --color-red-11 · #ce2c31 | orphan |
--color-background-dataviz-sequential-1 | dataviz | sequential-1 | — | — | #75c183 · #75c183 | orphan |
--color-background-dataviz-sequential-2 | dataviz | sequential-2 | — | — | #50ae64 · #50ae64 | orphan |
--color-background-dataviz-sequential-3 | dataviz | sequential-3 | — | — | #389850 · #389850 | orphan |
--color-background-dataviz-sequential-4 | dataviz | sequential-4 | — | — | #288240 · #288240 | orphan |
--color-background-dataviz-sequential-5 | dataviz | sequential-5 | — | — | #266a36 · #266a36 | orphan |
--color-background-dataviz-sequential-6 | dataviz | sequential-6 | — | — | #24522e · #24522e | orphan |
--color-background-dataviz-sequential-7 | dataviz | sequential-7 | — | — | --color-grass-12 · #203c25 | orphan |
disabled 1
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-background-disabled | disabled | — | — | — | --color-gray-3 · #f0f0f0 | 11 compComponents: esa-checkbox, esa-checkbox-group, esa-color-picker, esa-combobox, esa-date-picker, esa-file-upload, esa-input-tag, esa-radio-group, esa-select, esa-text-field, esa-textarea |
overlay 6
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-background-overlay-active via brand | overlay | — | — | active | --color-background-brand · color-mix(in srgb, #46a758 8%, transparent) | 4 compComponents: esa-combobox, esa-file-upload, esa-input-tag, esa-select |
--color-background-overlay-backdrop | overlay | backdrop | — | — | --color-black-a-7 · rgba(0, 0, 0, 0.5) | 7 compComponents: esa-command-palette, esa-confirm-dialog, esa-dialog, esa-entity-search, esa-search-panel, esa-side-dialog, esa-sidebar-nav |
--color-background-overlay-heavy-hover | overlay | heavy | — | hover | --color-black-a-2 · rgba(0, 0, 0, 0.1) | 1 compComponents: esa-pill |
--color-background-overlay-hover | overlay | — | — | hover | rgba(0, 0, 0, 0.03) · rgba(0, 0, 0, 0.03) | 3 compComponents: esa-button-toggle, esa-filter-clear-button, esa-pagination |
--color-background-overlay-scrim | overlay | scrim | — | — | --color-white-a-10 · rgba(255, 255, 255, 0.8) | 1 compComponents: esa-loading-overlay |
--color-background-overlay-strong-hover | overlay | strong | — | hover | --color-black-a-1 · rgba(0, 0, 0, 0.05) | 4 compComponents: esa-alert-box, esa-combobox, esa-input-tag, esa-select |
no intention in slot 2 0
Nothing should be here, and that emptiness is the claim: every tier-2 colour name
fills slot 2 with a real intention. This grouping is
property > intention > variant > state, and the label
on every group above is slot 2 alone. Earlier versions collapsed intention and
variant into one axis, which cannot be done — so each one had to invent an
umbrella (neutral, then default-as-a-bucket, then utility) to stand in for the slot that had been deleted. Anything
whose slot 2 is not an intention lands here instead of being absorbed.
utility is the one that came back, and the difference is
the whole test: it was a heading with no token behind it, and since
2026-08-15 the tokens carry the word — --color-background-utility-danger,
not --color-background-danger under a label nobody could
have guessed. An umbrella you can read off a name is just an intention.
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|
content 21
Text, icons and SVG strokes. Spelled `content`, not `text`: icons and strokes were already reading these tokens, so the narrower word described the members inaccurately.
Spelled in the name as content 21 declared · 0 inferred.
default 4
The tokens say this word now. Ten of them were named without it — --color-background, --color-border, --color-content-primary, --color-border-subtle and the
rest — until 2026-08-15, relying on a convention of intention-by-omission
that only reads if you already know it. See bare-property-to-default and missing-intention-to-default in migrations.json. Everything here is the DEFAULT intention: the token
itself, its prominence variants and its states.
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-content-default | default | — | — | — | --color-gray-12 · #202020 | 4 tok 40 comp 15 fileTokens: --breadcrumbs-link-hover, --form-text-color, --grid-header-color, --stat-value-color Components: esa-alert-box, esa-app-bar, esa-app-shell, esa-breadcrumbs, esa-button, esa-button-toggle, esa-card, esa-checkbox, esa-checkbox-group, esa-chip-group, esa-collapsible, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-dialog, esa-dropdown-menu, esa-empty-state, esa-entity-search, esa-error-summary, esa-file-list, esa-file-upload, esa-filter-dropdown, esa-header-nav, esa-input-tag, esa-nav-dropdown, esa-page-header, esa-pagination, esa-pill, esa-popover, esa-progress-bar, esa-radio-group, esa-range-slider, esa-search-panel, esa-select, esa-side-dialog, esa-sidebar-nav, esa-stat, esa-switch-toggle, esa-tab-layout Files: packages/docs/src/Api.astro, packages/docs/src/ApiTable.astro, packages/docs/src/ColorFoundation.astro, packages/docs/src/ColorScale.astro, packages/docs/src/DocsShell.astro, packages/docs/src/Preview.astro, packages/docs/src/PropsTable.astro, packages/docs/src/RadiusFoundation.astro, packages/docs/src/SpacingFoundation.astro, packages/docs/src/TypeFoundation.astro, packages/spoke-template/src/layouts/BaseLayout.astro, packages/spoke-template/src/pages/design-system/foundations/iconography.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro, packages/spoke-template/src/pages/patterns/index.astro |
--color-content-default-knockout | default | — | knockout | — | --color-gray-1 · #fcfcfc | 16 compComponents: esa-app-bar, esa-avatar, esa-back-to-top, esa-badge, esa-button, esa-card, esa-checkbox, esa-checkbox-group, esa-confirm-dialog, esa-entity-search, esa-filter-dropdown, esa-popover, esa-sidebar-nav, esa-snackbar-item, esa-tab-layout, esa-tooltip |
--color-content-default-secondary | default | secondary | — | — | --color-gray-11 · #646464 | 7 tok 33 comp 12 fileTokens: --alert-box-text-color, --badge-text-color, --breadcrumbs-link-color, --form-affix-color, --form-help-color, --form-label-color, --form-placeholder-color Components: esa-alert-box, esa-app-shell, esa-badge, esa-button-toggle, esa-card, esa-chip-group, esa-collapsible, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-danger-zone, esa-dialog, esa-empty-state, esa-entity-search, esa-file-list, esa-file-upload, esa-filter-clear-button, esa-filter-dropdown, esa-filter-pills, esa-header-nav, esa-input-tag, esa-kbd, esa-loading-overlay, esa-page-header, esa-pagination, esa-progress-bar, esa-search-panel, esa-select, esa-side-dialog, esa-sidebar-nav, esa-stat, esa-tab-layout, esa-text-field Files: packages/docs/src/ApiTable.astro, packages/docs/src/ColorFoundation.astro, packages/docs/src/ColorScale.astro, packages/docs/src/DocsShell.astro, packages/docs/src/Preview.astro, packages/docs/src/PropsTable.astro, packages/docs/src/RadiusFoundation.astro, packages/docs/src/SpacingFoundation.astro, packages/docs/src/TypeFoundation.astro, packages/spoke-template/src/pages/design-system/foundations/iconography.astro, packages/spoke-template/src/pages/index.astro, packages/spoke-template/src/pages/patterns/index.astro |
--color-content-default-tertiary | default | tertiary | — | — | --color-gray-11 · #646464 | orphan |
brand 3
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-content-brand | brand | — | — | — | --color-grass-11 · #2a7e3b | 1 tok 16 comp 1 fileTokens: --stat-accent-color Components: esa-app-shell, esa-button, esa-button-toggle, esa-chip-group, esa-combobox, esa-entity-search, esa-file-list, esa-file-upload, esa-filter-clear-button, esa-filter-dropdown, esa-filter-pills, esa-input-tag, esa-pill, esa-select, esa-sidebar-nav, esa-stat Files: packages/docs/src/DocsShell.astro |
--color-content-on-brand | onbrand | — | — | — | --color-gray-1 · #fcfcfc | 1 compComponents: esa-card |
--color-content-on-brand-muted | onbrand | muted | — | — | --color-grass-12 · #203c25 | 2 compComponents: esa-badge, esa-button |
accent 1
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-content-on-accent | onaccent | — | — | — | --color-gray-1 · #fcfcfc | orphan |
ai 2
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-content-ai | ai | — | — | — | --color-copper-11 · #7d5e54 | 1 compComponents: esa-button |
--color-content-on-ai | onai | — | — | — | --color-gray-1 · #fcfcfc | orphan |
link 2
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-content-link via brand | link | — | — | — | --color-background-brand · #46a758 | 2 fileFiles: packages/spoke-template/src/layouts/BaseLayout.astro, packages/spoke-template/src/pages/index.astro |
--color-content-link-hover via brand | link | — | — | hover | --color-background-brand-hover · #3e9b4f | orphan |
utility 8
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-content-on-utility-danger | onutility | danger | — | — | --color-gray-1 · #fcfcfc | 1 compComponents: esa-confirm-dialog |
--color-content-on-utility-info | onutility | info | — | — | --color-gray-1 · #fcfcfc | orphan |
--color-content-on-utility-success | onutility | success | — | — | --color-gray-1 · #fcfcfc | 1 compComponents: esa-button |
--color-content-on-utility-warning | onutility | warning | — | — | --color-yellow-12 · #4f3422 | 1 tok 2 compTokens: --button-on-warning Components: esa-button, esa-confirm-dialog |
--color-content-utility-danger | utility | danger | — | — | --color-red-11 · #ce2c31 | 1 tok 25 compTokens: --form-error-color Components: esa-alert-box, esa-badge, esa-button, esa-button-toggle, esa-checkbox-group, esa-combobox, esa-confirm-dialog, esa-danger-zone, esa-date-picker, esa-dropdown-menu, esa-error-summary, esa-field-error, esa-file-list, esa-file-upload, esa-filter-clear-button, esa-filter-pills, esa-form-field, esa-header-nav, esa-input-tag, esa-pill, esa-radio-group, esa-select, esa-snackbar-item, esa-text-field, esa-textarea |
--color-content-utility-info | utility | info | — | — | --color-blue-11 · #0d74ce | 6 compComponents: esa-alert-box, esa-badge, esa-button, esa-confirm-dialog, esa-pill, esa-snackbar-item |
--color-content-utility-success | utility | success | — | — | --color-green-11 · #218358 | 5 comp 1 fileComponents: esa-alert-box, esa-badge, esa-button, esa-pill, esa-snackbar-item Files: packages/docs/src/DocsShell.astro |
--color-content-utility-warning | utility | warning | — | — | --color-yellow-11 · #ab6400 | 7 comp 1 fileComponents: esa-alert-box, esa-badge, esa-button, esa-chip-group, esa-confirm-dialog, esa-pill, esa-snackbar-item Files: packages/docs/src/DocsShell.astro |
disabled 1
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-content-disabled | disabled | — | — | — | --color-gray-9 · #8d8d8d | 10 compComponents: esa-button-toggle, esa-color-picker, esa-combobox, esa-date-picker, esa-file-upload, esa-input-tag, esa-pagination, esa-select, esa-text-field, esa-textarea |
no intention in slot 2 0
Nothing should be here, and that emptiness is the claim: every tier-2 colour name
fills slot 2 with a real intention. This grouping is
property > intention > variant > state, and the label
on every group above is slot 2 alone. Earlier versions collapsed intention and
variant into one axis, which cannot be done — so each one had to invent an
umbrella (neutral, then default-as-a-bucket, then utility) to stand in for the slot that had been deleted. Anything
whose slot 2 is not an intention lands here instead of being absorbed.
utility is the one that came back, and the difference is
the whole test: it was a heading with no token behind it, and since
2026-08-15 the tokens carry the word — --color-background-utility-danger,
not --color-background-danger under a label nobody could
have guessed. An umbrella you can read off a name is just an intention.
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|
border 11
Strokes and dividers. Was already the best-named of the three — every member spelled `border` — and it stayed that way; the only change was `-light` to `-subtle`, since lightness does not invert sensibly in a dark theme but prominence does.
Spelled in the name as border 11 declared · 0 inferred.
default 5
The tokens say this word now. Ten of them were named without it — --color-background, --color-border, --color-content-primary, --color-border-subtle and the
rest — until 2026-08-15, relying on a convention of intention-by-omission
that only reads if you already know it. See bare-property-to-default and missing-intention-to-default in migrations.json. Everything here is the DEFAULT intention: the token
itself, its prominence variants and its states.
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-border-default | default | — | — | — | --color-gray-7 · #cecece | 6 tok 24 comp 11 fileTokens: --badge-border-color, --card-border-color, --form-border-color, --grid-border-color, --grid-header-border-color, --grid-pagination-border-color Components: esa-app-shell, esa-badge, esa-button, esa-button-group, esa-card, esa-chart, esa-chip-group, esa-collapsible, esa-combobox, esa-command-palette, esa-dropdown-menu, esa-entity-search, esa-file-list, esa-file-upload, esa-filter-dropdown, esa-header-nav, esa-kbd, esa-nav-dropdown, esa-pagination, esa-popover, esa-range-slider, esa-side-dialog, esa-sidebar-nav, esa-tab-layout Files: packages/docs/src/ApiTable.astro, packages/docs/src/DocsShell.astro, packages/docs/src/Preview.astro, packages/docs/src/PropsTable.astro, packages/docs/src/RadiusFoundation.astro, packages/docs/src/SpacingFoundation.astro, packages/docs/src/TypeFoundation.astro, packages/spoke-template/src/pages/design-system/foundations/iconography.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro, packages/spoke-template/src/pages/patterns/index.astro |
--color-border-default-focus | default | — | — | focus | --color-grass-10 · #3e9b4f | 2 tok 1 compTokens: --focus-ring-color, --form-border-color-focus Components: esa-input-tag |
--color-border-default-knockout | default | — | knockout | — | --color-gray-dark-7 · #484848 | 1 compComponents: esa-popover |
--color-border-default-strong | default | strong | — | — | --color-gray-8 · #bbbbbb | 1 tok 7 compTokens: --form-border-color-hover Components: esa-app-shell, esa-breadcrumbs, esa-button, esa-chip-group, esa-confirm-dialog, esa-entity-search, esa-switch-toggle |
--color-border-default-subtle | default | subtle | — | — | --color-gray-6 · #d9d9d9 | 2 tok 13 comp 3 fileTokens: --grid-row-border-color, --loading-spinner-track-color Components: esa-card, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-dialog, esa-dropdown-menu, esa-entity-search, esa-input-tag, esa-loading-overlay, esa-loading-spinner, esa-pill, esa-search-panel, esa-sidebar-nav Files: packages/docs/src/PropsTable.astro, packages/docs/src/SpacingFoundation.astro, packages/docs/src/TypeFoundation.astro |
brand 1
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-border-brand | brand | — | — | — | --color-grass-6 · #b2ddb5 | 2 comp 3 fileComponents: esa-chip-group, esa-pill Files: packages/docs/src/DocsShell.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro |
utility 4
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-border-utility-danger | utility | danger | — | — | --color-red-6 · #fdbdbe | 5 compComponents: esa-alert-box, esa-badge, esa-danger-zone, esa-error-summary, esa-pill |
--color-border-utility-info | utility | info | — | — | --color-blue-6 · #acd8fc | 3 compComponents: esa-alert-box, esa-badge, esa-pill |
--color-border-utility-success | utility | success | — | — | --color-green-6 · #adddc0 | 3 comp 1 fileComponents: esa-alert-box, esa-badge, esa-pill Files: packages/docs/src/DocsShell.astro |
--color-border-utility-warning | utility | warning | — | — | --color-yellow-6 · #f3d673 | 4 comp 1 fileComponents: esa-alert-box, esa-badge, esa-chip-group, esa-pill Files: packages/docs/src/DocsShell.astro |
disabled 1
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|---|---|---|---|---|---|
--color-border-disabled | disabled | — | — | — | --color-gray-6 · #d9d9d9 | 11 compComponents: esa-checkbox, esa-checkbox-group, esa-color-picker, esa-combobox, esa-date-picker, esa-file-upload, esa-input-tag, esa-radio-group, esa-select, esa-text-field, esa-textarea |
no intention in slot 2 0
Nothing should be here, and that emptiness is the claim: every tier-2 colour name
fills slot 2 with a real intention. This grouping is
property > intention > variant > state, and the label
on every group above is slot 2 alone. Earlier versions collapsed intention and
variant into one axis, which cannot be done — so each one had to invent an
umbrella (neutral, then default-as-a-bucket, then utility) to stand in for the slot that had been deleted. Anything
whose slot 2 is not an intention lands here instead of being absorbed.
utility is the one that came back, and the difference is
the whole test: it was a heading with no token behind it, and since
2026-08-15 the tokens carry the word — --color-background-utility-danger,
not --color-background-danger under a label nobody could
have guessed. An umbrella you can read off a name is just an intention.
| Token | Intention | Variant | Knockout | State | Resolves to | Used by |
|---|
typography 250
Both halves of the type layer, which are one category and were rendered as two unrelated blocks. The COMPOSITES (`--typography-<intention>[-<size>]-<property>`) are what a component reads; the FACES AND WEIGHTS (`--typography-font-{family,weight}-*`) are the ingredients they are assembled from, and are also the most directly-read tokens in the system — which is the adoption debt the composites exist to retire, not a second way of doing the same thing. As of 2026-08-15 they are also one NAMESPACE: the ingredients were `--font-*`, which made "two unrelated blocks" true of the names as well as the rendering.
The slots · intention > variant > property
The same decomposition the colour tree above uses, on the other half of tier 2. Colour is
property > intention > variant > state and roots its tree on the
property, so its three groups are background/content/border. Typography is
intention > variant > property and roots on the
intention. Same rule — a tree roots on slot 1 — applied to a different slot 1,
which is what makes these two categories readable as one system rather than two habits.
48 composite tokens across 9 intentions, assembled from 242 property tokens. Every one parses into all three slots. The matrix further down answers a different question — is a composite complete? — and its unit is the CLASS. This one’s unit is the TOKEN, so it is the view that can show a name whose slots do not fill.
Composite adoption: 39 of 48 composites are
applied by a component in the kit (.typography-display.typography-display-sm.typography-heading-lg.typography-title.typography-title-sm-strong.typography-body-2xs.typography-body-xs.typography-body-sm.typography-body-md.typography-body-lg.typography-label-2xs.typography-label-xs.typography-label-sm.typography-label-md.typography-label-lg.typography-label-2xs-strong.typography-label-xs-strong.typography-label-sm-strong.typography-label-md-strong.typography-microcopy-2xs.typography-microcopy-xs.typography-microcopy-sm.typography-microcopy-md.typography-microcopy-lg.typography-microcopy-code-lg.typography-microcopy-code-md.typography-microcopy-code-sm.typography-microcopy-2xs-strong.typography-microcopy-2xs-subtle.typography-microcopy-xs-strong.typography-microcopy-xs-subtle.typography-microcopy-sm-strong.typography-microcopy-sm-subtle.typography-microcopy-md-strong.typography-microcopy-md-subtle.typography-microcopy-lg-strong.typography-microcopy-lg-subtle.typography-meta.typography-eyebrow-md).
2 are applied nowhere at all.
Read the `comp` pill, not the `file` one. A `file` hit is usually this
documentation rendering a specimen of the composite, which is not evidence that anything
depends on it — that is exactly why the two are counted separately rather than summed.
The per-property `Used by` column to the right cannot show any of this: it reports
typography.css on all 242 rows, because a component
applies the CLASS and never reads the tokens.
Hand-assembled type: 6 declarations still set a size, weight, family or tracking from the raw scale instead of
naming a role. Zero is the target.
4 component
esa-app-shell:273 — font-size: var(--font-size-300, 1.125rem)esa-app-shell:274 — font-weight: var(--typography-font-weight-bold, 650)esa-app-shell:275 — letter-spacing: var(--letter-spacing-tight, -0.01em)esa-card:235 — font-weight: var(--font-weight-medium, 500)esa-link-column:59 — font-size: var(--font-size-150, var(--typography-body-sm-font-size))esa-page-header:189 — font-weight: var(--font-weight-medium, 500)line-height naming a
--line-height-* rung (a role appears both flowing and flush,
so the box states its own leading), font-family: inherit on a
native button or input (a UA reset), and a read of the component’s own
public tier-3 hook, which carries the composite token as its fallback and is
the surface a spoke overrides.
Slots with no type role: 0 A composite on a slot’s container reaches slotted content through the
flattened tree, and anything slotted in that names its own role overrides it —
so a container can state a default without dictating. A slot with no default is
text with no role.
Every slot that can receive text names one. Icon and logo slots are exempt by name — they receive a mark, not text.
This one is a HEURISTIC and says so: it reads the nearest preceding
class rather than building a DOM, so a slot whose container sits
several elements up can read as unwired. Treat it as a candidate list.
Leading / box mismatches: 4 microcopy-* carries no leading, for text that sits IN a box.
Every other role leads for a column of prose. Where the two disagree:
4 site
outside-the-system — esa-app-shell .esa-app-shell__wordmark (): assembles its own type and leading — names no composite outside-the-system — esa-page-header .esa-page-header__meta dt (): assembles its own type and leading — names no composite outside-the-system — esa-page-header .esa-page-header__meta dd (): assembles its own type and leading — names no composite outside-the-system — esa-select .input--trigger (): assembles its own type and leading — names no composite microcopy-on-flowing is a defect — the lines touch when
that text wraps. The other two are decisions to review, not bugs.
display 10
| Variant | Property | Token | References | Resolves to | Used by |
|---|---|---|---|---|---|
— .typography-display used by components esa-page-header 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: display font-weight: bold | font-family | --typography-display-font-family | --typography-font-family-display | --font-family-dm-sans · 'DM Sans', sans-serif | 1 comp 1 fileComponents: esa-page-header Files: packages/tokens/src/typography.css |
font-size | --typography-display-font-size | --font-size-800 via tier 1 | clamp(2rem, 1.73rem + 1.35vw, 2.75rem) | 1 comp 1 fileComponents: esa-page-header Files: packages/tokens/src/typography.css | |
font-weight | --typography-display-font-weight | --typography-font-weight-bold | --font-weight-650 · 650 | 1 comp 1 fileComponents: esa-page-header Files: packages/tokens/src/typography.css | |
letter-spacing | --typography-display-letter-spacing | --letter-spacing-tight via tier 1 | -0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-display-line-height | --line-height-tight via tier 1 | 1.3 | 1 fileFiles: packages/tokens/src/typography.css | |
sm .typography-display-sm used by components esa-stat assembles from font-family: display font-weight: bold | font-family | --typography-display-sm-font-family | --typography-font-family-display | --font-family-dm-sans · 'DM Sans', sans-serif | 1 comp 1 fileComponents: esa-stat Files: packages/tokens/src/typography.css |
font-size | --typography-display-sm-font-size | --font-size-700 via tier 1 | clamp(1.625rem, 1.41rem + 1.08vw, 2.25rem) | 1 comp 1 fileComponents: esa-stat Files: packages/tokens/src/typography.css | |
font-weight | --typography-display-sm-font-weight | --typography-font-weight-bold | --font-weight-650 · 650 | 1 comp 1 fileComponents: esa-stat Files: packages/tokens/src/typography.css | |
letter-spacing | --typography-display-sm-letter-spacing | --letter-spacing-tight via tier 1 | -0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-display-sm-line-height | --line-height-tight via tier 1 | 1.3 | 1 fileFiles: packages/tokens/src/typography.css |
heading 10
| Variant | Property | Token | References | Resolves to | Used by |
|---|---|---|---|---|---|
md .typography-heading-md used by components none 2 fileFiles: apps/site/src/pages/components/esa-app-shell.astro, apps/site/src/pages/foundations/typography.astro font-family: display font-weight: semibold | font-family | --typography-heading-md-font-family | --typography-font-family-display | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-heading-md-font-size | --font-size-500 via tier 1 | clamp(1.125rem, 0.98rem + 0.72vw, 1.5rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-heading-md-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-heading-md-letter-spacing | --letter-spacing-tight via tier 1 | -0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-heading-md-line-height | --line-height-tight via tier 1 | 1.3 | 1 fileFiles: packages/tokens/src/typography.css | |
lg .typography-heading-lg used by components esa-page-header 2 fileFiles: apps/site/src/pages/demos/app-shell.astro, apps/site/src/pages/foundations/typography.astro font-family: display font-weight: semibold | font-family | --typography-heading-lg-font-family | --typography-font-family-display | --font-family-dm-sans · 'DM Sans', sans-serif | 1 comp 1 fileComponents: esa-page-header Files: packages/tokens/src/typography.css |
font-size | --typography-heading-lg-font-size | --font-size-600 via tier 1 | clamp(1.375rem, 1.2rem + 0.88vw, 1.875rem) | 1 comp 1 fileComponents: esa-page-header Files: packages/tokens/src/typography.css | |
font-weight | --typography-heading-lg-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 comp 1 fileComponents: esa-page-header Files: packages/tokens/src/typography.css | |
letter-spacing | --typography-heading-lg-letter-spacing | --letter-spacing-tight via tier 1 | -0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-heading-lg-line-height | --line-height-tight via tier 1 | 1.3 | 1 fileFiles: packages/tokens/src/typography.css |
title 15
| Variant | Property | Token | References | Resolves to | Used by |
|---|---|---|---|---|---|
— .typography-title used by components esa-avatar esa-confirm-dialog esa-dialog esa-empty-state esa-side-dialog 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: medium | font-family | --typography-title-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-title-font-size | --font-size-400 via tier 1 | clamp(1rem, 0.88rem + 0.6vw, 1.25rem) | 1 tok 1 comp 1 fileTokens: --avatar-font-size-lg Components: esa-avatar Files: packages/tokens/src/typography.css | |
font-weight | --typography-title-font-weight | --typography-font-weight-medium | --font-weight-500 · 500 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-title-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-title-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
strong .typography-title-strong used by components none 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: semibold | font-family | --typography-title-strong-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-title-strong-font-size | --font-size-400 via tier 1 | clamp(1rem, 0.88rem + 0.6vw, 1.25rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-title-strong-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-title-strong-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-title-strong-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
sm-strong .typography-title-sm-strong used by components esa-card esa-danger-zone assembles from font-family: sans font-weight: semibold | font-family | --typography-title-sm-strong-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-title-sm-strong-font-size | --font-size-250 via tier 1 | clamp(0.8125rem, 0.71rem + 0.5vw, 1.0625rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-title-sm-strong-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-title-sm-strong-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-title-sm-strong-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css |
body 25
| Variant | Property | Token | References | Resolves to | Used by |
|---|---|---|---|---|---|
2xs .typography-body-2xs used by components esa-checkbox esa-checkbox-group esa-combobox esa-input-tag esa-progress-bar esa-radio-group esa-textarea 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: regular | font-family | --typography-body-2xs-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-body-2xs-font-size | --font-size-050 via tier 1 | clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-body-2xs-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-body-2xs-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-body-2xs-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
xs .typography-body-xs used by components esa-breadcrumbs esa-checkbox esa-checkbox-group esa-combobox esa-command-palette esa-empty-state esa-entity-search esa-field-error esa-header-nav esa-input-tag esa-progress-bar esa-radio-group esa-search-panel esa-select esa-textarea 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: regular | font-family | --typography-body-xs-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-body-xs-font-size | --font-size-100 via tier 1 | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-body-xs-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-body-xs-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-body-xs-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
sm .typography-body-sm used by components esa-alert-box esa-breadcrumbs esa-button-toggle esa-card esa-checkbox-group esa-combobox esa-command-palette esa-date-picker esa-empty-state esa-file-upload esa-form-field esa-input-tag esa-link-column esa-loading-overlay esa-progress-bar esa-radio-group esa-search-panel esa-select esa-stat esa-text-field esa-textarea 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: regular | font-family | --typography-body-sm-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-body-sm-font-size | --font-size-150 via tier 1 | clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | 2 comp 1 fileComponents: esa-link-column, esa-stat Files: packages/tokens/src/typography.css | |
font-weight | --typography-body-sm-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-body-sm-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-body-sm-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
md .typography-body-md used by components esa-app-shell esa-breadcrumbs esa-card esa-checkbox esa-checkbox-group esa-collapsible esa-combobox esa-command-palette esa-confirm-dialog esa-container esa-danger-zone esa-dialog esa-dropdown-menu esa-empty-state esa-entity-search esa-form-field esa-header-nav esa-input-tag esa-nav-dropdown esa-page-header esa-popover esa-progress-bar esa-radio-group esa-select esa-side-dialog esa-snackbar-item esa-switch-toggle esa-tab-layout esa-textarea 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: regular | font-family | --typography-body-md-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-body-md-font-size | --font-size-200 via tier 1 | clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | 1 comp 1 fileComponents: esa-pagination Files: packages/tokens/src/typography.css | |
font-weight | --typography-body-md-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-body-md-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-body-md-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
lg .typography-body-lg used by components esa-breadcrumbs esa-checkbox esa-checkbox-group esa-combobox esa-input-tag esa-radio-group esa-select esa-textarea 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: regular | font-family | --typography-body-lg-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-body-lg-font-size | --font-size-300 via tier 1 | clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-body-lg-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-body-lg-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-body-lg-line-height | --line-height-relaxed via tier 1 | 1.8 | 1 fileFiles: packages/tokens/src/typography.css |
label 50
| Variant | Property | Token | References | Resolves to | Used by |
|---|---|---|---|---|---|
2xs .typography-label-2xs used by components esa-button-toggle esa-checkbox-group esa-color-picker esa-combobox esa-date-picker esa-form-field esa-input-tag esa-progress-bar esa-radio-group esa-range-slider esa-text-field esa-textarea 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: medium | font-family | --typography-label-2xs-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-label-2xs-font-size | --font-size-050 via tier 1 | clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-label-2xs-font-weight | --typography-font-weight-medium | --font-weight-500 · 500 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-label-2xs-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-label-2xs-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
xs .typography-label-xs used by components esa-breadcrumbs esa-button-toggle esa-checkbox-group esa-color-picker esa-combobox esa-date-picker esa-entity-search esa-form-field esa-input-tag esa-progress-bar esa-radio-group esa-range-slider esa-select esa-text-field esa-textarea 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: medium | font-family | --typography-label-xs-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-label-xs-font-size | --font-size-100 via tier 1 | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | 1 tok 1 comp 1 fileTokens: --grid-header-font-size Components: esa-filter-pills Files: packages/tokens/src/typography.css | |
font-weight | --typography-label-xs-font-weight | --typography-font-weight-medium | --font-weight-500 · 500 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-label-xs-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-label-xs-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
sm .typography-label-sm used by components esa-breadcrumbs esa-progress-bar esa-search-panel esa-sidebar-nav 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: medium | font-family | --typography-label-sm-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-label-sm-font-size | --font-size-150 via tier 1 | clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | 2 comp 1 fileComponents: esa-card, esa-page-header Files: packages/tokens/src/typography.css | |
font-weight | --typography-label-sm-font-weight | --typography-font-weight-medium | --font-weight-500 · 500 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-label-sm-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-label-sm-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
md .typography-label-md used by components esa-app-bar esa-breadcrumbs esa-button-group esa-button-toggle esa-card esa-checkbox-group esa-color-picker esa-combobox esa-command-palette esa-confirm-dialog esa-danger-zone esa-date-picker esa-dialog esa-empty-state esa-entity-search esa-file-upload esa-filter-container esa-form-field esa-header-nav esa-input-tag esa-link-column esa-page-header esa-pillbox esa-popover esa-progress-bar esa-radio-group esa-range-slider esa-select esa-side-dialog esa-sidebar-nav esa-stat esa-text-field esa-textarea esa-tooltip 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: medium | font-family | --typography-label-md-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-label-md-font-size | --font-size-200 via tier 1 | clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | 1 tok 5 comp 1 fileTokens: --grid-font-size Components: esa-card, esa-link-column, esa-page-header, esa-pagination, esa-stat Files: packages/tokens/src/typography.css | |
font-weight | --typography-label-md-font-weight | --typography-font-weight-medium | --font-weight-500 · 500 | 1 comp 1 fileComponents: esa-stat Files: packages/tokens/src/typography.css | |
letter-spacing | --typography-label-md-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-label-md-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
lg .typography-label-lg used by components esa-breadcrumbs esa-button-toggle esa-checkbox-group esa-color-picker esa-combobox esa-date-picker esa-form-field esa-input-tag esa-radio-group esa-range-slider esa-select esa-text-field esa-textarea 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: medium | font-family | --typography-label-lg-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-label-lg-font-size | --font-size-300 via tier 1 | clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-label-lg-font-weight | --typography-font-weight-medium | --font-weight-500 · 500 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-label-lg-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-label-lg-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
2xs-strong .typography-label-2xs-strong used by components esa-avatar 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: semibold | font-family | --typography-label-2xs-strong-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-label-2xs-strong-font-size | --font-size-050 via tier 1 | clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | 1 tok 1 comp 1 fileTokens: --avatar-font-size-xs Components: esa-avatar Files: packages/tokens/src/typography.css | |
font-weight | --typography-label-2xs-strong-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-label-2xs-strong-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-label-2xs-strong-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
xs-strong .typography-label-xs-strong used by components esa-avatar esa-empty-state 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: semibold | font-family | --typography-label-xs-strong-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-label-xs-strong-font-size | --font-size-100 via tier 1 | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | 1 tok 1 comp 1 fileTokens: --avatar-font-size-sm Components: esa-avatar Files: packages/tokens/src/typography.css | |
font-weight | --typography-label-xs-strong-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-label-xs-strong-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-label-xs-strong-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
sm-strong .typography-label-sm-strong used by components esa-alert-box esa-collapsible esa-empty-state 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: semibold | font-family | --typography-label-sm-strong-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-label-sm-strong-font-size | --font-size-150 via tier 1 | clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-label-sm-strong-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-label-sm-strong-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-label-sm-strong-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
md-strong .typography-label-md-strong used by components esa-avatar esa-empty-state esa-error-summary esa-header-nav 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: semibold | font-family | --typography-label-md-strong-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-label-md-strong-font-size | --font-size-200 via tier 1 | clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | 1 tok 1 comp 1 fileTokens: --avatar-font-size-md Components: esa-avatar Files: packages/tokens/src/typography.css | |
font-weight | --typography-label-md-strong-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-label-md-strong-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-label-md-strong-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
lg-strong .typography-label-lg-strong used by components none 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: semibold | font-family | --typography-label-lg-strong-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-label-lg-strong-font-size | --font-size-300 via tier 1 | clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-label-lg-strong-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-label-lg-strong-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-label-lg-strong-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css |
microcopy 90
| Variant | Property | Token | References | Resolves to | Used by |
|---|---|---|---|---|---|
2xs .typography-microcopy-2xs used by components esa-button esa-button-toggle esa-pill esa-range-slider assembles from font-family: sans font-weight: medium | font-family | --typography-microcopy-2xs-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-2xs-font-size | --font-size-050 via tier 1 | clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-2xs-font-weight | --typography-font-weight-medium | --font-weight-500 · 500 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-2xs-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-2xs-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
xs .typography-microcopy-xs used by components esa-app-shell esa-button esa-button-toggle esa-filter-pills esa-kbd esa-pill esa-range-slider assembles from font-family: sans font-weight: medium | font-family | --typography-microcopy-xs-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-xs-font-size | --font-size-100 via tier 1 | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-xs-font-weight | --typography-font-weight-medium | --font-weight-500 · 500 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-xs-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-xs-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
sm .typography-microcopy-sm used by components esa-filter-clear-button esa-filter-dropdown esa-pill esa-sidebar-nav assembles from font-family: sans font-weight: medium | font-family | --typography-microcopy-sm-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-sm-font-size | --font-size-150 via tier 1 | clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-sm-font-weight | --typography-font-weight-medium | --font-weight-500 · 500 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-sm-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-sm-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
md .typography-microcopy-md used by components esa-button esa-button-toggle esa-pill esa-range-slider esa-sidebar-nav assembles from font-family: sans font-weight: medium | font-family | --typography-microcopy-md-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-md-font-size | --font-size-200 via tier 1 | clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-md-font-weight | --typography-font-weight-medium | --font-weight-500 · 500 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-md-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-md-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
lg .typography-microcopy-lg used by components esa-button esa-button-toggle esa-range-slider assembles from font-family: sans font-weight: medium | font-family | --typography-microcopy-lg-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-lg-font-size | --font-size-300 via tier 1 | clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-lg-font-weight | --typography-font-weight-medium | --font-weight-500 · 500 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-lg-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-lg-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
code-lg .typography-microcopy-code-lg used by components esa-color-picker assembles from font-family: mono font-weight: regular | font-family | --typography-microcopy-code-lg-font-family | --typography-font-family-mono | --font-family-dm-mono · 'DM Mono', monospace | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-code-lg-font-size | --font-size-300 via tier 1 | clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-code-lg-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-code-lg-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-code-lg-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
code-md .typography-microcopy-code-md used by components esa-color-picker assembles from font-family: mono font-weight: regular | font-family | --typography-microcopy-code-md-font-family | --typography-font-family-mono | --font-family-dm-mono · 'DM Mono', monospace | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-code-md-font-size | --font-size-200 via tier 1 | clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-code-md-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-code-md-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-code-md-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
code-sm .typography-microcopy-code-sm used by components esa-color-picker assembles from font-family: mono font-weight: regular | font-family | --typography-microcopy-code-sm-font-family | --typography-font-family-mono | --font-family-dm-mono · 'DM Mono', monospace | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-code-sm-font-size | --font-size-150 via tier 1 | clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-code-sm-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-code-sm-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-code-sm-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
2xs-strong .typography-microcopy-2xs-strong used by components esa-badge esa-button-toggle esa-chip-group assembles from font-family: sans font-weight: semibold | font-family | --typography-microcopy-2xs-strong-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-2xs-strong-font-size | --font-size-050 via tier 1 | clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-2xs-strong-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-2xs-strong-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-2xs-strong-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
2xs-subtle .typography-microcopy-2xs-subtle used by components esa-combobox esa-date-picker esa-input-tag esa-text-field assembles from font-family: sans font-weight: regular | font-family | --typography-microcopy-2xs-subtle-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-2xs-subtle-font-size | --font-size-050 via tier 1 | clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-2xs-subtle-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-2xs-subtle-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-2xs-subtle-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
xs-strong .typography-microcopy-xs-strong used by components esa-badge esa-button-toggle esa-chip-group esa-filter-dropdown esa-sidebar-nav esa-tab-layout assembles from font-family: sans font-weight: semibold | font-family | --typography-microcopy-xs-strong-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-xs-strong-font-size | --font-size-100 via tier 1 | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-xs-strong-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-xs-strong-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-xs-strong-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
xs-subtle .typography-microcopy-xs-subtle used by components esa-combobox esa-date-picker esa-filter-dropdown esa-filter-pills esa-input-tag esa-select esa-text-field esa-tooltip assembles from font-family: sans font-weight: regular | font-family | --typography-microcopy-xs-subtle-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-xs-subtle-font-size | --font-size-100 via tier 1 | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-xs-subtle-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-xs-subtle-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-xs-subtle-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
sm-strong .typography-microcopy-sm-strong used by components esa-badge esa-snackbar-item assembles from font-family: sans font-weight: semibold | font-family | --typography-microcopy-sm-strong-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-sm-strong-font-size | --font-size-150 via tier 1 | clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-sm-strong-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-sm-strong-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-sm-strong-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
sm-subtle .typography-microcopy-sm-subtle used by components esa-app-shell esa-file-list esa-file-upload esa-filter-dropdown assembles from font-family: sans font-weight: regular | font-family | --typography-microcopy-sm-subtle-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-sm-subtle-font-size | --font-size-150 via tier 1 | clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-sm-subtle-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-sm-subtle-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-sm-subtle-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
md-strong .typography-microcopy-md-strong used by components esa-badge esa-button-toggle esa-chip-group assembles from font-family: sans font-weight: semibold | font-family | --typography-microcopy-md-strong-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-md-strong-font-size | --font-size-200 via tier 1 | clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-md-strong-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-md-strong-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-md-strong-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
md-subtle .typography-microcopy-md-subtle used by components esa-combobox esa-date-picker esa-filter-dropdown esa-input-tag esa-pagination esa-search-panel esa-select esa-text-field assembles from font-family: sans font-weight: regular | font-family | --typography-microcopy-md-subtle-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-md-subtle-font-size | --font-size-200 via tier 1 | clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-md-subtle-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-md-subtle-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-md-subtle-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
lg-strong .typography-microcopy-lg-strong used by components esa-button-toggle esa-chip-group assembles from font-family: sans font-weight: semibold | font-family | --typography-microcopy-lg-strong-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-lg-strong-font-size | --font-size-300 via tier 1 | clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-lg-strong-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-lg-strong-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-lg-strong-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css | |
lg-subtle .typography-microcopy-lg-subtle used by components esa-combobox esa-command-palette esa-date-picker esa-entity-search esa-filter-dropdown esa-input-tag esa-select esa-text-field assembles from font-family: sans font-weight: regular | font-family | --typography-microcopy-lg-subtle-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-microcopy-lg-subtle-font-size | --font-size-300 via tier 1 | clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-microcopy-lg-subtle-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-microcopy-lg-subtle-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-microcopy-lg-subtle-line-height | --line-height-none via tier 1 | 1 | 1 fileFiles: packages/tokens/src/typography.css |
meta 5
| Variant | Property | Token | References | Resolves to | Used by |
|---|---|---|---|---|---|
— .typography-meta used by components esa-card 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: regular | font-family | --typography-meta-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-meta-font-size | --font-size-100 via tier 1 | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-meta-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-meta-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-meta-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css |
eyebrow 12
| Variant | Property | Token | References | Resolves to | Used by |
|---|---|---|---|---|---|
sm .typography-eyebrow-sm used by components none 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: semibold | font-family | --typography-eyebrow-sm-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-eyebrow-sm-font-size | --font-size-050 via tier 1 | clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-eyebrow-sm-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-eyebrow-sm-letter-spacing | --letter-spacing-wider via tier 1 | 0.06em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-eyebrow-sm-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
text-transform | --typography-eyebrow-sm-text-transform | --text-transform-uppercase via tier 1 | uppercase | 1 fileFiles: packages/tokens/src/typography.css | |
md .typography-eyebrow-md used by components esa-command-palette esa-entity-search esa-search-panel esa-sidebar-nav 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: sans font-weight: semibold | font-family | --typography-eyebrow-md-font-family | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-eyebrow-md-font-size | --font-size-100 via tier 1 | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-eyebrow-md-font-weight | --typography-font-weight-semibold | --font-weight-550 · 550 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-eyebrow-md-letter-spacing | --letter-spacing-wide via tier 1 | 0.03em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-eyebrow-md-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
text-transform | --typography-eyebrow-md-text-transform | --text-transform-uppercase via tier 1 | uppercase | 1 fileFiles: packages/tokens/src/typography.css |
code 25
| Variant | Property | Token | References | Resolves to | Used by |
|---|---|---|---|---|---|
2xs .typography-code-2xs used by components none assembles from font-family: mono font-weight: regular | font-family | --typography-code-2xs-font-family | --typography-font-family-mono | --font-family-dm-mono · 'DM Mono', monospace | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-code-2xs-font-size | --font-size-050 via tier 1 | clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-code-2xs-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-code-2xs-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-code-2xs-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
xs .typography-code-xs used by components none assembles from font-family: mono font-weight: regular | font-family | --typography-code-xs-font-family | --typography-font-family-mono | --font-family-dm-mono · 'DM Mono', monospace | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-code-xs-font-size | --font-size-100 via tier 1 | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-code-xs-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-code-xs-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-code-xs-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
sm .typography-code-sm used by components none 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: mono font-weight: regular | font-family | --typography-code-sm-font-family | --typography-font-family-mono | --font-family-dm-mono · 'DM Mono', monospace | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-code-sm-font-size | --font-size-150 via tier 1 | clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-code-sm-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-code-sm-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-code-sm-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
md .typography-code-md used by components none 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: mono font-weight: regular | font-family | --typography-code-md-font-family | --typography-font-family-mono | --font-family-dm-mono · 'DM Mono', monospace | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-code-md-font-size | --font-size-200 via tier 1 | clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-code-md-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-code-md-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-code-md-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css | |
lg .typography-code-lg used by components none 1 fileFiles: apps/site/src/pages/foundations/typography.astro font-family: mono font-weight: regular | font-family | --typography-code-lg-font-family | --typography-font-family-mono | --font-family-dm-mono · 'DM Mono', monospace | 1 fileFiles: packages/tokens/src/typography.css |
font-size | --typography-code-lg-font-size | --font-size-300 via tier 1 | clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | 1 fileFiles: packages/tokens/src/typography.css | |
font-weight | --typography-code-lg-font-weight | --typography-font-weight-regular | --font-weight-350 · 350 | 1 fileFiles: packages/tokens/src/typography.css | |
letter-spacing | --typography-code-lg-letter-spacing | --letter-spacing-default via tier 1 | 0.01em | 1 fileFiles: packages/tokens/src/typography.css | |
line-height | --typography-code-lg-line-height | --line-height-normal via tier 1 | 1.6 | 1 fileFiles: packages/tokens/src/typography.css |
no intention in slot 1 0
Nothing should be here, and the emptiness is the claim — every composite name
fills slot 1 with a real intention. Anything whose first word is not one lands
here instead of being absorbed into a neighbour, exactly as
no intention in slot 2 works for colour.
| Variant | Property | Token | References | Resolves to | Used by |
|---|
Ingredients · property > variant
The faces and weights the composites are assembled from. Their shape is
property > variant — colour’s shape, not the composites’ —
because an ingredient has no intention slot: sans is not a job text does.
That is why they are a separate tree rather than a ninth intention, and why the
namespace carries two slot orders on purpose.
font-family 3
| Variant | Token | References | Resolves to | Used by |
|---|---|---|---|---|
display | --typography-font-family-display | --typography-font-family-sans | --font-family-dm-sans · 'DM Sans', sans-serif | 4 tok 3 comp 2 fileTokens: --typography-display-font-family, --typography-display-sm-font-family, --typography-heading-lg-font-family, --typography-heading-md-font-family Components: esa-app-shell, esa-page-header, esa-stat Files: packages/docs/src/DocsShell.astro, packages/spoke-template/src/pages/index.astro |
mono | --typography-font-family-mono | --font-family-dm-mono | 'DM Mono', monospace | 8 tok 11 fileTokens: --typography-code-2xs-font-family, --typography-code-lg-font-family, --typography-code-md-font-family, --typography-code-sm-font-family, --typography-code-xs-font-family, --typography-microcopy-code-lg-font-family, --typography-microcopy-code-md-font-family, --typography-microcopy-code-sm-font-family Files: packages/docs/src/ApiTable.astro, packages/docs/src/ColorFoundation.astro, packages/docs/src/ColorScale.astro, packages/docs/src/DocsShell.astro, packages/docs/src/PropsTable.astro, packages/docs/src/RadiusFoundation.astro, packages/docs/src/SpacingFoundation.astro, packages/docs/src/TypeFoundation.astro, packages/spoke-template/src/pages/design-system/foundations/iconography.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro |
sans | --typography-font-family-sans | --font-family-dm-sans | 'DM Sans', sans-serif | 38 tok 7 comp 3 fileTokens: --grid-font-family, --typography-body-2xs-font-family, --typography-body-lg-font-family, --typography-body-md-font-family, --typography-body-sm-font-family, --typography-body-xs-font-family, --typography-eyebrow-md-font-family, --typography-eyebrow-sm-font-family, --typography-font-family-display, --typography-label-2xs-font-family, --typography-label-2xs-strong-font-family, --typography-label-lg-font-family, --typography-label-lg-strong-font-family, --typography-label-md-font-family, --typography-label-md-strong-font-family, --typography-label-sm-font-family, --typography-label-sm-strong-font-family, --typography-label-xs-font-family, --typography-label-xs-strong-font-family, --typography-meta-font-family, --typography-microcopy-2xs-font-family, --typography-microcopy-2xs-strong-font-family, --typography-microcopy-2xs-subtle-font-family, --typography-microcopy-lg-font-family, --typography-microcopy-lg-strong-font-family, --typography-microcopy-lg-subtle-font-family, --typography-microcopy-md-font-family, --typography-microcopy-md-strong-font-family, --typography-microcopy-md-subtle-font-family, --typography-microcopy-sm-font-family, --typography-microcopy-sm-strong-font-family, --typography-microcopy-sm-subtle-font-family, --typography-microcopy-xs-font-family, --typography-microcopy-xs-strong-font-family, --typography-microcopy-xs-subtle-font-family, --typography-title-font-family, --typography-title-sm-strong-font-family, --typography-title-strong-font-family Components: esa-app-shell, esa-command-palette, esa-confirm-dialog, esa-dialog, esa-dropdown-menu, esa-entity-search, esa-popover Files: packages/docs/src/DocsShell.astro, packages/spoke-template/src/layouts/BaseLayout.astro, packages/spoke-template/src/pages/index.astro |
font-weight 5
| Variant | Token | References | Resolves to | Used by |
|---|---|---|---|---|
bold | --typography-font-weight-bold | --font-weight-650 | 650 | 2 tok 3 compTokens: --typography-display-font-weight, --typography-display-sm-font-weight Components: esa-app-shell, esa-page-header, esa-stat |
light | --typography-font-weight-light | --font-weight-300 | 300 | orphan |
medium | --typography-font-weight-medium | --font-weight-500 | 500 | 11 tok 1 comp 1 fileTokens: --typography-label-2xs-font-weight, --typography-label-lg-font-weight, --typography-label-md-font-weight, --typography-label-sm-font-weight, --typography-label-xs-font-weight, --typography-microcopy-2xs-font-weight, --typography-microcopy-lg-font-weight, --typography-microcopy-md-font-weight, --typography-microcopy-sm-font-weight, --typography-microcopy-xs-font-weight, --typography-title-font-weight Components: esa-stat Files: packages/spoke-template/src/pages/index.astro |
regular | --typography-font-weight-regular | --font-weight-350 | 350 | 19 tok 1 fileTokens: --typography-body-2xs-font-weight, --typography-body-lg-font-weight, --typography-body-md-font-weight, --typography-body-sm-font-weight, --typography-body-xs-font-weight, --typography-code-2xs-font-weight, --typography-code-lg-font-weight, --typography-code-md-font-weight, --typography-code-sm-font-weight, --typography-code-xs-font-weight, --typography-meta-font-weight, --typography-microcopy-2xs-subtle-font-weight, --typography-microcopy-code-lg-font-weight, --typography-microcopy-code-md-font-weight, --typography-microcopy-code-sm-font-weight, --typography-microcopy-lg-subtle-font-weight, --typography-microcopy-md-subtle-font-weight, --typography-microcopy-sm-subtle-font-weight, --typography-microcopy-xs-subtle-font-weight Files: packages/spoke-template/src/layouts/BaseLayout.astro |
semibold | --typography-font-weight-semibold | --font-weight-550 | 550 | 17 tok 2 comp 1 fileTokens: --grid-header-weight, --typography-eyebrow-md-font-weight, --typography-eyebrow-sm-font-weight, --typography-heading-lg-font-weight, --typography-heading-md-font-weight, --typography-label-2xs-strong-font-weight, --typography-label-lg-strong-font-weight, --typography-label-md-strong-font-weight, --typography-label-sm-strong-font-weight, --typography-label-xs-strong-font-weight, --typography-microcopy-2xs-strong-font-weight, --typography-microcopy-lg-strong-font-weight, --typography-microcopy-md-strong-font-weight, --typography-microcopy-sm-strong-font-weight, --typography-microcopy-xs-strong-font-weight, --typography-title-sm-strong-font-weight, --typography-title-strong-font-weight Components: esa-page-header, esa-sidebar-nav Files: packages/spoke-template/src/pages/index.astro |
Composites, grouped by intention
This section used to open by saying there were zero tier-2 typography tokens — that the
layer existed only as classes in typography.css, so Figma couldn’t consume
it and a spoke couldn’t re-point it. That gap is closed. Every cell below now names a
real tier-2 token, and the class is nothing but the assembly of them.
The matrix is the composite and its parts in one view: the row is the role, each column is one
property, and each cell shows the --typography-* token that supplies it, the
hops down to the tier-1 token it lands on (bold), and the value that token resolves
to — the same reading as the colour rows above, which name their tier-1 referent rather
than only its value. 48 composites across 35 intentions, grouped by
the intention DERIVED from each name rather than by an authored list. The six property columns are fixed, so an unset
property would read as a hole rather than an absence — there are none left: every composite now
pins all five (six for eyebrow), so no composite inherits a type property from
whatever it happens to sit inside.
Not counted above: 13 deprecated aliases, the
pre-composite class names. They are kept because spoke markup lives outside this repo and
deleting a selector would silently unstyle live pages rather than fail loudly. All but one
resolve through the identical tokens as their replacement, so they cannot drift.
They are parsed separately rather than filtered out, because
61 classes of which only
48 place into an intention reads as unaccounted-for composites
rather than as aliases doing their job.
.typography-label.typography-eyebrow.type-display.type-page-title.type-section-title.type-card-title.type-body-large.type-body.type-body-small.type-label.type-caption.type-overline.type-code To retire them: migrate spoke markup to the composite names (a find-and-replace —
the hub itself has zero usages), publish the plugin so spoke sessions stop teaching the old
names, then delete the DEPRECATED block in typography.css and the
./type-roles.css entry from the package exports.
display 2
The largest type in the system — hero numbers, landing statements, logotype-adjacent text. One size, one use.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-display | --typography-display-font-family → --typography-font-family-display → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-display-font-size → --font-size-800 clamp(2rem, 1.73rem + 1.35vw, 2.75rem) | --typography-display-font-weight → --typography-font-weight-bold → --font-weight-650 650 | --typography-display-line-height → --line-height-tight 1.3 | --typography-display-letter-spacing → --letter-spacing-tight -0.01em | unset |
.typography-display-sm | --typography-display-sm-font-family → --typography-font-family-display → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-display-sm-font-size → --font-size-700 clamp(1.625rem, 1.41rem + 1.08vw, 2.25rem) | --typography-display-sm-font-weight → --typography-font-weight-bold → --font-weight-650 650 | --typography-display-sm-line-height → --line-height-tight 1.3 | --typography-display-sm-letter-spacing → --letter-spacing-tight -0.01em | unset |
heading 2
Page and section headings. Both read the display face, both set tight leading and tracking, and ONLY the size differs between them — which is what makes this a genuine size axis rather than two things sharing a prefix.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-heading-lg | --typography-heading-lg-font-family → --typography-font-family-display → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-heading-lg-font-size → --font-size-600 clamp(1.375rem, 1.2rem + 0.88vw, 1.875rem) | --typography-heading-lg-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-heading-lg-line-height → --line-height-tight 1.3 | --typography-heading-lg-letter-spacing → --letter-spacing-tight -0.01em | unset |
.typography-heading-md | --typography-heading-md-font-family → --typography-font-family-display → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-heading-md-font-size → --font-size-500 clamp(1.125rem, 0.98rem + 0.72vw, 1.5rem) | --typography-heading-md-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-heading-md-line-height → --line-height-tight 1.3 | --typography-heading-md-letter-spacing → --letter-spacing-tight -0.01em | unset |
title 1
The heading inside a card or panel. Its own intention, not `heading-sm`: it reads the BODY face at normal leading and normal tracking, so every one of its five properties differs from `heading-md`. A size variant that also changes the typeface is not a size variant. The reference model draws this line one step higher (headline vs title); ours follows where the values actually break.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-title | --typography-title-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-title-font-size → --font-size-400 clamp(1rem, 0.88rem + 0.6vw, 1.25rem) | --typography-title-font-weight → --typography-font-weight-medium → --font-weight-500 500 | --typography-title-line-height → --line-height-normal 1.6 | --typography-title-letter-spacing → --letter-spacing-default 0.01em | unset |
body 3
Running prose and the default text of the interface, in three sizes.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-body-lg | --typography-body-lg-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-body-lg-font-size → --font-size-300 clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | --typography-body-lg-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-body-lg-line-height → --line-height-relaxed 1.8 | --typography-body-lg-letter-spacing → --letter-spacing-default 0.01em | unset |
.typography-body-md | --typography-body-md-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-body-md-font-size → --font-size-200 clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | --typography-body-md-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-body-md-line-height → --line-height-normal 1.6 | --typography-body-md-letter-spacing → --letter-spacing-default 0.01em | unset |
.typography-body-sm | --typography-body-sm-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-body-sm-font-size → --font-size-150 clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | --typography-body-sm-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-body-sm-line-height → --line-height-normal 1.6 | --typography-body-sm-letter-spacing → --letter-spacing-default 0.01em | unset |
body-xs 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-body-xs | --typography-body-xs-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-body-xs-font-size → --font-size-100 clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | --typography-body-xs-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-body-xs-line-height → --line-height-normal 1.6 | --typography-body-xs-letter-spacing → --letter-spacing-default 0.01em | unset |
body-2xs 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-body-2xs | --typography-body-2xs-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-body-2xs-font-size → --font-size-050 clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | --typography-body-2xs-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-body-2xs-line-height → --line-height-normal 1.6 | --typography-body-2xs-letter-spacing → --letter-spacing-default 0.01em | unset |
label-2xs 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-label-2xs | --typography-label-2xs-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-label-2xs-font-size → --font-size-050 clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | --typography-label-2xs-font-weight → --typography-font-weight-medium → --font-weight-500 500 | --typography-label-2xs-line-height → --line-height-normal 1.6 | --typography-label-2xs-letter-spacing → --letter-spacing-default 0.01em | unset |
label-xs 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-label-xs | --typography-label-xs-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-label-xs-font-size → --font-size-100 clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | --typography-label-xs-font-weight → --typography-font-weight-medium → --font-weight-500 500 | --typography-label-xs-line-height → --line-height-normal 1.6 | --typography-label-xs-letter-spacing → --letter-spacing-default 0.01em | unset |
label 3
Form labels, button text, and other UI chrome that names a control rather than reading as prose.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-label-sm | --typography-label-sm-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-label-sm-font-size → --font-size-150 clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | --typography-label-sm-font-weight → --typography-font-weight-medium → --font-weight-500 500 | --typography-label-sm-line-height → --line-height-normal 1.6 | --typography-label-sm-letter-spacing → --letter-spacing-default 0.01em | unset |
.typography-label-md | --typography-label-md-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-label-md-font-size → --font-size-200 clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | --typography-label-md-font-weight → --typography-font-weight-medium → --font-weight-500 500 | --typography-label-md-line-height → --line-height-normal 1.6 | --typography-label-md-letter-spacing → --letter-spacing-default 0.01em | unset |
.typography-label-lg | --typography-label-lg-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-label-lg-font-size → --font-size-300 clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | --typography-label-lg-font-weight → --typography-font-weight-medium → --font-weight-500 500 | --typography-label-lg-line-height → --line-height-normal 1.6 | --typography-label-lg-letter-spacing → --letter-spacing-default 0.01em | unset |
label-2xs-strong 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-label-2xs-strong | --typography-label-2xs-strong-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-label-2xs-strong-font-size → --font-size-050 clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | --typography-label-2xs-strong-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-label-2xs-strong-line-height → --line-height-normal 1.6 | --typography-label-2xs-strong-letter-spacing → --letter-spacing-default 0.01em | unset |
label-xs-strong 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-label-xs-strong | --typography-label-xs-strong-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-label-xs-strong-font-size → --font-size-100 clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | --typography-label-xs-strong-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-label-xs-strong-line-height → --line-height-normal 1.6 | --typography-label-xs-strong-letter-spacing → --letter-spacing-default 0.01em | unset |
label-sm-strong 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-label-sm-strong | --typography-label-sm-strong-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-label-sm-strong-font-size → --font-size-150 clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | --typography-label-sm-strong-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-label-sm-strong-line-height → --line-height-normal 1.6 | --typography-label-sm-strong-letter-spacing → --letter-spacing-default 0.01em | unset |
label-md-strong 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-label-md-strong | --typography-label-md-strong-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-label-md-strong-font-size → --font-size-200 clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | --typography-label-md-strong-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-label-md-strong-line-height → --line-height-normal 1.6 | --typography-label-md-strong-letter-spacing → --letter-spacing-default 0.01em | unset |
label-lg-strong 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-label-lg-strong | --typography-label-lg-strong-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-label-lg-strong-font-size → --font-size-300 clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | --typography-label-lg-strong-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-label-lg-strong-line-height → --line-height-normal 1.6 | --typography-label-lg-strong-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy-2xs 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-2xs | --typography-microcopy-2xs-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-2xs-font-size → --font-size-050 clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | --typography-microcopy-2xs-font-weight → --typography-font-weight-medium → --font-weight-500 500 | --typography-microcopy-2xs-line-height → --line-height-none 1 | --typography-microcopy-2xs-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy-xs 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-xs | --typography-microcopy-xs-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-xs-font-size → --font-size-100 clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | --typography-microcopy-xs-font-weight → --typography-font-weight-medium → --font-weight-500 500 | --typography-microcopy-xs-line-height → --line-height-none 1 | --typography-microcopy-xs-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy 3
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-sm | --typography-microcopy-sm-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-sm-font-size → --font-size-150 clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | --typography-microcopy-sm-font-weight → --typography-font-weight-medium → --font-weight-500 500 | --typography-microcopy-sm-line-height → --line-height-none 1 | --typography-microcopy-sm-letter-spacing → --letter-spacing-default 0.01em | unset |
.typography-microcopy-md | --typography-microcopy-md-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-md-font-size → --font-size-200 clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | --typography-microcopy-md-font-weight → --typography-font-weight-medium → --font-weight-500 500 | --typography-microcopy-md-line-height → --line-height-none 1 | --typography-microcopy-md-letter-spacing → --letter-spacing-default 0.01em | unset |
.typography-microcopy-lg | --typography-microcopy-lg-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-lg-font-size → --font-size-300 clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | --typography-microcopy-lg-font-weight → --typography-font-weight-medium → --font-weight-500 500 | --typography-microcopy-lg-line-height → --line-height-none 1 | --typography-microcopy-lg-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy-2xs-subtle 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-2xs-subtle | --typography-microcopy-2xs-subtle-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-2xs-subtle-font-size → --font-size-050 clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | --typography-microcopy-2xs-subtle-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-microcopy-2xs-subtle-line-height → --line-height-none 1 | --typography-microcopy-2xs-subtle-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy-xs-subtle 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-xs-subtle | --typography-microcopy-xs-subtle-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-xs-subtle-font-size → --font-size-100 clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | --typography-microcopy-xs-subtle-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-microcopy-xs-subtle-line-height → --line-height-none 1 | --typography-microcopy-xs-subtle-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy-sm-subtle 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-sm-subtle | --typography-microcopy-sm-subtle-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-sm-subtle-font-size → --font-size-150 clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | --typography-microcopy-sm-subtle-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-microcopy-sm-subtle-line-height → --line-height-none 1 | --typography-microcopy-sm-subtle-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy-md-subtle 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-md-subtle | --typography-microcopy-md-subtle-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-md-subtle-font-size → --font-size-200 clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | --typography-microcopy-md-subtle-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-microcopy-md-subtle-line-height → --line-height-none 1 | --typography-microcopy-md-subtle-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy-lg-subtle 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-lg-subtle | --typography-microcopy-lg-subtle-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-lg-subtle-font-size → --font-size-300 clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | --typography-microcopy-lg-subtle-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-microcopy-lg-subtle-line-height → --line-height-none 1 | --typography-microcopy-lg-subtle-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy-2xs-strong 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-2xs-strong | --typography-microcopy-2xs-strong-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-2xs-strong-font-size → --font-size-050 clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | --typography-microcopy-2xs-strong-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-microcopy-2xs-strong-line-height → --line-height-none 1 | --typography-microcopy-2xs-strong-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy-xs-strong 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-xs-strong | --typography-microcopy-xs-strong-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-xs-strong-font-size → --font-size-100 clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | --typography-microcopy-xs-strong-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-microcopy-xs-strong-line-height → --line-height-none 1 | --typography-microcopy-xs-strong-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy-sm-strong 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-sm-strong | --typography-microcopy-sm-strong-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-sm-strong-font-size → --font-size-150 clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | --typography-microcopy-sm-strong-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-microcopy-sm-strong-line-height → --line-height-none 1 | --typography-microcopy-sm-strong-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy-md-strong 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-md-strong | --typography-microcopy-md-strong-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-md-strong-font-size → --font-size-200 clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | --typography-microcopy-md-strong-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-microcopy-md-strong-line-height → --line-height-none 1 | --typography-microcopy-md-strong-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy-lg-strong 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-lg-strong | --typography-microcopy-lg-strong-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-microcopy-lg-strong-font-size → --font-size-300 clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | --typography-microcopy-lg-strong-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-microcopy-lg-strong-line-height → --line-height-none 1 | --typography-microcopy-lg-strong-letter-spacing → --letter-spacing-default 0.01em | unset |
microcopy-code 3
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-microcopy-code-sm | --typography-microcopy-code-sm-font-family → --typography-font-family-mono → --font-family-dm-mono 'DM Mono', monospace | --typography-microcopy-code-sm-font-size → --font-size-150 clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | --typography-microcopy-code-sm-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-microcopy-code-sm-line-height → --line-height-none 1 | --typography-microcopy-code-sm-letter-spacing → --letter-spacing-default 0.01em | unset |
.typography-microcopy-code-md | --typography-microcopy-code-md-font-family → --typography-font-family-mono → --font-family-dm-mono 'DM Mono', monospace | --typography-microcopy-code-md-font-size → --font-size-200 clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | --typography-microcopy-code-md-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-microcopy-code-md-line-height → --line-height-none 1 | --typography-microcopy-code-md-letter-spacing → --letter-spacing-default 0.01em | unset |
.typography-microcopy-code-lg | --typography-microcopy-code-lg-font-family → --typography-font-family-mono → --font-family-dm-mono 'DM Mono', monospace | --typography-microcopy-code-lg-font-size → --font-size-300 clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | --typography-microcopy-code-lg-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-microcopy-code-lg-line-height → --line-height-none 1 | --typography-microcopy-code-lg-letter-spacing → --letter-spacing-default 0.01em | unset |
title-strong 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-title-strong | --typography-title-strong-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-title-strong-font-size → --font-size-400 clamp(1rem, 0.88rem + 0.6vw, 1.25rem) | --typography-title-strong-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-title-strong-line-height → --line-height-normal 1.6 | --typography-title-strong-letter-spacing → --letter-spacing-default 0.01em | unset |
title-sm-strong 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-title-sm-strong | --typography-title-sm-strong-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-title-sm-strong-font-size → --font-size-250 clamp(0.8125rem, 0.71rem + 0.5vw, 1.0625rem) | --typography-title-sm-strong-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-title-sm-strong-line-height → --line-height-normal 1.6 | --typography-title-sm-strong-letter-spacing → --letter-spacing-default 0.01em | unset |
meta 1
Secondary annotation beside the thing it describes — help text, captions, timestamps, counts.
`meta` and `label` are the same size (--font-size-100) and differ only in weight — regular vs medium. An observation about the two intentions, not a defect inside this one: `meta` has a single composite, so there is nothing here to be inconsistent WITH.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-meta | --typography-meta-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-meta-font-size → --font-size-100 clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | --typography-meta-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-meta-line-height → --line-height-normal 1.6 | --typography-meta-letter-spacing → --letter-spacing-default 0.01em | unset |
eyebrow 2
The small caps marker above a heading or as a section marker. Its own intention rather than a variant of meta: it was `meta-caps`, which put a NON-size in the slot that carries lg/md/sm everywhere else.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-eyebrow-sm | --typography-eyebrow-sm-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-eyebrow-sm-font-size → --font-size-050 clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | --typography-eyebrow-sm-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-eyebrow-sm-line-height → --line-height-normal 1.6 | --typography-eyebrow-sm-letter-spacing → --letter-spacing-wider 0.06em | --typography-eyebrow-sm-text-transform → --text-transform-uppercase uppercase |
.typography-eyebrow-md | --typography-eyebrow-md-font-family → --typography-font-family-sans → --font-family-dm-sans 'DM Sans', sans-serif | --typography-eyebrow-md-font-size → --font-size-100 clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | --typography-eyebrow-md-font-weight → --typography-font-weight-semibold → --font-weight-550 550 | --typography-eyebrow-md-line-height → --line-height-normal 1.6 | --typography-eyebrow-md-letter-spacing → --letter-spacing-wide 0.03em | --typography-eyebrow-md-text-transform → --text-transform-uppercase uppercase |
code 3
Monospace — code, tokens, tabular figures. Three sizes matching body step for step, so inline code sits at the size of the prose around it: `code-md` inside `body-md`, `code-sm` inside `body-sm`.
Unlike body, the leading does NOT change at the small end — all three set line-height-normal, so this intention is a pure size axis.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-code-lg | --typography-code-lg-font-family → --typography-font-family-mono → --font-family-dm-mono 'DM Mono', monospace | --typography-code-lg-font-size → --font-size-300 clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | --typography-code-lg-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-code-lg-line-height → --line-height-normal 1.6 | --typography-code-lg-letter-spacing → --letter-spacing-default 0.01em | unset |
.typography-code-md | --typography-code-md-font-family → --typography-font-family-mono → --font-family-dm-mono 'DM Mono', monospace | --typography-code-md-font-size → --font-size-200 clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | --typography-code-md-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-code-md-line-height → --line-height-normal 1.6 | --typography-code-md-letter-spacing → --letter-spacing-default 0.01em | unset |
.typography-code-sm | --typography-code-sm-font-family → --typography-font-family-mono → --font-family-dm-mono 'DM Mono', monospace | --typography-code-sm-font-size → --font-size-150 clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | --typography-code-sm-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-code-sm-line-height → --line-height-normal 1.6 | --typography-code-sm-letter-spacing → --letter-spacing-default 0.01em | unset |
code-xs 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-code-xs | --typography-code-xs-font-family → --typography-font-family-mono → --font-family-dm-mono 'DM Mono', monospace | --typography-code-xs-font-size → --font-size-100 clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | --typography-code-xs-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-code-xs-line-height → --line-height-normal 1.6 | --typography-code-xs-letter-spacing → --letter-spacing-default 0.01em | unset |
code-2xs 1
No authored definition yet for this intention.
| Composite | font-family | font-size | font-weight | line-height | letter-spacing | text-transform |
|---|---|---|---|---|---|---|
.typography-code-2xs | --typography-code-2xs-font-family → --typography-font-family-mono → --font-family-dm-mono 'DM Mono', monospace | --typography-code-2xs-font-size → --font-size-050 clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | --typography-code-2xs-font-weight → --typography-font-weight-regular → --font-weight-350 350 | --typography-code-2xs-line-height → --line-height-normal 1.6 | --typography-code-2xs-letter-spacing → --letter-spacing-default 0.01em | unset |
Faces & weights — the ingredients, by property
font-family3
Spelled in the name — spelled in full — as of 2026-08-15. This row read `declared: false` for as long as the token was `--font-sans`, whose second slot is a CLASSIFICATION (sans) standing where the property belongs: it read as a family only because nothing else could plausibly consume it. `font-ingredients-to-typography-namespace` put the property in the name, so the audit no longer has to infer it.
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--typography-font-family-display | --typography-font-family-sans→--font-family-dm-sans→'DM Sans', sans-serif | 'DM Sans', sans-serif | 4 tok3 comp2 fileTokens:--typography-display-font-family, --typography-display-sm-font-family, --typography-heading-lg-font-family, --typography-heading-md-font-family Components:esa-app-shell, esa-page-header, esa-stat Files:packages/docs/src/DocsShell.astro, packages/spoke-template/src/pages/index.astro |
--typography-font-family-mono | --font-family-dm-mono→'DM Mono', monospace | 'DM Mono', monospace | 8 tok11 fileTokens:--typography-code-2xs-font-family, --typography-code-lg-font-family, --typography-code-md-font-family, --typography-code-sm-font-family, --typography-code-xs-font-family, --typography-microcopy-code-lg-font-family, --typography-microcopy-code-md-font-family, --typography-microcopy-code-sm-font-family Files:packages/docs/src/ApiTable.astro, packages/docs/src/ColorFoundation.astro, packages/docs/src/ColorScale.astro, packages/docs/src/DocsShell.astro, packages/docs/src/PropsTable.astro, packages/docs/src/RadiusFoundation.astro, packages/docs/src/SpacingFoundation.astro, packages/docs/src/TypeFoundation.astro, packages/spoke-template/src/pages/design-system/foundations/iconography.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro |
--typography-font-family-sans | --font-family-dm-sans→'DM Sans', sans-serif | 'DM Sans', sans-serif | 38 tok7 comp3 fileTokens:--grid-font-family, --typography-body-2xs-font-family, --typography-body-lg-font-family, --typography-body-md-font-family, --typography-body-sm-font-family, --typography-body-xs-font-family, --typography-eyebrow-md-font-family, --typography-eyebrow-sm-font-family, --typography-font-family-display, --typography-label-2xs-font-family, --typography-label-2xs-strong-font-family, --typography-label-lg-font-family, --typography-label-lg-strong-font-family, --typography-label-md-font-family, --typography-label-md-strong-font-family, --typography-label-sm-font-family, --typography-label-sm-strong-font-family, --typography-label-xs-font-family, --typography-label-xs-strong-font-family, --typography-meta-font-family, --typography-microcopy-2xs-font-family, --typography-microcopy-2xs-strong-font-family, --typography-microcopy-2xs-subtle-font-family, --typography-microcopy-lg-font-family, --typography-microcopy-lg-strong-font-family, --typography-microcopy-lg-subtle-font-family, --typography-microcopy-md-font-family, --typography-microcopy-md-strong-font-family, --typography-microcopy-md-subtle-font-family, --typography-microcopy-sm-font-family, --typography-microcopy-sm-strong-font-family, --typography-microcopy-sm-subtle-font-family, --typography-microcopy-xs-font-family, --typography-microcopy-xs-strong-font-family, --typography-microcopy-xs-subtle-font-family, --typography-title-font-family, --typography-title-sm-strong-font-family, --typography-title-strong-font-family Components:esa-app-shell, esa-command-palette, esa-confirm-dialog, esa-dialog, esa-dropdown-menu, esa-entity-search, esa-popover Files:packages/docs/src/DocsShell.astro, packages/spoke-template/src/layouts/BaseLayout.astro, packages/spoke-template/src/pages/index.astro |
font-weight5
Spelled in the name — spelled in full.
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--typography-font-weight-bold | --font-weight-650→650 | 650 | 2 tok3 compTokens:--typography-display-font-weight, --typography-display-sm-font-weight Components:esa-app-shell, esa-page-header, esa-stat |
--typography-font-weight-light | --font-weight-300→300 | 300 | orphan |
--typography-font-weight-medium | --font-weight-500→500 | 500 | 11 tok1 comp1 fileTokens:--typography-label-2xs-font-weight, --typography-label-lg-font-weight, --typography-label-md-font-weight, --typography-label-sm-font-weight, --typography-label-xs-font-weight, --typography-microcopy-2xs-font-weight, --typography-microcopy-lg-font-weight, --typography-microcopy-md-font-weight, --typography-microcopy-sm-font-weight, --typography-microcopy-xs-font-weight, --typography-title-font-weight Components:esa-stat Files:packages/spoke-template/src/pages/index.astro |
--typography-font-weight-regular | --font-weight-350→350 | 350 | 19 tok1 fileTokens:--typography-body-2xs-font-weight, --typography-body-lg-font-weight, --typography-body-md-font-weight, --typography-body-sm-font-weight, --typography-body-xs-font-weight, --typography-code-2xs-font-weight, --typography-code-lg-font-weight, --typography-code-md-font-weight, --typography-code-sm-font-weight, --typography-code-xs-font-weight, --typography-meta-font-weight, --typography-microcopy-2xs-subtle-font-weight, --typography-microcopy-code-lg-font-weight, --typography-microcopy-code-md-font-weight, --typography-microcopy-code-sm-font-weight, --typography-microcopy-lg-subtle-font-weight, --typography-microcopy-md-subtle-font-weight, --typography-microcopy-sm-subtle-font-weight, --typography-microcopy-xs-subtle-font-weight Files:packages/spoke-template/src/layouts/BaseLayout.astro |
--typography-font-weight-semibold | --font-weight-550→550 | 550 | 17 tok2 comp1 fileTokens:--grid-header-weight, --typography-eyebrow-md-font-weight, --typography-eyebrow-sm-font-weight, --typography-heading-lg-font-weight, --typography-heading-md-font-weight, --typography-label-2xs-strong-font-weight, --typography-label-lg-strong-font-weight, --typography-label-md-strong-font-weight, --typography-label-sm-strong-font-weight, --typography-label-xs-strong-font-weight, --typography-microcopy-2xs-strong-font-weight, --typography-microcopy-lg-strong-font-weight, --typography-microcopy-md-strong-font-weight, --typography-microcopy-sm-strong-font-weight, --typography-microcopy-xs-strong-font-weight, --typography-title-sm-strong-font-weight, --typography-title-strong-font-weight Components:esa-page-header, esa-sidebar-nav Files:packages/spoke-template/src/pages/index.astro |
border-radius 6
semantic/radius.json. `--radius-{control,surface,card,overlay,pill}` — five intentions over the tier-1 ramp. This is what let both themes stop re-pointing `--radius-200`, a primitive, which used to be the SPEC violation flagged under Health.
One property: border-radius — spelled in the name, the property, abbreviated to `radius` — the one abbreviation in the system, and unambiguous because no other CSS property shortens to it.
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--radius-chip | --radius-100→0.25rem | 0.25rem | 3 compComponents:esa-badge, esa-chip-group, esa-pill |
--radius-lg | --radius-400→0.75rem | 0.75rem | 4 compComponents:esa-command-palette, esa-confirm-dialog, esa-dialog, esa-entity-search |
--radius-md | --radius-200→0.5rem | 0.5rem | 3 tok34 compTokens:--button-radius-lg, --button-radius-md, --grid-radius Components:esa-alert-box, esa-app-shell, esa-avatar, esa-button-group, esa-button-toggle, esa-card, esa-chart, esa-checkbox, esa-checkbox-group, esa-collapsible, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-danger-zone, esa-date-picker, esa-dialog, esa-dropdown-menu, esa-entity-search, esa-error-summary, esa-file-upload, esa-filter-dropdown, esa-header-nav, esa-input-tag, esa-nav-dropdown, esa-popover, esa-search-panel, esa-select, esa-side-dialog, esa-sidebar-nav, esa-snackbar-item, esa-tab-layout, esa-text-field, esa-textarea |
--radius-pill | --radius-full→9999px | 9999px | 19 compComponents:esa-avatar, esa-back-to-top, esa-badge, esa-combobox, esa-confirm-dialog, esa-dropdown-menu, esa-entity-search, esa-filter-dropdown, esa-filter-pills, esa-input-tag, esa-loading-overlay, esa-loading-spinner, esa-pagination, esa-pill, esa-progress-bar, esa-select, esa-sidebar-nav, esa-switch-toggle, esa-tab-layout |
--radius-sm | --radius-100→0.25rem | 0.25rem | 2 tok29 comp1 fileTokens:--button-radius-sm, --button-radius-xs Components:esa-alert-box, esa-app-shell, esa-badge, esa-button-toggle, esa-checkbox, esa-checkbox-group, esa-chip-group, esa-color-picker, esa-combobox, esa-command-palette, esa-date-picker, esa-dropdown-menu, esa-file-list, esa-file-upload, esa-filter-clear-button, esa-filter-dropdown, esa-header-nav, esa-input-tag, esa-kbd, esa-pagination, esa-pill, esa-search-panel, esa-select, esa-side-dialog, esa-snackbar-item, esa-tab-layout, esa-text-field, esa-textarea, esa-tooltip Files:packages/tokens/src/focus.css |
--radius-xs | --radius-050→0.125rem | 0.125rem | 1 compComponents:esa-color-picker |
border-width 3
semantic/border.json. One role, not a t-shirt scale, because the audit found the system has one: 49 hairline borders across 25 components. Every other width in the kit is internal micro-geometry that SPEC excludes from the theming surface.
One property: border-width — spelled in the name, spelled in full.
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--border-width-default | --border-width-100→1px | 1px | 1 tok26 compTokens:--form-border-width Components:esa-alert-box, esa-app-shell, esa-button, esa-card, esa-chip-group, esa-collapsible, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-danger-zone, esa-dialog, esa-dropdown-menu, esa-entity-search, esa-error-summary, esa-file-list, esa-filter-dropdown, esa-header-nav, esa-kbd, esa-nav-dropdown, esa-pagination, esa-pill, esa-popover, esa-search-panel, esa-side-dialog, esa-sidebar-nav, esa-tab-layout |
--border-width-emphasis | --border-width-200→2px | 2px | 1 compComponents:esa-file-upload |
--border-width-focus | --border-width-200→2px | 2px | 1 tokTokens:--focus-ring-width |
box-shadow 6
semantic/effect.json. Named as an elevation scale rather than the box-shadow category, and the variant is a step number rather than an intention — but every component reads it instead of `--shadow-*`.
One property: box-shadow not in the name — named for the SCALE (elevation) rather than the property; the variant is a step number rather than an intention. Every component reads it, so the name is the debt, not the layer.
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--elevation-1 | --shadow-offset-x→0 | 0 1px 4px 0 rgba(0, 0, 0, 0.03) | 3 compComponents:esa-range-slider, esa-switch-toggle, esa-tab-layout |
--elevation-2 | --shadow-offset-x→0 | 0 2px 12px 0 rgba(0, 0, 0, 0.04) | 1 compComponents:esa-card |
--elevation-3 | --shadow-offset-x→0 | 0 4px 20px -4px rgba(0, 0, 0, 0.06) | 1 tok1 compTokens:--grid-shadow Components:esa-back-to-top |
--elevation-4 | --shadow-offset-x→0 | 0 6px 24px -6px rgba(0, 0, 0, 0.07) | 11 compComponents:esa-back-to-top, esa-combobox, esa-dropdown-menu, esa-filter-dropdown, esa-header-nav, esa-input-tag, esa-nav-dropdown, esa-popover, esa-select, esa-snackbar-item, esa-tooltip |
--elevation-5 | --shadow-offset-x→0 | 0 8px 32px -8px rgba(0, 0, 0, 0.08) | 2 compComponents:esa-search-panel, esa-side-dialog |
--elevation-6 | --shadow-offset-x→0 | 0 20px 60px 0 rgba(0, 0, 0, 0.2) | 2 compComponents:esa-command-palette, esa-entity-search |
transition / animation 9
semantic/motion.json. Named for the CSS property they land in — the same rule colour follows — so `--transition-*` belongs in a `transition:` declaration and `--animation-*` in an `animation:`. Two sets rather than one `--motion-*` set because they are not interchangeable: `infinite` cannot appear in a transition. Each composes tier-1 `--duration-*` and `--easing-*`; the animation set carries duration, easing and iteration but never the @keyframes name, which stays with the component.
animation6
Spelled in the name — spelled in full.
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--animation-enter | --duration-150→150ms | 150ms ease-out | 6 compComponents:esa-command-palette, esa-dropdown-menu, esa-entity-search, esa-popover, esa-side-dialog, esa-tooltip |
--animation-exit | --duration-150→150ms | 150ms ease-in | 1 compComponents:esa-side-dialog |
--animation-indeterminate | --duration-1500→1500ms | 1500ms ease-in-out infinite | 1 compComponents:esa-progress-bar |
--animation-overlay-enter | --duration-250→250ms | 250ms ease-out | 6 compComponents:esa-confirm-dialog, esa-dialog, esa-search-panel, esa-side-dialog, esa-sidebar-nav, esa-snackbar-item |
--animation-overlay-exit | --duration-200→200ms | 200ms ease-in | 1 compComponents:esa-side-dialog |
--animation-spin | --duration-750→750ms | 750ms linear infinite | 4 compComponents:esa-button, esa-combobox, esa-loading-overlay, esa-loading-spinner |
transition3
Spelled in the name — spelled in full — and separate from `animation` because they are not interchangeable: `infinite` cannot appear in a transition.
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--transition-base | --duration-200→200ms | 200ms ease | 2 compComponents:esa-back-to-top, esa-sidebar-nav |
--transition-fast | --duration-150→150ms | 150ms ease | 26 compComponents:esa-alert-box, esa-back-to-top, esa-button, esa-button-toggle, esa-checkbox, esa-checkbox-group, esa-chip-group, esa-color-picker, esa-combobox, esa-confirm-dialog, esa-date-picker, esa-dialog, esa-file-list, esa-file-upload, esa-filter-clear-button, esa-filter-dropdown, esa-filter-pills, esa-input-tag, esa-pagination, esa-pill, esa-radio-group, esa-range-slider, esa-select, esa-switch-toggle, esa-text-field, esa-textarea |
--transition-slow | --duration-300→300ms | 300ms ease | orphan |
z-index 7
semantic/effect.json. A stacking ORDER named by what stacks — dropdown, sidebar, header, modal, toast, tooltip — so the layer relationships are readable without comparing numbers. The taxonomy notes it is a genuine judgement call whether to tokenise stacking at all.
One property: z-index — spelled in the name, the property, abbreviated to `z`.
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--z-dropdown | 50 | 50 | 8 compComponents:esa-combobox, esa-dropdown-menu, esa-filter-dropdown, esa-header-nav, esa-input-tag, esa-nav-dropdown, esa-popover, esa-select |
--z-header | 200 | 200 | orphan |
--z-modal | 400 | 400 | 1 compComponents:esa-sidebar-nav |
--z-modal-backdrop | 300 | 300 | orphan |
--z-sidebar | 100 | 100 | 1 compComponents:esa-back-to-top |
--z-toast | 500 | 500 | 1 compComponents:esa-snackbar-container |
--z-tooltip | 600 | 600 | 1 compComponents:esa-tooltip |
touch target 1
semantic/effect.json. `--touch-target-min` is the WCAG 2.5.5 floor — a role, not a ramp step, and never re-pointed smaller.
One property: min-width / min-height not in the name — a CONCEPT with no single property behind it — the WCAG 2.5.5 floor, which a component applies to whichever dimension it controls.
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--touch-target-min | 44px | 44px | orphan |
unclassified 0
Nothing should be here. This group exists so a NEW tier-2 family announces itself instead of being swallowed by whichever group is defined as "the rest" — which is exactly how 107 tokens spent time filed under the heading "width / height". Anything appearing here needs a family added above.
No tokens.
Tier 1 · Core / universal
Tokens shared across ALL themes, exportable, and meant to be consumed directly by components in both design and code. A theme re-points brand ramps; it never re-points these. This is a second VIEW over the tier-1 tokens below, not an eighth category — a gray step is both “Color → gray ramp” and “core”, so it appears in both places rather than being moved out of the colour taxonomy.
neutral color palette core 60
The greyscale values the UI is built on — surfaces, text, borders. Defined once here rather than per theme because every theme shares them.
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-black-a-1 | rgba(0, 0, 0, 0.05) | rgba(0, 0, 0, 0.05) | 1 tokTokens:--color-background-overlay-strong-hover |
--color-black-a-2 | rgba(0, 0, 0, 0.1) | rgba(0, 0, 0, 0.1) | 1 tokTokens:--color-background-overlay-heavy-hover |
--color-black-a-3 | rgba(0, 0, 0, 0.15) | rgba(0, 0, 0, 0.15) | orphan |
--color-black-a-4 | rgba(0, 0, 0, 0.2) | rgba(0, 0, 0, 0.2) | orphan |
--color-black-a-5 | rgba(0, 0, 0, 0.3) | rgba(0, 0, 0, 0.3) | orphan |
--color-black-a-6 | rgba(0, 0, 0, 0.4) | rgba(0, 0, 0, 0.4) | orphan |
--color-black-a-7 | rgba(0, 0, 0, 0.5) | rgba(0, 0, 0, 0.5) | 1 tokTokens:--color-background-overlay-backdrop |
--color-black-a-8 | rgba(0, 0, 0, 0.6) | rgba(0, 0, 0, 0.6) | orphan |
--color-black-a-9 | rgba(0, 0, 0, 0.7) | rgba(0, 0, 0, 0.7) | orphan |
--color-black-a-10 | rgba(0, 0, 0, 0.8) | rgba(0, 0, 0, 0.8) | orphan |
--color-black-a-11 | rgba(0, 0, 0, 0.9) | rgba(0, 0, 0, 0.9) | orphan |
--color-black-a-12 | rgba(0, 0, 0, 0.95) | rgba(0, 0, 0, 0.95) | orphan |
--color-gray-1 | #fcfcfc | #fcfcfc | 10 tokTokens:--color-background-default, --color-background-elevation-floating, --color-background-elevation-raised, --color-content-default-knockout, --color-content-on-accent, --color-content-on-ai, --color-content-on-brand, --color-content-on-utility-danger, --color-content-on-utility-info, --color-content-on-utility-success |
--color-gray-2 | #f9f9f9 | #f9f9f9 | orphan |
--color-gray-3 | #f0f0f0 | #f0f0f0 | 3 tokTokens:--color-background-dataviz-diverging-4, --color-background-disabled, --color-background-elevation-sunken |
--color-gray-4 | #e8e8e8 | #e8e8e8 | 1 tokTokens:--color-background-default-hover |
--color-gray-5 | #e0e0e0 | #e0e0e0 | orphan |
--color-gray-6 | #d9d9d9 | #d9d9d9 | 2 tokTokens:--color-border-default-subtle, --color-border-disabled |
--color-gray-7 | #cecece | #cecece | 1 tokTokens:--color-border-default |
--color-gray-8 | #bbbbbb | #bbbbbb | 1 tokTokens:--color-border-default-strong |
--color-gray-9 | #8d8d8d | #8d8d8d | 1 tokTokens:--color-content-disabled |
--color-gray-10 | #838383 | #838383 | orphan |
--color-gray-11 | #646464 | #646464 | 3 tokTokens:--color-background-default-knockout-hover, --color-content-default-secondary, --color-content-default-tertiary |
--color-gray-12 | #202020 | #202020 | 2 tokTokens:--color-background-default-knockout, --color-content-default |
--color-gray-a-1 | rgba(0, 0, 0, 0.01) | rgba(0, 0, 0, 0.01) | orphan |
--color-gray-a-2 | rgba(0, 0, 0, 0.02) | rgba(0, 0, 0, 0.02) | orphan |
--color-gray-a-3 | rgba(0, 0, 0, 0.06) | rgba(0, 0, 0, 0.06) | orphan |
--color-gray-a-4 | rgba(0, 0, 0, 0.09) | rgba(0, 0, 0, 0.09) | orphan |
--color-gray-a-5 | rgba(0, 0, 0, 0.12) | rgba(0, 0, 0, 0.12) | orphan |
--color-gray-a-6 | rgba(0, 0, 0, 0.15) | rgba(0, 0, 0, 0.15) | orphan |
--color-gray-a-7 | rgba(0, 0, 0, 0.19) | rgba(0, 0, 0, 0.19) | orphan |
--color-gray-a-8 | rgba(0, 0, 0, 0.27) | rgba(0, 0, 0, 0.27) | orphan |
--color-gray-a-9 | rgba(0, 0, 0, 0.45) | rgba(0, 0, 0, 0.45) | orphan |
--color-gray-a-10 | rgba(0, 0, 0, 0.49) | rgba(0, 0, 0, 0.49) | orphan |
--color-gray-a-11 | rgba(0, 0, 0, 0.61) | rgba(0, 0, 0, 0.61) | orphan |
--color-gray-a-12 | rgba(0, 0, 0, 0.87) | rgba(0, 0, 0, 0.87) | orphan |
--color-gray-dark-1 | #111111 | #111111 | orphan |
--color-gray-dark-2 | #191919 | #191919 | orphan |
--color-gray-dark-3 | #222222 | #222222 | orphan |
--color-gray-dark-4 | #2a2a2a | #2a2a2a | orphan |
--color-gray-dark-5 | #313131 | #313131 | orphan |
--color-gray-dark-6 | #3a3a3a | #3a3a3a | orphan |
--color-gray-dark-7 | #484848 | #484848 | 1 tokTokens:--color-border-default-knockout |
--color-gray-dark-8 | #606060 | #606060 | orphan |
--color-gray-dark-9 | #6e6e6e | #6e6e6e | orphan |
--color-gray-dark-10 | #7b7b7b | #7b7b7b | orphan |
--color-gray-dark-11 | #b4b4b4 | #b4b4b4 | orphan |
--color-gray-dark-12 | #ededef | #ededef | orphan |
--color-white-a-1 | rgba(255, 255, 255, 0.05) | rgba(255, 255, 255, 0.05) | orphan |
--color-white-a-2 | rgba(255, 255, 255, 0.1) | rgba(255, 255, 255, 0.1) | orphan |
--color-white-a-3 | rgba(255, 255, 255, 0.15) | rgba(255, 255, 255, 0.15) | orphan |
--color-white-a-4 | rgba(255, 255, 255, 0.2) | rgba(255, 255, 255, 0.2) | orphan |
--color-white-a-5 | rgba(255, 255, 255, 0.3) | rgba(255, 255, 255, 0.3) | orphan |
--color-white-a-6 | rgba(255, 255, 255, 0.4) | rgba(255, 255, 255, 0.4) | orphan |
--color-white-a-7 | rgba(255, 255, 255, 0.5) | rgba(255, 255, 255, 0.5) | orphan |
--color-white-a-8 | rgba(255, 255, 255, 0.6) | rgba(255, 255, 255, 0.6) | orphan |
--color-white-a-9 | rgba(255, 255, 255, 0.7) | rgba(255, 255, 255, 0.7) | orphan |
--color-white-a-10 | rgba(255, 255, 255, 0.8) | rgba(255, 255, 255, 0.8) | 1 tokTokens:--color-background-overlay-scrim |
--color-white-a-11 | rgba(255, 255, 255, 0.9) | rgba(255, 255, 255, 0.9) | orphan |
--color-white-a-12 | rgba(255, 255, 255, 0.95) | rgba(255, 255, 255, 0.95) | orphan |
spacing core 15
Explicit values on one scale. Core because every theme follows the same grid — density is not a branding axis.
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--spacing-050 | 0.125rem | 0.125rem | 10 comp1 fileComponents:esa-alert-box, esa-card, esa-combobox, esa-file-list, esa-filter-pills, esa-input-tag, esa-page-header, esa-select, esa-stat, esa-tab-layout Files:packages/tokens/src/layouts.css |
--spacing-100 | 0.25rem | 0.25rem | 2 tok37 comp4 fileTokens:--form-help-gap, --form-label-gap Components:esa-app-shell, esa-badge, esa-breadcrumbs, esa-button-toggle, esa-card, esa-checkbox-group, esa-chip-group, esa-color-picker, esa-combobox, esa-command-palette, esa-date-picker, esa-dropdown-menu, esa-empty-state, esa-entity-search, esa-error-summary, esa-field-error, esa-file-upload, esa-filter-clear-button, esa-filter-dropdown, esa-filter-pills, esa-header-nav, esa-input-tag, esa-link-column, esa-page-header, esa-pagination, esa-pill, esa-pillbox, esa-progress-bar, esa-radio-group, esa-range-slider, esa-search-panel, esa-select, esa-sidebar-nav, esa-snackbar-item, esa-tab-layout, esa-text-field, esa-textarea Files:packages/docs/src/ApiTable.astro, packages/docs/src/Preview.astro, packages/spoke-template/src/pages/index.astro, packages/tokens/src/layouts.css |
--spacing-150 | 0.375rem | 0.375rem | 11 comp3 fileComponents:esa-badge, esa-button-toggle, esa-chip-group, esa-confirm-dialog, esa-entity-search, esa-file-list, esa-filter-dropdown, esa-header-nav, esa-pill, esa-tab-layout, esa-tooltip Files:packages/docs/src/ColorScale.astro, packages/docs/src/DocsShell.astro, packages/spoke-template/src/pages/index.astro |
--spacing-200 | 0.5rem | 0.5rem | 3 tok45 comp8 fileTokens:--grid-cell-padding-y, --grid-toolbar-gap, --grid-toolbar-padding Components:esa-app-shell, esa-badge, esa-breadcrumbs, esa-button, esa-button-toggle, esa-card, esa-checkbox, esa-checkbox-group, esa-chip-group, esa-collapsible, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-danger-zone, esa-date-picker, esa-dialog, esa-dropdown-menu, esa-empty-state, esa-entity-search, esa-error-summary, esa-file-list, esa-file-upload, esa-filter-clear-button, esa-filter-container, esa-filter-dropdown, esa-filter-pills, esa-header-nav, esa-input-tag, esa-link-column, esa-nav-dropdown, esa-page-header, esa-pagination, esa-pill, esa-pillbox, esa-radio-group, esa-search-panel, esa-select, esa-sidebar-nav, esa-snackbar-container, esa-snackbar-item, esa-switch-toggle, esa-tab-layout, esa-text-field, esa-textarea Files:packages/docs/src/ColorScale.astro, packages/docs/src/DocsShell.astro, packages/docs/src/TypeFoundation.astro, packages/spoke-template/src/pages/design-system/foundations/iconography.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro, packages/spoke-template/src/pages/patterns/index.astro, packages/tokens/src/layouts.css |
--spacing-250 | 0.625rem | 0.625rem | 13 comp5 fileComponents:esa-badge, esa-button, esa-button-toggle, esa-chip-group, esa-color-picker, esa-combobox, esa-date-picker, esa-entity-search, esa-input-tag, esa-select, esa-text-field, esa-textarea, esa-tooltip Files:packages/docs/src/Api.astro, packages/docs/src/ApiTable.astro, packages/docs/src/DocsShell.astro, packages/docs/src/SpacingFoundation.astro, packages/spoke-template/src/pages/index.astro |
--spacing-300 | 0.75rem | 0.75rem | 3 tok41 comp11 fileTokens:--file-list-row-padding-x, --grid-cell-padding-x, --grid-toolbar-padding Components:esa-alert-box, esa-app-shell, esa-badge, esa-button, esa-button-toggle, esa-card, esa-chart, esa-chip-group, esa-collapsible, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-danger-zone, esa-date-picker, esa-dialog, esa-dropdown-menu, esa-empty-state, esa-entity-search, esa-error-summary, esa-file-list, esa-file-upload, esa-filter-dropdown, esa-filter-pills, esa-header-nav, esa-input-tag, esa-loading-overlay, esa-nav-dropdown, esa-page-header, esa-pill, esa-pillbox, esa-popover, esa-range-slider, esa-search-panel, esa-select, esa-side-dialog, esa-sidebar-nav, esa-snackbar-item, esa-tab-layout, esa-text-field, esa-textarea Files:packages/docs/src/ApiTable.astro, packages/docs/src/ColorFoundation.astro, packages/docs/src/DocsShell.astro, packages/docs/src/Preview.astro, packages/docs/src/PropsTable.astro, packages/docs/src/RadiusFoundation.astro, packages/docs/src/SpacingFoundation.astro, packages/spoke-template/src/pages/design-system/foundations/iconography.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro, packages/tokens/src/layouts.css |
--spacing-400 | 1rem | 1rem | 30 comp12 fileComponents:esa-alert-box, esa-app-bar, esa-button, esa-button-toggle, esa-card, esa-checkbox-group, esa-chip-group, esa-collapsible, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-date-picker, esa-empty-state, esa-entity-search, esa-error-summary, esa-file-upload, esa-filter-dropdown, esa-header-nav, esa-input-tag, esa-pagination, esa-radio-group, esa-search-panel, esa-select, esa-side-dialog, esa-sidebar-nav, esa-snackbar-item, esa-tab-layout, esa-text-field, esa-textarea Files:packages/docs/src/Api.astro, packages/docs/src/ApiTable.astro, packages/docs/src/DocsShell.astro, packages/docs/src/Preview.astro, packages/docs/src/PropsTable.astro, packages/docs/src/RadiusFoundation.astro, packages/docs/src/SpacingFoundation.astro, packages/docs/src/TypeFoundation.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro, packages/spoke-template/src/pages/patterns/index.astro, packages/tokens/src/layouts.css |
--spacing-500 | 1.5rem | 1.5rem | 11 comp11 fileComponents:esa-app-shell, esa-back-to-top, esa-card, esa-confirm-dialog, esa-dialog, esa-filter-dropdown, esa-page-header, esa-search-panel, esa-side-dialog, esa-snackbar-container, esa-tab-layout Files:packages/docs/src/ApiTable.astro, packages/docs/src/ColorScale.astro, packages/docs/src/DocsShell.astro, packages/docs/src/Preview.astro, packages/docs/src/RadiusFoundation.astro, packages/docs/src/SpacingFoundation.astro, packages/docs/src/TypeFoundation.astro, packages/spoke-template/src/pages/design-system/foundations/iconography.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro, packages/tokens/src/layouts.css |
--spacing-600 | 2rem | 2rem | 7 comp5 fileComponents:esa-app-bar, esa-command-palette, esa-container, esa-empty-state, esa-entity-search, esa-file-upload, esa-header-nav Files:packages/docs/src/ColorFoundation.astro, packages/docs/src/DocsShell.astro, packages/docs/src/Preview.astro, packages/spoke-template/src/pages/index.astro, packages/tokens/src/layouts.css |
--spacing-650 | 2.5rem | 2.5rem | orphan |
--spacing-700 | 3rem | 3rem | 3 comp3 fileComponents:esa-card, esa-entity-search, esa-search-panel Files:packages/docs/src/DocsShell.astro, packages/docs/src/SpacingFoundation.astro, packages/tokens/src/layouts.css |
--spacing-800 | 4rem | 4rem | 1 comp1 fileComponents:esa-empty-state Files:packages/spoke-template/src/pages/index.astro |
--spacing-900 | 6rem | 6rem | 2 fileFiles:packages/docs/src/DocsShell.astro, packages/spoke-template/src/pages/index.astro |
--spacing-950 | 7.5rem | 7.5rem | orphan |
--spacing-1000 | 15rem | 15rem | orphan |
Verified against themes.css: neither shipped theme (beacon, qanat) re-points any
token in these sets, so the core contract holds today. Z-index is a further candidate —
it is theme-invariant here and is conventionally managed as core/shared — but it is left out
above rather than promoted silently. A third set, the utility palette, used to sit here: it
matched the --color-status-* aliases, which have since been deleted in favour of
the tier-2 roles they fed. The concept moved tiers rather than disappearing, and Core is a
view over tier 1 — so it no longer has members to show.
Tier 1 · Primitive
Tier 1 — the raw ramps, compiled from tokens/primitive/*.json. These never move, not in the hub and not in a theme. "Used by" below is the blast radius if one ever did.
Reading these tables. * after a token name — it carries a $description in the
DTCG source; hover the row to read it. diverges — the STRUCTURE departs from the model
(a wrong or missing axis), not that work is outstanding. Adoption debt gets its own
line and no chip, because the two call for opposite responses: rethink the tier, versus
go and edit call sites. orphan — nothing reads this token.
Color 792
The primitive ramp VALUES for each available color — one row per step. This hub names its ramps UNCATEGORISED (grass-9, gray-3) rather than categorised (brand-grass-9): the brand/neutral/utility distinction is made at tier 2, where a semantic role points at a step. Ramps are Radix-derived, 12 steps each, with separate -dark and -a (alpha) variants. The neutral (gray) ramp is shared by every theme rather than redefined per theme, which is why themes re-point semantics instead of shipping their own neutrals.
amber12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-amber-1 | #fefdfb | #fefdfb | orphan |
--color-amber-2 | #fefbe9 | #fefbe9 | orphan |
--color-amber-3 | #fff7c2 | #fff7c2 | orphan |
--color-amber-4 | #ffee9c | #ffee9c | orphan |
--color-amber-5 | #fbe577 | #fbe577 | orphan |
--color-amber-6 | #f3d673 | #f3d673 | orphan |
--color-amber-7 | #e9c162 | #e9c162 | orphan |
--color-amber-8 | #e2a336 | #e2a336 | orphan |
--color-amber-9 | #ffc53d | #ffc53d | orphan |
--color-amber-10 | #ffba18 | #ffba18 | orphan |
--color-amber-11 | #ab6400 | #ab6400 | orphan |
--color-amber-12 | #4f3422 | #4f3422 | orphan |
amber-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-amber-dark-1 | #16120c | #16120c | orphan |
--color-amber-dark-2 | #1d180f | #1d180f | orphan |
--color-amber-dark-3 | #302008 | #302008 | orphan |
--color-amber-dark-4 | #3f2700 | #3f2700 | orphan |
--color-amber-dark-5 | #4d3000 | #4d3000 | orphan |
--color-amber-dark-6 | #5c3d05 | #5c3d05 | orphan |
--color-amber-dark-7 | #714f19 | #714f19 | orphan |
--color-amber-dark-8 | #8f6424 | #8f6424 | orphan |
--color-amber-dark-9 | #ffc53d | #ffc53d | orphan |
--color-amber-dark-10 | #ffd60a | #ffd60a | orphan |
--color-amber-dark-11 | #ffca16 | #ffca16 | orphan |
--color-amber-dark-12 | #ffe7b3 | #ffe7b3 | orphan |
black-acore12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-black-a-1 | rgba(0, 0, 0, 0.05) | rgba(0, 0, 0, 0.05) | 1 tokTokens:--color-background-overlay-strong-hover |
--color-black-a-2 | rgba(0, 0, 0, 0.1) | rgba(0, 0, 0, 0.1) | 1 tokTokens:--color-background-overlay-heavy-hover |
--color-black-a-3 | rgba(0, 0, 0, 0.15) | rgba(0, 0, 0, 0.15) | orphan |
--color-black-a-4 | rgba(0, 0, 0, 0.2) | rgba(0, 0, 0, 0.2) | orphan |
--color-black-a-5 | rgba(0, 0, 0, 0.3) | rgba(0, 0, 0, 0.3) | orphan |
--color-black-a-6 | rgba(0, 0, 0, 0.4) | rgba(0, 0, 0, 0.4) | orphan |
--color-black-a-7 | rgba(0, 0, 0, 0.5) | rgba(0, 0, 0, 0.5) | 1 tokTokens:--color-background-overlay-backdrop |
--color-black-a-8 | rgba(0, 0, 0, 0.6) | rgba(0, 0, 0, 0.6) | orphan |
--color-black-a-9 | rgba(0, 0, 0, 0.7) | rgba(0, 0, 0, 0.7) | orphan |
--color-black-a-10 | rgba(0, 0, 0, 0.8) | rgba(0, 0, 0, 0.8) | orphan |
--color-black-a-11 | rgba(0, 0, 0, 0.9) | rgba(0, 0, 0, 0.9) | orphan |
--color-black-a-12 | rgba(0, 0, 0, 0.95) | rgba(0, 0, 0, 0.95) | orphan |
blue12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-blue-1 | #fbfdff | #fbfdff | 1 tokTokens:--color-background-utility-info-subtle |
--color-blue-2 | #f4faff | #f4faff | 1 compComponents:esa-pill |
--color-blue-3 | #e6f4fe | #e6f4fe | 1 tokTokens:--color-background-utility-info-muted |
--color-blue-4 | #d5efff | #d5efff | orphan |
--color-blue-5 | #c2e5ff | #c2e5ff | orphan |
--color-blue-6 | #acd8fc | #acd8fc | 1 tok1 compTokens:--color-border-utility-info Components:esa-pill |
--color-blue-7 | #8ec8f6 | #8ec8f6 | 1 tokTokens:--color-background-dataviz-diverging-3 |
--color-blue-8 | #5eb1ef | #5eb1ef | orphan |
--color-blue-9 | #0090ff | #0090ff | 2 tok1 fileTokens:--color-background-dataviz-categorical-4, --color-background-dataviz-diverging-2 Files:packages/spoke-template/src/styles/theme-__SPOKE_SLUG__.css |
--color-blue-10 | #0588f0 | #0588f0 | 1 fileFiles:packages/spoke-template/src/styles/theme-__SPOKE_SLUG__.css |
--color-blue-11 | #0d74ce | #0d74ce | 3 tokTokens:--color-background-dataviz-diverging-1, --color-background-utility-info, --color-content-utility-info |
--color-blue-12 | #113264 | #113264 | 2 tok1 fileTokens:--color-background-utility-info-hover, --color-content-utility-info Files:packages/tokens/src/assurance.css |
blue-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-blue-dark-1 | #0d1520 | #0d1520 | orphan |
--color-blue-dark-2 | #111927 | #111927 | orphan |
--color-blue-dark-3 | #0d2847 | #0d2847 | orphan |
--color-blue-dark-4 | #003362 | #003362 | orphan |
--color-blue-dark-5 | #004074 | #004074 | orphan |
--color-blue-dark-6 | #104d87 | #104d87 | orphan |
--color-blue-dark-7 | #205d9e | #205d9e | orphan |
--color-blue-dark-8 | #2870bd | #2870bd | orphan |
--color-blue-dark-9 | #0090ff | #0090ff | orphan |
--color-blue-dark-10 | #3b9eff | #3b9eff | orphan |
--color-blue-dark-11 | #70b8ff | #70b8ff | orphan |
--color-blue-dark-12 | #c2e6ff | #c2e6ff | orphan |
bronze12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-bronze-1 | #fdfcfc | #fdfcfc | orphan |
--color-bronze-2 | #fdf7f5 | #fdf7f5 | orphan |
--color-bronze-3 | #f6edea | #f6edea | orphan |
--color-bronze-4 | #efe4df | #efe4df | orphan |
--color-bronze-5 | #e7d9d3 | #e7d9d3 | orphan |
--color-bronze-6 | #dfcdc5 | #dfcdc5 | orphan |
--color-bronze-7 | #d3bcb3 | #d3bcb3 | orphan |
--color-bronze-8 | #c2a499 | #c2a499 | orphan |
--color-bronze-9 | #a18072 | #a18072 | orphan |
--color-bronze-10 | #957468 | #957468 | orphan |
--color-bronze-11 | #7d5e54 | #7d5e54 | orphan |
--color-bronze-12 | #43302b | #43302b | orphan |
bronze-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-bronze-dark-1 | #141110 | #141110 | orphan |
--color-bronze-dark-2 | #1c1917 | #1c1917 | orphan |
--color-bronze-dark-3 | #262220 | #262220 | orphan |
--color-bronze-dark-4 | #302a27 | #302a27 | orphan |
--color-bronze-dark-5 | #3b3330 | #3b3330 | orphan |
--color-bronze-dark-6 | #493e3a | #493e3a | orphan |
--color-bronze-dark-7 | #5a4c47 | #5a4c47 | orphan |
--color-bronze-dark-8 | #6f5f58 | #6f5f58 | orphan |
--color-bronze-dark-9 | #a18072 | #a18072 | orphan |
--color-bronze-dark-10 | #ae8c7e | #ae8c7e | orphan |
--color-bronze-dark-11 | #d4b3a5 | #d4b3a5 | orphan |
--color-bronze-dark-12 | #ede0d9 | #ede0d9 | orphan |
brown12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-brown-1 | #fefdfc | #fefdfc | orphan |
--color-brown-2 | #fcf9f6 | #fcf9f6 | orphan |
--color-brown-3 | #f6eee7 | #f6eee7 | orphan |
--color-brown-4 | #f0e4d9 | #f0e4d9 | orphan |
--color-brown-5 | #ebdaca | #ebdaca | orphan |
--color-brown-6 | #e4cdb7 | #e4cdb7 | orphan |
--color-brown-7 | #dcbc9f | #dcbc9f | orphan |
--color-brown-8 | #cea37e | #cea37e | orphan |
--color-brown-9 | #ad7f58 | #ad7f58 | orphan |
--color-brown-10 | #a07553 | #a07553 | orphan |
--color-brown-11 | #815e46 | #815e46 | orphan |
--color-brown-12 | #3e332e | #3e332e | orphan |
brown-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-brown-dark-1 | #12110f | #12110f | orphan |
--color-brown-dark-2 | #1c1816 | #1c1816 | orphan |
--color-brown-dark-3 | #28211d | #28211d | orphan |
--color-brown-dark-4 | #322922 | #322922 | orphan |
--color-brown-dark-5 | #3e3128 | #3e3128 | orphan |
--color-brown-dark-6 | #4d3c2f | #4d3c2f | orphan |
--color-brown-dark-7 | #614a39 | #614a39 | orphan |
--color-brown-dark-8 | #7c5f46 | #7c5f46 | orphan |
--color-brown-dark-9 | #ad7f58 | #ad7f58 | orphan |
--color-brown-dark-10 | #b88c67 | #b88c67 | orphan |
--color-brown-dark-11 | #dbb594 | #dbb594 | orphan |
--color-brown-dark-12 | #f2e1ca | #f2e1ca | orphan |
copper12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-copper-1 | #fdfcfc | #fdfcfc | 1 tokTokens:--color-background-ai-subtle |
--color-copper-2 | #fdf7f5 | #fdf7f5 | orphan |
--color-copper-3 | #f6edea | #f6edea | orphan |
--color-copper-4 | #efe4df | #efe4df | orphan |
--color-copper-5 | #e7d9d3 | #e7d9d3 | orphan |
--color-copper-6 | #dfcdc5 | #dfcdc5 | orphan |
--color-copper-7 | #d3bcb3 | #d3bcb3 | orphan |
--color-copper-8 | #c2a499 | #c2a499 | orphan |
--color-copper-9 | #a18072 | #a18072 | 1 tokTokens:--color-background-ai |
--color-copper-10 | #957468 | #957468 | 1 tokTokens:--color-background-ai-hover |
--color-copper-11 | #7d5e54 | #7d5e54 | 2 tok1 fileTokens:--color-background-ai, --color-content-ai Files:packages/tokens/src/assurance.css |
--color-copper-12 | #43302b | #43302b | 1 tok1 fileTokens:--color-background-ai-hover Files:packages/tokens/src/assurance.css |
crimson12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-crimson-1 | #fffcfd | #fffcfd | orphan |
--color-crimson-2 | #fef7f9 | #fef7f9 | orphan |
--color-crimson-3 | #ffe9f0 | #ffe9f0 | orphan |
--color-crimson-4 | #fedce7 | #fedce7 | orphan |
--color-crimson-5 | #facedd | #facedd | orphan |
--color-crimson-6 | #f3bed1 | #f3bed1 | orphan |
--color-crimson-7 | #eaacc3 | #eaacc3 | orphan |
--color-crimson-8 | #e093b2 | #e093b2 | orphan |
--color-crimson-9 | #e93d82 | #e93d82 | orphan |
--color-crimson-10 | #df3478 | #df3478 | orphan |
--color-crimson-11 | #cb1d63 | #cb1d63 | 1 tokTokens:--color-background-dataviz-categorical-5 |
--color-crimson-12 | #621639 | #621639 | orphan |
crimson-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-crimson-dark-1 | #191114 | #191114 | orphan |
--color-crimson-dark-2 | #201318 | #201318 | orphan |
--color-crimson-dark-3 | #381525 | #381525 | orphan |
--color-crimson-dark-4 | #4d122f | #4d122f | orphan |
--color-crimson-dark-5 | #5c1839 | #5c1839 | orphan |
--color-crimson-dark-6 | #6d2545 | #6d2545 | orphan |
--color-crimson-dark-7 | #873356 | #873356 | orphan |
--color-crimson-dark-8 | #b0436e | #b0436e | orphan |
--color-crimson-dark-9 | #e93d82 | #e93d82 | orphan |
--color-crimson-dark-10 | #ee518a | #ee518a | orphan |
--color-crimson-dark-11 | #ff92ad | #ff92ad | orphan |
--color-crimson-dark-12 | #fdd3e8 | #fdd3e8 | orphan |
cyan12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-cyan-1 | #fafdfe | #fafdfe | orphan |
--color-cyan-2 | #f2fafb | #f2fafb | orphan |
--color-cyan-3 | #def7f9 | #def7f9 | orphan |
--color-cyan-4 | #caf1f6 | #caf1f6 | orphan |
--color-cyan-5 | #b5e9f0 | #b5e9f0 | orphan |
--color-cyan-6 | #9ddde7 | #9ddde7 | orphan |
--color-cyan-7 | #7dcedc | #7dcedc | orphan |
--color-cyan-8 | #3db9cf | #3db9cf | orphan |
--color-cyan-9 | #00a2c7 | #00a2c7 | orphan |
--color-cyan-10 | #0797b9 | #0797b9 | 1 tokTokens:--color-background-dataviz-categorical-6 |
--color-cyan-11 | #107d98 | #107d98 | orphan |
--color-cyan-12 | #0d3c48 | #0d3c48 | orphan |
cyan-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-cyan-dark-1 | #0b161a | #0b161a | orphan |
--color-cyan-dark-2 | #101b20 | #101b20 | orphan |
--color-cyan-dark-3 | #082c36 | #082c36 | orphan |
--color-cyan-dark-4 | #003848 | #003848 | orphan |
--color-cyan-dark-5 | #004558 | #004558 | orphan |
--color-cyan-dark-6 | #045468 | #045468 | orphan |
--color-cyan-dark-7 | #12677e | #12677e | orphan |
--color-cyan-dark-8 | #11809c | #11809c | orphan |
--color-cyan-dark-9 | #00a2c7 | #00a2c7 | orphan |
--color-cyan-dark-10 | #23afd0 | #23afd0 | orphan |
--color-cyan-dark-11 | #4ccce6 | #4ccce6 | orphan |
--color-cyan-dark-12 | #b6ecf7 | #b6ecf7 | orphan |
gold12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-gold-1 | #fdfdfc | #fdfdfc | orphan |
--color-gold-2 | #faf9f2 | #faf9f2 | orphan |
--color-gold-3 | #f2f0e7 | #f2f0e7 | orphan |
--color-gold-4 | #eae6db | #eae6db | orphan |
--color-gold-5 | #e1dccf | #e1dccf | orphan |
--color-gold-6 | #d8d0bf | #d8d0bf | orphan |
--color-gold-7 | #cbc0aa | #cbc0aa | orphan |
--color-gold-8 | #b9a88d | #b9a88d | orphan |
--color-gold-9 | #978365 | #978365 | orphan |
--color-gold-10 | #8c7a5e | #8c7a5e | orphan |
--color-gold-11 | #71624b | #71624b | orphan |
--color-gold-12 | #3b352b | #3b352b | orphan |
gold-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-gold-dark-1 | #121211 | #121211 | orphan |
--color-gold-dark-2 | #1b1a17 | #1b1a17 | orphan |
--color-gold-dark-3 | #24231f | #24231f | orphan |
--color-gold-dark-4 | #2d2b26 | #2d2b26 | orphan |
--color-gold-dark-5 | #38352e | #38352e | orphan |
--color-gold-dark-6 | #444039 | #444039 | orphan |
--color-gold-dark-7 | #544f46 | #544f46 | orphan |
--color-gold-dark-8 | #696256 | #696256 | orphan |
--color-gold-dark-9 | #978365 | #978365 | orphan |
--color-gold-dark-10 | #a39073 | #a39073 | orphan |
--color-gold-dark-11 | #cbb99f | #cbb99f | orphan |
--color-gold-dark-12 | #e8e2d9 | #e8e2d9 | orphan |
grass12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-grass-1 | #fbfefb | #fbfefb | 1 tokTokens:--color-background-brand-subtle |
--color-grass-2 | #f5fbf5 | #f5fbf5 | 1 compComponents:esa-pill |
--color-grass-3 | #e9f6e9 | #e9f6e9 | 1 tokTokens:--color-background-brand-muted |
--color-grass-4 | #daf1db | #daf1db | 1 tokTokens:--color-background-brand-muted-hover |
--color-grass-5 | #c9e8ca | #c9e8ca | orphan |
--color-grass-6 | #b2ddb5 | #b2ddb5 | 1 tok1 compTokens:--color-border-brand Components:esa-pill |
--color-grass-7 | #94ce9a | #94ce9a | orphan |
--color-grass-8 | #65ba74 | #65ba74 | orphan |
--color-grass-9 | #46a758 | #46a758 | 1 tokTokens:--color-background-brand |
--color-grass-10 | #3e9b4f | #3e9b4f | 4 tokTokens:--color-background-brand-active, --color-background-brand-hover, --color-background-dataviz-categorical-1, --color-border-default-focus |
--color-grass-11 | #2a7e3b | #2a7e3b | 2 tok1 comp1 fileTokens:--color-background-brand, --color-content-brand Components:esa-pill Files:packages/tokens/src/assurance.css |
--color-grass-12 | #203c25 | #203c25 | 4 tok1 fileTokens:--color-background-brand-active, --color-background-brand-hover, --color-background-dataviz-sequential-7, --color-content-on-brand-muted Files:packages/tokens/src/assurance.css |
grass-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-grass-dark-1 | #0d1912 | #0d1912 | orphan |
--color-grass-dark-2 | #0f1e13 | #0f1e13 | orphan |
--color-grass-dark-3 | #133016 | #133016 | orphan |
--color-grass-dark-4 | #1b401b | #1b401b | orphan |
--color-grass-dark-5 | #245322 | #245322 | orphan |
--color-grass-dark-6 | #2d662a | #2d662a | orphan |
--color-grass-dark-7 | #3b7c36 | #3b7c36 | orphan |
--color-grass-dark-8 | #4f9a44 | #4f9a44 | orphan |
--color-grass-dark-9 | #46a758 | #46a758 | orphan |
--color-grass-dark-10 | #53b365 | #53b365 | orphan |
--color-grass-dark-11 | #71d083 | #71d083 | orphan |
--color-grass-dark-12 | #c2f0c2 | #c2f0c2 | orphan |
graycore12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-gray-1 | #fcfcfc | #fcfcfc | 10 tokTokens:--color-background-default, --color-background-elevation-floating, --color-background-elevation-raised, --color-content-default-knockout, --color-content-on-accent, --color-content-on-ai, --color-content-on-brand, --color-content-on-utility-danger, --color-content-on-utility-info, --color-content-on-utility-success |
--color-gray-2 | #f9f9f9 | #f9f9f9 | orphan |
--color-gray-3 | #f0f0f0 | #f0f0f0 | 3 tokTokens:--color-background-dataviz-diverging-4, --color-background-disabled, --color-background-elevation-sunken |
--color-gray-4 | #e8e8e8 | #e8e8e8 | 1 tokTokens:--color-background-default-hover |
--color-gray-5 | #e0e0e0 | #e0e0e0 | orphan |
--color-gray-6 | #d9d9d9 | #d9d9d9 | 2 tokTokens:--color-border-default-subtle, --color-border-disabled |
--color-gray-7 | #cecece | #cecece | 1 tokTokens:--color-border-default |
--color-gray-8 | #bbbbbb | #bbbbbb | 1 tokTokens:--color-border-default-strong |
--color-gray-9 | #8d8d8d | #8d8d8d | 1 tokTokens:--color-content-disabled |
--color-gray-10 | #838383 | #838383 | orphan |
--color-gray-11 | #646464 | #646464 | 3 tokTokens:--color-background-default-knockout-hover, --color-content-default-secondary, --color-content-default-tertiary |
--color-gray-12 | #202020 | #202020 | 2 tokTokens:--color-background-default-knockout, --color-content-default |
gray-acore12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-gray-a-1 | rgba(0, 0, 0, 0.01) | rgba(0, 0, 0, 0.01) | orphan |
--color-gray-a-2 | rgba(0, 0, 0, 0.02) | rgba(0, 0, 0, 0.02) | orphan |
--color-gray-a-3 | rgba(0, 0, 0, 0.06) | rgba(0, 0, 0, 0.06) | orphan |
--color-gray-a-4 | rgba(0, 0, 0, 0.09) | rgba(0, 0, 0, 0.09) | orphan |
--color-gray-a-5 | rgba(0, 0, 0, 0.12) | rgba(0, 0, 0, 0.12) | orphan |
--color-gray-a-6 | rgba(0, 0, 0, 0.15) | rgba(0, 0, 0, 0.15) | orphan |
--color-gray-a-7 | rgba(0, 0, 0, 0.19) | rgba(0, 0, 0, 0.19) | orphan |
--color-gray-a-8 | rgba(0, 0, 0, 0.27) | rgba(0, 0, 0, 0.27) | orphan |
--color-gray-a-9 | rgba(0, 0, 0, 0.45) | rgba(0, 0, 0, 0.45) | orphan |
--color-gray-a-10 | rgba(0, 0, 0, 0.49) | rgba(0, 0, 0, 0.49) | orphan |
--color-gray-a-11 | rgba(0, 0, 0, 0.61) | rgba(0, 0, 0, 0.61) | orphan |
--color-gray-a-12 | rgba(0, 0, 0, 0.87) | rgba(0, 0, 0, 0.87) | orphan |
gray-darkcore12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-gray-dark-1 | #111111 | #111111 | orphan |
--color-gray-dark-2 | #191919 | #191919 | orphan |
--color-gray-dark-3 | #222222 | #222222 | orphan |
--color-gray-dark-4 | #2a2a2a | #2a2a2a | orphan |
--color-gray-dark-5 | #313131 | #313131 | orphan |
--color-gray-dark-6 | #3a3a3a | #3a3a3a | orphan |
--color-gray-dark-7 | #484848 | #484848 | 1 tokTokens:--color-border-default-knockout |
--color-gray-dark-8 | #606060 | #606060 | orphan |
--color-gray-dark-9 | #6e6e6e | #6e6e6e | orphan |
--color-gray-dark-10 | #7b7b7b | #7b7b7b | orphan |
--color-gray-dark-11 | #b4b4b4 | #b4b4b4 | orphan |
--color-gray-dark-12 | #ededef | #ededef | orphan |
green12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-green-1 | #fbfefc | #fbfefc | 1 tokTokens:--color-background-utility-success-subtle |
--color-green-2 | #f4fbf6 | #f4fbf6 | 1 compComponents:esa-pill |
--color-green-3 | #e6f6eb | #e6f6eb | 1 tokTokens:--color-background-utility-success-muted |
--color-green-4 | #d6f1df | #d6f1df | orphan |
--color-green-5 | #c4e8d1 | #c4e8d1 | orphan |
--color-green-6 | #adddc0 | #adddc0 | 1 tok1 compTokens:--color-border-utility-success Components:esa-pill |
--color-green-7 | #8eceaa | #8eceaa | orphan |
--color-green-8 | #5bb98b | #5bb98b | orphan |
--color-green-9 | #30a46c | #30a46c | 1 fileFiles:packages/spoke-template/src/styles/theme-__SPOKE_SLUG__.css |
--color-green-10 | #2b9a66 | #2b9a66 | orphan |
--color-green-11 | #218358 | #218358 | 2 tokTokens:--color-background-utility-success, --color-content-utility-success |
--color-green-12 | #193b2d | #193b2d | 2 tok1 fileTokens:--color-background-utility-success-hover, --color-content-utility-success Files:packages/tokens/src/assurance.css |
green-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-green-dark-1 | #0e1512 | #0e1512 | orphan |
--color-green-dark-2 | #121b17 | #121b17 | orphan |
--color-green-dark-3 | #132d21 | #132d21 | orphan |
--color-green-dark-4 | #113b29 | #113b29 | orphan |
--color-green-dark-5 | #174933 | #174933 | orphan |
--color-green-dark-6 | #20573e | #20573e | orphan |
--color-green-dark-7 | #28684a | #28684a | orphan |
--color-green-dark-8 | #2f7c57 | #2f7c57 | orphan |
--color-green-dark-9 | #30a46c | #30a46c | orphan |
--color-green-dark-10 | #33b074 | #33b074 | orphan |
--color-green-dark-11 | #3dd68c | #3dd68c | orphan |
--color-green-dark-12 | #b1f1cb | #b1f1cb | orphan |
indigo12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-indigo-1 | #fdfdfe | #fdfdfe | orphan |
--color-indigo-2 | #f7f9ff | #f7f9ff | orphan |
--color-indigo-3 | #edf2fe | #edf2fe | orphan |
--color-indigo-4 | #e1e9ff | #e1e9ff | orphan |
--color-indigo-5 | #d2deff | #d2deff | orphan |
--color-indigo-6 | #c1d0ff | #c1d0ff | orphan |
--color-indigo-7 | #abbdf9 | #abbdf9 | orphan |
--color-indigo-8 | #8da4ef | #8da4ef | orphan |
--color-indigo-9 | #3e63dd | #3e63dd | 1 tokTokens:--color-background-dataviz-categorical-2 |
--color-indigo-10 | #3358d4 | #3358d4 | orphan |
--color-indigo-11 | #3a5bc7 | #3a5bc7 | orphan |
--color-indigo-12 | #1f2d5c | #1f2d5c | orphan |
indigo-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-indigo-dark-1 | #11131f | #11131f | orphan |
--color-indigo-dark-2 | #141726 | #141726 | orphan |
--color-indigo-dark-3 | #182449 | #182449 | orphan |
--color-indigo-dark-4 | #1d2e62 | #1d2e62 | orphan |
--color-indigo-dark-5 | #253974 | #253974 | orphan |
--color-indigo-dark-6 | #304384 | #304384 | orphan |
--color-indigo-dark-7 | #3a4f97 | #3a4f97 | orphan |
--color-indigo-dark-8 | #435db1 | #435db1 | orphan |
--color-indigo-dark-9 | #3e63dd | #3e63dd | orphan |
--color-indigo-dark-10 | #5472e4 | #5472e4 | orphan |
--color-indigo-dark-11 | #9eb1ff | #9eb1ff | orphan |
--color-indigo-dark-12 | #d6e1ff | #d6e1ff | orphan |
iris12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-iris-1 | #fdfdff | #fdfdff | orphan |
--color-iris-2 | #f8f8ff | #f8f8ff | orphan |
--color-iris-3 | #f0f1fe | #f0f1fe | orphan |
--color-iris-4 | #e6e7ff | #e6e7ff | orphan |
--color-iris-5 | #dadcff | #dadcff | orphan |
--color-iris-6 | #cbcdff | #cbcdff | orphan |
--color-iris-7 | #b8baf8 | #b8baf8 | orphan |
--color-iris-8 | #9b9ef0 | #9b9ef0 | orphan |
--color-iris-9 | #5b5bd6 | #5b5bd6 | orphan |
--color-iris-10 | #5151cd | #5151cd | orphan |
--color-iris-11 | #5753c6 | #5753c6 | orphan |
--color-iris-12 | #272962 | #272962 | orphan |
iris-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-iris-dark-1 | #13131e | #13131e | orphan |
--color-iris-dark-2 | #171625 | #171625 | orphan |
--color-iris-dark-3 | #202248 | #202248 | orphan |
--color-iris-dark-4 | #262a65 | #262a65 | orphan |
--color-iris-dark-5 | #303374 | #303374 | orphan |
--color-iris-dark-6 | #3d3e82 | #3d3e82 | orphan |
--color-iris-dark-7 | #4a4a95 | #4a4a95 | orphan |
--color-iris-dark-8 | #5958b1 | #5958b1 | orphan |
--color-iris-dark-9 | #5b5bd6 | #5b5bd6 | orphan |
--color-iris-dark-10 | #6e6ade | #6e6ade | orphan |
--color-iris-dark-11 | #b1a9ff | #b1a9ff | orphan |
--color-iris-dark-12 | #e0dffe | #e0dffe | orphan |
jade12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-jade-1 | #fbfefd | #fbfefd | orphan |
--color-jade-2 | #f4fbf7 | #f4fbf7 | orphan |
--color-jade-3 | #e6f7ed | #e6f7ed | orphan |
--color-jade-4 | #d6f1e3 | #d6f1e3 | orphan |
--color-jade-5 | #c3e9d7 | #c3e9d7 | orphan |
--color-jade-6 | #acdec8 | #acdec8 | orphan |
--color-jade-7 | #8bceb6 | #8bceb6 | orphan |
--color-jade-8 | #56ba9f | #56ba9f | orphan |
--color-jade-9 | #29a383 | #29a383 | orphan |
--color-jade-10 | #26997b | #26997b | orphan |
--color-jade-11 | #208368 | #208368 | orphan |
--color-jade-12 | #1d3b31 | #1d3b31 | orphan |
jade-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-jade-dark-1 | #0d1512 | #0d1512 | orphan |
--color-jade-dark-2 | #121c18 | #121c18 | orphan |
--color-jade-dark-3 | #0f2e22 | #0f2e22 | orphan |
--color-jade-dark-4 | #0b3b2c | #0b3b2c | orphan |
--color-jade-dark-5 | #114837 | #114837 | orphan |
--color-jade-dark-6 | #1b5745 | #1b5745 | orphan |
--color-jade-dark-7 | #246854 | #246854 | orphan |
--color-jade-dark-8 | #2a7e68 | #2a7e68 | orphan |
--color-jade-dark-9 | #29a383 | #29a383 | orphan |
--color-jade-dark-10 | #27b08b | #27b08b | orphan |
--color-jade-dark-11 | #1fd8a4 | #1fd8a4 | orphan |
--color-jade-dark-12 | #adf0d4 | #adf0d4 | orphan |
lime12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-lime-1 | #fcfdfa | #fcfdfa | orphan |
--color-lime-2 | #f8faf3 | #f8faf3 | orphan |
--color-lime-3 | #eef6d6 | #eef6d6 | orphan |
--color-lime-4 | #e2f0bd | #e2f0bd | orphan |
--color-lime-5 | #d3e7a6 | #d3e7a6 | orphan |
--color-lime-6 | #c2da91 | #c2da91 | orphan |
--color-lime-7 | #abc978 | #abc978 | orphan |
--color-lime-8 | #8db654 | #8db654 | orphan |
--color-lime-9 | #bdee63 | #bdee63 | orphan |
--color-lime-10 | #b0e64c | #b0e64c | orphan |
--color-lime-11 | #5c7c2f | #5c7c2f | orphan |
--color-lime-12 | #37401c | #37401c | orphan |
lime-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-lime-dark-1 | #11130c | #11130c | orphan |
--color-lime-dark-2 | #151a10 | #151a10 | orphan |
--color-lime-dark-3 | #1d2b13 | #1d2b13 | orphan |
--color-lime-dark-4 | #263a1a | #263a1a | orphan |
--color-lime-dark-5 | #2e4b20 | #2e4b20 | orphan |
--color-lime-dark-6 | #3a5f29 | #3a5f29 | orphan |
--color-lime-dark-7 | #4c7a33 | #4c7a33 | orphan |
--color-lime-dark-8 | #64a33f | #64a33f | orphan |
--color-lime-dark-9 | #bdee63 | #bdee63 | orphan |
--color-lime-dark-10 | #b0e64c | #b0e64c | orphan |
--color-lime-dark-11 | #bde56c | #bde56c | orphan |
--color-lime-dark-12 | #e3f7ba | #e3f7ba | orphan |
mauve12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-mauve-1 | #fdfcfd | #fdfcfd | orphan |
--color-mauve-2 | #faf9fb | #faf9fb | orphan |
--color-mauve-3 | #f2eff3 | #f2eff3 | orphan |
--color-mauve-4 | #eae7ec | #eae7ec | orphan |
--color-mauve-5 | #e3dfe6 | #e3dfe6 | orphan |
--color-mauve-6 | #dbd8e0 | #dbd8e0 | orphan |
--color-mauve-7 | #d0cdd7 | #d0cdd7 | orphan |
--color-mauve-8 | #bcbac7 | #bcbac7 | orphan |
--color-mauve-9 | #8e8c99 | #8e8c99 | orphan |
--color-mauve-10 | #84828e | #84828e | orphan |
--color-mauve-11 | #65636d | #65636d | orphan |
--color-mauve-12 | #211f26 | #211f26 | orphan |
mauve-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-mauve-dark-1 | #121113 | #121113 | orphan |
--color-mauve-dark-2 | #1a191b | #1a191b | orphan |
--color-mauve-dark-3 | #232225 | #232225 | orphan |
--color-mauve-dark-4 | #2b292d | #2b292d | orphan |
--color-mauve-dark-5 | #323035 | #323035 | orphan |
--color-mauve-dark-6 | #3c393f | #3c393f | orphan |
--color-mauve-dark-7 | #49474e | #49474e | orphan |
--color-mauve-dark-8 | #625f69 | #625f69 | orphan |
--color-mauve-dark-9 | #6f6d78 | #6f6d78 | orphan |
--color-mauve-dark-10 | #7c7a85 | #7c7a85 | orphan |
--color-mauve-dark-11 | #b5b2bc | #b5b2bc | orphan |
--color-mauve-dark-12 | #eeeef0 | #eeeef0 | orphan |
mint12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-mint-1 | #f9fefd | #f9fefd | orphan |
--color-mint-2 | #f2fbf9 | #f2fbf9 | orphan |
--color-mint-3 | #ddf9f2 | #ddf9f2 | orphan |
--color-mint-4 | #c8f4e9 | #c8f4e9 | orphan |
--color-mint-5 | #b3ecde | #b3ecde | orphan |
--color-mint-6 | #9ce0d0 | #9ce0d0 | orphan |
--color-mint-7 | #7ecfbd | #7ecfbd | orphan |
--color-mint-8 | #4cbba5 | #4cbba5 | orphan |
--color-mint-9 | #86ead4 | #86ead4 | orphan |
--color-mint-10 | #7de0cb | #7de0cb | orphan |
--color-mint-11 | #027864 | #027864 | orphan |
--color-mint-12 | #16433c | #16433c | orphan |
mint-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-mint-dark-1 | #0e1515 | #0e1515 | orphan |
--color-mint-dark-2 | #0f1b1b | #0f1b1b | orphan |
--color-mint-dark-3 | #092c2b | #092c2b | orphan |
--color-mint-dark-4 | #003a38 | #003a38 | orphan |
--color-mint-dark-5 | #004744 | #004744 | orphan |
--color-mint-dark-6 | #105650 | #105650 | orphan |
--color-mint-dark-7 | #1e685f | #1e685f | orphan |
--color-mint-dark-8 | #277f70 | #277f70 | orphan |
--color-mint-dark-9 | #86ead4 | #86ead4 | orphan |
--color-mint-dark-10 | #a8f5e5 | #a8f5e5 | orphan |
--color-mint-dark-11 | #58d5ba | #58d5ba | orphan |
--color-mint-dark-12 | #c4f5e1 | #c4f5e1 | orphan |
olive12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-olive-1 | #fcfdfc | #fcfdfc | orphan |
--color-olive-2 | #f8faf8 | #f8faf8 | orphan |
--color-olive-3 | #eff1ef | #eff1ef | orphan |
--color-olive-4 | #e7e9e7 | #e7e9e7 | orphan |
--color-olive-5 | #dfe2df | #dfe2df | orphan |
--color-olive-6 | #d7dad7 | #d7dad7 | orphan |
--color-olive-7 | #cccfcc | #cccfcc | orphan |
--color-olive-8 | #b9bcb8 | #b9bcb8 | orphan |
--color-olive-9 | #898e87 | #898e87 | orphan |
--color-olive-10 | #7f847d | #7f847d | orphan |
--color-olive-11 | #60655f | #60655f | orphan |
--color-olive-12 | #1d211c | #1d211c | orphan |
olive-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-olive-dark-1 | #111210 | #111210 | orphan |
--color-olive-dark-2 | #181917 | #181917 | orphan |
--color-olive-dark-3 | #212220 | #212220 | orphan |
--color-olive-dark-4 | #282a27 | #282a27 | orphan |
--color-olive-dark-5 | #2f312e | #2f312e | orphan |
--color-olive-dark-6 | #383a36 | #383a36 | orphan |
--color-olive-dark-7 | #454843 | #454843 | orphan |
--color-olive-dark-8 | #5c625b | #5c625b | orphan |
--color-olive-dark-9 | #687066 | #687066 | orphan |
--color-olive-dark-10 | #767d74 | #767d74 | orphan |
--color-olive-dark-11 | #afb5ad | #afb5ad | orphan |
--color-olive-dark-12 | #eceeec | #eceeec | orphan |
orange12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-orange-1 | #fefcfb | #fefcfb | orphan |
--color-orange-2 | #fff7ed | #fff7ed | orphan |
--color-orange-3 | #ffefd6 | #ffefd6 | orphan |
--color-orange-4 | #ffdfb5 | #ffdfb5 | orphan |
--color-orange-5 | #ffd19a | #ffd19a | orphan |
--color-orange-6 | #ffc182 | #ffc182 | orphan |
--color-orange-7 | #f5ae73 | #f5ae73 | orphan |
--color-orange-8 | #ec9455 | #ec9455 | orphan |
--color-orange-9 | #f76b15 | #f76b15 | 1 tok1 fileTokens:--color-background-accent Files:packages/spoke-template/src/styles/theme-__SPOKE_SLUG__.css |
--color-orange-10 | #ef5f00 | #ef5f00 | 2 tokTokens:--color-background-accent-hover, --color-background-dataviz-categorical-3 |
--color-orange-11 | #cc4e00 | #cc4e00 | orphan |
--color-orange-12 | #582d1d | #582d1d | 2 tok1 fileTokens:--color-background-accent, --color-background-accent-hover Files:packages/tokens/src/assurance.css |
orange-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-orange-dark-1 | #17120e | #17120e | orphan |
--color-orange-dark-2 | #1e160f | #1e160f | orphan |
--color-orange-dark-3 | #331e0b | #331e0b | orphan |
--color-orange-dark-4 | #462100 | #462100 | orphan |
--color-orange-dark-5 | #562800 | #562800 | orphan |
--color-orange-dark-6 | #66350c | #66350c | orphan |
--color-orange-dark-7 | #7e451d | #7e451d | orphan |
--color-orange-dark-8 | #a35829 | #a35829 | orphan |
--color-orange-dark-9 | #f76b15 | #f76b15 | orphan |
--color-orange-dark-10 | #ff801f | #ff801f | orphan |
--color-orange-dark-11 | #ffa057 | #ffa057 | orphan |
--color-orange-dark-12 | #ffe0c2 | #ffe0c2 | orphan |
pink12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-pink-1 | #fffcfe | #fffcfe | orphan |
--color-pink-2 | #fef7fb | #fef7fb | orphan |
--color-pink-3 | #fee9f5 | #fee9f5 | orphan |
--color-pink-4 | #fbdcef | #fbdcef | orphan |
--color-pink-5 | #f6cee7 | #f6cee7 | orphan |
--color-pink-6 | #efbfdd | #efbfdd | orphan |
--color-pink-7 | #e7acd0 | #e7acd0 | orphan |
--color-pink-8 | #dd93c2 | #dd93c2 | orphan |
--color-pink-9 | #d6409f | #d6409f | orphan |
--color-pink-10 | #cf3897 | #cf3897 | orphan |
--color-pink-11 | #c2298a | #c2298a | orphan |
--color-pink-12 | #651249 | #651249 | orphan |
pink-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-pink-dark-1 | #191117 | #191117 | orphan |
--color-pink-dark-2 | #21121d | #21121d | orphan |
--color-pink-dark-3 | #37172f | #37172f | orphan |
--color-pink-dark-4 | #4b143d | #4b143d | orphan |
--color-pink-dark-5 | #591c47 | #591c47 | orphan |
--color-pink-dark-6 | #692955 | #692955 | orphan |
--color-pink-dark-7 | #833869 | #833869 | orphan |
--color-pink-dark-8 | #a84885 | #a84885 | orphan |
--color-pink-dark-9 | #d6409f | #d6409f | orphan |
--color-pink-dark-10 | #de51a8 | #de51a8 | orphan |
--color-pink-dark-11 | #ff8dcc | #ff8dcc | orphan |
--color-pink-dark-12 | #fdd1ea | #fdd1ea | orphan |
plum12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-plum-1 | #fefcff | #fefcff | orphan |
--color-plum-2 | #fdf7fd | #fdf7fd | orphan |
--color-plum-3 | #fbebfb | #fbebfb | orphan |
--color-plum-4 | #f7def8 | #f7def8 | orphan |
--color-plum-5 | #f2d1f3 | #f2d1f3 | orphan |
--color-plum-6 | #e9c2ec | #e9c2ec | orphan |
--color-plum-7 | #deade3 | #deade3 | orphan |
--color-plum-8 | #cf91d8 | #cf91d8 | orphan |
--color-plum-9 | #ab4aba | #ab4aba | orphan |
--color-plum-10 | #a144af | #a144af | orphan |
--color-plum-11 | #953ea3 | #953ea3 | orphan |
--color-plum-12 | #53195d | #53195d | orphan |
plum-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-plum-dark-1 | #181118 | #181118 | orphan |
--color-plum-dark-2 | #201320 | #201320 | orphan |
--color-plum-dark-3 | #351a35 | #351a35 | orphan |
--color-plum-dark-4 | #451d47 | #451d47 | orphan |
--color-plum-dark-5 | #512454 | #512454 | orphan |
--color-plum-dark-6 | #5e3061 | #5e3061 | orphan |
--color-plum-dark-7 | #734079 | #734079 | orphan |
--color-plum-dark-8 | #92549c | #92549c | orphan |
--color-plum-dark-9 | #ab4aba | #ab4aba | orphan |
--color-plum-dark-10 | #b658c4 | #b658c4 | orphan |
--color-plum-dark-11 | #e796f3 | #e796f3 | orphan |
--color-plum-dark-12 | #f4d4f4 | #f4d4f4 | orphan |
purple12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-purple-1 | #fefcfe | #fefcfe | orphan |
--color-purple-2 | #fbf7fe | #fbf7fe | orphan |
--color-purple-3 | #f7edfe | #f7edfe | orphan |
--color-purple-4 | #f2e2fc | #f2e2fc | orphan |
--color-purple-5 | #ead5f9 | #ead5f9 | orphan |
--color-purple-6 | #e0c4f4 | #e0c4f4 | orphan |
--color-purple-7 | #d1afec | #d1afec | orphan |
--color-purple-8 | #be93e4 | #be93e4 | orphan |
--color-purple-9 | #8e4ec6 | #8e4ec6 | orphan |
--color-purple-10 | #8347b9 | #8347b9 | orphan |
--color-purple-11 | #8145b5 | #8145b5 | orphan |
--color-purple-12 | #402060 | #402060 | orphan |
purple-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-purple-dark-1 | #18111b | #18111b | orphan |
--color-purple-dark-2 | #1e1523 | #1e1523 | orphan |
--color-purple-dark-3 | #301c3b | #301c3b | orphan |
--color-purple-dark-4 | #3d224e | #3d224e | orphan |
--color-purple-dark-5 | #48295c | #48295c | orphan |
--color-purple-dark-6 | #54346b | #54346b | orphan |
--color-purple-dark-7 | #664282 | #664282 | orphan |
--color-purple-dark-8 | #8457aa | #8457aa | orphan |
--color-purple-dark-9 | #8e4ec6 | #8e4ec6 | orphan |
--color-purple-dark-10 | #9a5cd0 | #9a5cd0 | orphan |
--color-purple-dark-11 | #d19dff | #d19dff | orphan |
--color-purple-dark-12 | #ecd9fa | #ecd9fa | orphan |
red12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-red-1 | #fffcfc | #fffcfc | 1 tokTokens:--color-background-utility-danger-subtle |
--color-red-2 | #fff7f7 | #fff7f7 | 1 compComponents:esa-pill |
--color-red-3 | #feebec | #feebec | 1 tokTokens:--color-background-utility-danger-muted |
--color-red-4 | #ffdbdc | #ffdbdc | orphan |
--color-red-5 | #ffcdce | #ffcdce | orphan |
--color-red-6 | #fdbdbe | #fdbdbe | 1 tok1 compTokens:--color-border-utility-danger Components:esa-pill |
--color-red-7 | #f4a9aa | #f4a9aa | 1 tokTokens:--color-background-dataviz-diverging-5 |
--color-red-8 | #eb8e90 | #eb8e90 | orphan |
--color-red-9 | #e5484d | #e5484d | 1 tokTokens:--color-background-dataviz-diverging-6 |
--color-red-10 | #dc3e42 | #dc3e42 | orphan |
--color-red-11 | #ce2c31 | #ce2c31 | 3 tokTokens:--color-background-dataviz-diverging-7, --color-background-utility-danger, --color-content-utility-danger |
--color-red-12 | #641723 | #641723 | 2 tok1 fileTokens:--color-background-utility-danger-hover, --color-content-utility-danger Files:packages/tokens/src/assurance.css |
red-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-red-dark-1 | #191111 | #191111 | orphan |
--color-red-dark-2 | #201314 | #201314 | orphan |
--color-red-dark-3 | #3b1219 | #3b1219 | orphan |
--color-red-dark-4 | #500f1c | #500f1c | orphan |
--color-red-dark-5 | #611623 | #611623 | orphan |
--color-red-dark-6 | #72232d | #72232d | orphan |
--color-red-dark-7 | #8c333a | #8c333a | orphan |
--color-red-dark-8 | #b54548 | #b54548 | orphan |
--color-red-dark-9 | #e5484d | #e5484d | orphan |
--color-red-dark-10 | #ec5d5e | #ec5d5e | orphan |
--color-red-dark-11 | #ff9592 | #ff9592 | orphan |
--color-red-dark-12 | #ffd1d9 | #ffd1d9 | orphan |
ruby12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-ruby-1 | #fffcfd | #fffcfd | orphan |
--color-ruby-2 | #fff7f8 | #fff7f8 | orphan |
--color-ruby-3 | #feeaed | #feeaed | orphan |
--color-ruby-4 | #ffdce1 | #ffdce1 | orphan |
--color-ruby-5 | #ffced6 | #ffced6 | orphan |
--color-ruby-6 | #f8bfc8 | #f8bfc8 | orphan |
--color-ruby-7 | #efacb8 | #efacb8 | orphan |
--color-ruby-8 | #e592a3 | #e592a3 | orphan |
--color-ruby-9 | #e54666 | #e54666 | orphan |
--color-ruby-10 | #dc3b5d | #dc3b5d | orphan |
--color-ruby-11 | #ca244d | #ca244d | orphan |
--color-ruby-12 | #64172b | #64172b | orphan |
ruby-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-ruby-dark-1 | #191113 | #191113 | orphan |
--color-ruby-dark-2 | #1e1517 | #1e1517 | orphan |
--color-ruby-dark-3 | #3a141e | #3a141e | orphan |
--color-ruby-dark-4 | #4e1325 | #4e1325 | orphan |
--color-ruby-dark-5 | #5e1a2e | #5e1a2e | orphan |
--color-ruby-dark-6 | #6f2539 | #6f2539 | orphan |
--color-ruby-dark-7 | #883447 | #883447 | orphan |
--color-ruby-dark-8 | #b3445a | #b3445a | orphan |
--color-ruby-dark-9 | #e54666 | #e54666 | orphan |
--color-ruby-dark-10 | #ec5a72 | #ec5a72 | orphan |
--color-ruby-dark-11 | #ff949d | #ff949d | orphan |
--color-ruby-dark-12 | #fed2e1 | #fed2e1 | orphan |
sage12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-sage-1 | #fbfdfc | #fbfdfc | orphan |
--color-sage-2 | #f7f9f8 | #f7f9f8 | orphan |
--color-sage-3 | #eef1f0 | #eef1f0 | orphan |
--color-sage-4 | #e6e9e8 | #e6e9e8 | orphan |
--color-sage-5 | #dfe2e0 | #dfe2e0 | orphan |
--color-sage-6 | #d7dad9 | #d7dad9 | orphan |
--color-sage-7 | #cbcfcd | #cbcfcd | orphan |
--color-sage-8 | #b8bcba | #b8bcba | orphan |
--color-sage-9 | #868e8b | #868e8b | orphan |
--color-sage-10 | #7c8481 | #7c8481 | orphan |
--color-sage-11 | #5f6563 | #5f6563 | orphan |
--color-sage-12 | #1a211e | #1a211e | orphan |
sage-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-sage-dark-1 | #101211 | #101211 | orphan |
--color-sage-dark-2 | #171918 | #171918 | orphan |
--color-sage-dark-3 | #202221 | #202221 | orphan |
--color-sage-dark-4 | #272a29 | #272a29 | orphan |
--color-sage-dark-5 | #2e3130 | #2e3130 | orphan |
--color-sage-dark-6 | #373b39 | #373b39 | orphan |
--color-sage-dark-7 | #444947 | #444947 | orphan |
--color-sage-dark-8 | #5b625f | #5b625f | orphan |
--color-sage-dark-9 | #63706b | #63706b | orphan |
--color-sage-dark-10 | #717d79 | #717d79 | orphan |
--color-sage-dark-11 | #adb5b2 | #adb5b2 | orphan |
--color-sage-dark-12 | #eceeed | #eceeed | orphan |
sand12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-sand-1 | #fdfdfc | #fdfdfc | orphan |
--color-sand-2 | #f9f9f8 | #f9f9f8 | orphan |
--color-sand-3 | #f1f0ef | #f1f0ef | orphan |
--color-sand-4 | #e9e8e6 | #e9e8e6 | orphan |
--color-sand-5 | #e2e1de | #e2e1de | orphan |
--color-sand-6 | #dad9d6 | #dad9d6 | orphan |
--color-sand-7 | #cfceca | #cfceca | orphan |
--color-sand-8 | #bcbbb5 | #bcbbb5 | orphan |
--color-sand-9 | #8d8d86 | #8d8d86 | orphan |
--color-sand-10 | #82827c | #82827c | orphan |
--color-sand-11 | #63635e | #63635e | orphan |
--color-sand-12 | #21201c | #21201c | orphan |
sand-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-sand-dark-1 | #111110 | #111110 | orphan |
--color-sand-dark-2 | #191918 | #191918 | orphan |
--color-sand-dark-3 | #222221 | #222221 | orphan |
--color-sand-dark-4 | #2a2a28 | #2a2a28 | orphan |
--color-sand-dark-5 | #31312e | #31312e | orphan |
--color-sand-dark-6 | #3b3a37 | #3b3a37 | orphan |
--color-sand-dark-7 | #494844 | #494844 | orphan |
--color-sand-dark-8 | #62605b | #62605b | orphan |
--color-sand-dark-9 | #6f6d66 | #6f6d66 | orphan |
--color-sand-dark-10 | #7c7b74 | #7c7b74 | orphan |
--color-sand-dark-11 | #b5b3ad | #b5b3ad | orphan |
--color-sand-dark-12 | #eeeeec | #eeeeec | orphan |
sky12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-sky-1 | #f9feff | #f9feff | orphan |
--color-sky-2 | #f1fafd | #f1fafd | orphan |
--color-sky-3 | #e1f6fd | #e1f6fd | orphan |
--color-sky-4 | #d1f0fa | #d1f0fa | orphan |
--color-sky-5 | #bee7f5 | #bee7f5 | orphan |
--color-sky-6 | #a9daed | #a9daed | orphan |
--color-sky-7 | #8dcae3 | #8dcae3 | orphan |
--color-sky-8 | #60b3d7 | #60b3d7 | orphan |
--color-sky-9 | #7ce2fe | #7ce2fe | orphan |
--color-sky-10 | #74daf8 | #74daf8 | orphan |
--color-sky-11 | #00749e | #00749e | orphan |
--color-sky-12 | #1d3e56 | #1d3e56 | orphan |
sky-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-sky-dark-1 | #0d141f | #0d141f | orphan |
--color-sky-dark-2 | #111a27 | #111a27 | orphan |
--color-sky-dark-3 | #112840 | #112840 | orphan |
--color-sky-dark-4 | #113555 | #113555 | orphan |
--color-sky-dark-5 | #154467 | #154467 | orphan |
--color-sky-dark-6 | #1b537b | #1b537b | orphan |
--color-sky-dark-7 | #1f6692 | #1f6692 | orphan |
--color-sky-dark-8 | #197cae | #197cae | orphan |
--color-sky-dark-9 | #7ce2fe | #7ce2fe | orphan |
--color-sky-dark-10 | #a8eeff | #a8eeff | orphan |
--color-sky-dark-11 | #75c7f0 | #75c7f0 | orphan |
--color-sky-dark-12 | #c2f3ff | #c2f3ff | orphan |
slate12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-slate-1 | #fcfcfd | #fcfcfd | orphan |
--color-slate-2 | #f9f9fb | #f9f9fb | orphan |
--color-slate-3 | #f0f0f3 | #f0f0f3 | orphan |
--color-slate-4 | #e8e8ec | #e8e8ec | orphan |
--color-slate-5 | #e0e1e6 | #e0e1e6 | orphan |
--color-slate-6 | #d9d9e0 | #d9d9e0 | orphan |
--color-slate-7 | #cdced6 | #cdced6 | orphan |
--color-slate-8 | #b9bbc6 | #b9bbc6 | orphan |
--color-slate-9 | #8b8d98 | #8b8d98 | orphan |
--color-slate-10 | #80838d | #80838d | orphan |
--color-slate-11 | #60646c | #60646c | orphan |
--color-slate-12 | #1c2024 | #1c2024 | orphan |
slate-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-slate-dark-1 | #111113 | #111113 | orphan |
--color-slate-dark-2 | #18191b | #18191b | orphan |
--color-slate-dark-3 | #212225 | #212225 | orphan |
--color-slate-dark-4 | #272a2d | #272a2d | orphan |
--color-slate-dark-5 | #2e3135 | #2e3135 | orphan |
--color-slate-dark-6 | #363a3f | #363a3f | orphan |
--color-slate-dark-7 | #43484e | #43484e | orphan |
--color-slate-dark-8 | #5a6169 | #5a6169 | orphan |
--color-slate-dark-9 | #696e77 | #696e77 | orphan |
--color-slate-dark-10 | #777b84 | #777b84 | orphan |
--color-slate-dark-11 | #b0b4ba | #b0b4ba | orphan |
--color-slate-dark-12 | #edeef0 | #edeef0 | orphan |
teal12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-teal-1 | #fafefd | #fafefd | orphan |
--color-teal-2 | #f3fbf9 | #f3fbf9 | orphan |
--color-teal-3 | #e0f8f3 | #e0f8f3 | orphan |
--color-teal-4 | #ccf3ea | #ccf3ea | orphan |
--color-teal-5 | #b8eae0 | #b8eae0 | orphan |
--color-teal-6 | #a1ded2 | #a1ded2 | orphan |
--color-teal-7 | #83cdc1 | #83cdc1 | orphan |
--color-teal-8 | #53b9ab | #53b9ab | orphan |
--color-teal-9 | #12a594 | #12a594 | orphan |
--color-teal-10 | #0d9b8a | #0d9b8a | 1 tokTokens:--color-background-dataviz-categorical-8 |
--color-teal-11 | #008573 | #008573 | orphan |
--color-teal-12 | #0d3d38 | #0d3d38 | orphan |
teal-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-teal-dark-1 | #0d1514 | #0d1514 | orphan |
--color-teal-dark-2 | #111c1b | #111c1b | orphan |
--color-teal-dark-3 | #0d2d2a | #0d2d2a | orphan |
--color-teal-dark-4 | #023b37 | #023b37 | orphan |
--color-teal-dark-5 | #084843 | #084843 | orphan |
--color-teal-dark-6 | #145750 | #145750 | orphan |
--color-teal-dark-7 | #1c6961 | #1c6961 | orphan |
--color-teal-dark-8 | #207e73 | #207e73 | orphan |
--color-teal-dark-9 | #12a594 | #12a594 | orphan |
--color-teal-dark-10 | #0eb39e | #0eb39e | orphan |
--color-teal-dark-11 | #0bd8b6 | #0bd8b6 | orphan |
--color-teal-dark-12 | #adf0dd | #adf0dd | orphan |
tomato12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-tomato-1 | #fffcfc | #fffcfc | orphan |
--color-tomato-2 | #fff8f7 | #fff8f7 | orphan |
--color-tomato-3 | #feebe7 | #feebe7 | orphan |
--color-tomato-4 | #ffdcd3 | #ffdcd3 | orphan |
--color-tomato-5 | #ffcdc2 | #ffcdc2 | orphan |
--color-tomato-6 | #fdbdaf | #fdbdaf | orphan |
--color-tomato-7 | #f5a898 | #f5a898 | orphan |
--color-tomato-8 | #ec8e7b | #ec8e7b | orphan |
--color-tomato-9 | #e54d2e | #e54d2e | orphan |
--color-tomato-10 | #dd4425 | #dd4425 | orphan |
--color-tomato-11 | #d13415 | #d13415 | orphan |
--color-tomato-12 | #5c271f | #5c271f | orphan |
tomato-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-tomato-dark-1 | #181111 | #181111 | orphan |
--color-tomato-dark-2 | #1f1513 | #1f1513 | orphan |
--color-tomato-dark-3 | #391714 | #391714 | orphan |
--color-tomato-dark-4 | #4e1511 | #4e1511 | orphan |
--color-tomato-dark-5 | #5e1c16 | #5e1c16 | orphan |
--color-tomato-dark-6 | #6e2920 | #6e2920 | orphan |
--color-tomato-dark-7 | #853a2d | #853a2d | orphan |
--color-tomato-dark-8 | #ac4d39 | #ac4d39 | orphan |
--color-tomato-dark-9 | #e54d2e | #e54d2e | orphan |
--color-tomato-dark-10 | #ec6142 | #ec6142 | orphan |
--color-tomato-dark-11 | #ff977d | #ff977d | orphan |
--color-tomato-dark-12 | #fbd3cb | #fbd3cb | orphan |
violet12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-violet-1 | #fdfcfe | #fdfcfe | orphan |
--color-violet-2 | #faf8ff | #faf8ff | orphan |
--color-violet-3 | #f4f0fe | #f4f0fe | orphan |
--color-violet-4 | #ebe4ff | #ebe4ff | orphan |
--color-violet-5 | #e1d9ff | #e1d9ff | orphan |
--color-violet-6 | #d4cafe | #d4cafe | orphan |
--color-violet-7 | #c2b5f5 | #c2b5f5 | orphan |
--color-violet-8 | #aa99ec | #aa99ec | orphan |
--color-violet-9 | #6e56cf | #6e56cf | orphan |
--color-violet-10 | #654dc4 | #654dc4 | orphan |
--color-violet-11 | #6550b9 | #6550b9 | 1 tokTokens:--color-background-dataviz-categorical-7 |
--color-violet-12 | #2f265f | #2f265f | orphan |
violet-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-violet-dark-1 | #14121f | #14121f | orphan |
--color-violet-dark-2 | #1b1525 | #1b1525 | orphan |
--color-violet-dark-3 | #291f43 | #291f43 | orphan |
--color-violet-dark-4 | #33255b | #33255b | orphan |
--color-violet-dark-5 | #3c2e69 | #3c2e69 | orphan |
--color-violet-dark-6 | #473876 | #473876 | orphan |
--color-violet-dark-7 | #56468b | #56468b | orphan |
--color-violet-dark-8 | #6958ad | #6958ad | orphan |
--color-violet-dark-9 | #6e56cf | #6e56cf | orphan |
--color-violet-dark-10 | #7d66d9 | #7d66d9 | orphan |
--color-violet-dark-11 | #baa7ff | #baa7ff | orphan |
--color-violet-dark-12 | #e2ddfe | #e2ddfe | orphan |
white-acore12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-white-a-1 | rgba(255, 255, 255, 0.05) | rgba(255, 255, 255, 0.05) | orphan |
--color-white-a-2 | rgba(255, 255, 255, 0.1) | rgba(255, 255, 255, 0.1) | orphan |
--color-white-a-3 | rgba(255, 255, 255, 0.15) | rgba(255, 255, 255, 0.15) | orphan |
--color-white-a-4 | rgba(255, 255, 255, 0.2) | rgba(255, 255, 255, 0.2) | orphan |
--color-white-a-5 | rgba(255, 255, 255, 0.3) | rgba(255, 255, 255, 0.3) | orphan |
--color-white-a-6 | rgba(255, 255, 255, 0.4) | rgba(255, 255, 255, 0.4) | orphan |
--color-white-a-7 | rgba(255, 255, 255, 0.5) | rgba(255, 255, 255, 0.5) | orphan |
--color-white-a-8 | rgba(255, 255, 255, 0.6) | rgba(255, 255, 255, 0.6) | orphan |
--color-white-a-9 | rgba(255, 255, 255, 0.7) | rgba(255, 255, 255, 0.7) | orphan |
--color-white-a-10 | rgba(255, 255, 255, 0.8) | rgba(255, 255, 255, 0.8) | 1 tokTokens:--color-background-overlay-scrim |
--color-white-a-11 | rgba(255, 255, 255, 0.9) | rgba(255, 255, 255, 0.9) | orphan |
--color-white-a-12 | rgba(255, 255, 255, 0.95) | rgba(255, 255, 255, 0.95) | orphan |
yellow12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-yellow-1 | #fefdfb | #fefdfb | 1 tokTokens:--color-background-utility-warning-subtle |
--color-yellow-2 | #fefbe9 | #fefbe9 | 1 compComponents:esa-pill |
--color-yellow-3 | #fff7c2 | #fff7c2 | 1 tokTokens:--color-background-utility-warning-muted |
--color-yellow-4 | #ffee9c | #ffee9c | orphan |
--color-yellow-5 | #fbe577 | #fbe577 | orphan |
--color-yellow-6 | #f3d673 | #f3d673 | 1 tok1 compTokens:--color-border-utility-warning Components:esa-pill |
--color-yellow-7 | #e9c162 | #e9c162 | orphan |
--color-yellow-8 | #e2a336 | #e2a336 | orphan |
--color-yellow-9 | #ffc53d | #ffc53d | 1 tokTokens:--color-background-utility-warning |
--color-yellow-10 | #ffba18 | #ffba18 | 1 tokTokens:--color-background-utility-warning-hover |
--color-yellow-11 | #ab6400 | #ab6400 | 1 tokTokens:--color-content-utility-warning |
--color-yellow-12 | #4f3422 | #4f3422 | 2 tok1 fileTokens:--color-content-on-utility-warning, --color-content-utility-warning Files:packages/tokens/src/assurance.css |
yellow-dark12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--color-yellow-dark-1 | #16120a | #16120a | orphan |
--color-yellow-dark-2 | #1d180f | #1d180f | orphan |
--color-yellow-dark-3 | #302008 | #302008 | orphan |
--color-yellow-dark-4 | #3f2700 | #3f2700 | orphan |
--color-yellow-dark-5 | #4d3000 | #4d3000 | orphan |
--color-yellow-dark-6 | #5c3d05 | #5c3d05 | orphan |
--color-yellow-dark-7 | #714f19 | #714f19 | orphan |
--color-yellow-dark-8 | #8f6424 | #8f6424 | orphan |
--color-yellow-dark-9 | #ffc53d | #ffc53d | orphan |
--color-yellow-dark-10 | #ffd60a | #ffd60a | orphan |
--color-yellow-dark-11 | #f1a10d | #f1a10d | orphan |
--color-yellow-dark-12 | #ffe7b3 | #ffe7b3 | orphan |
Typography 42
The individual values available for font-family, font-size, font-weight, font-style, line-height, letter-spacing, and text-transform. Every one is named `--<css-property>-<value>` — the property it sets plus the value it holds — so the name reads as the declaration it ends up in. They are combined into COMPOSITE tokens at tier 2 (`--typography-<intention>[-<size>]-<property>`), which src/typography.css assembles into the `.typography-*` classes (the `.type-*` spellings beside them are the deprecated aliases, kept resolving via migrations.json). Components and spokes reference a role; nothing outside this tier assembles primitives at the call site.
font-family2
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--font-family-dm-mono | 'DM Mono', monospace | 'DM Mono', monospace | 1 tokTokens:--typography-font-family-mono |
--font-family-dm-sans | 'DM Sans', sans-serif | 'DM Sans', sans-serif | 1 tokTokens:--typography-font-family-sans |
font-size13
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--font-size-050 | clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem) | 8 tok1 compTokens:--typography-body-2xs-font-size, --typography-code-2xs-font-size, --typography-eyebrow-sm-font-size, --typography-label-2xs-font-size, --typography-label-2xs-strong-font-size, --typography-microcopy-2xs-font-size, --typography-microcopy-2xs-strong-font-size, --typography-microcopy-2xs-subtle-font-size Components:esa-avatar |
--font-size-100 | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | clamp(0.625rem, 0.56rem + 0.32vw, 0.75rem) | 9 tok2 comp1 fileTokens:--typography-body-xs-font-size, --typography-code-xs-font-size, --typography-eyebrow-md-font-size, --typography-label-xs-font-size, --typography-label-xs-strong-font-size, --typography-meta-font-size, --typography-microcopy-xs-font-size, --typography-microcopy-xs-strong-font-size, --typography-microcopy-xs-subtle-font-size Components:esa-avatar, esa-header-nav Files:packages/spoke-template/src/pages/index.astro |
--font-size-150 | clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) | 9 tok2 compTokens:--grid-row-font-size, --typography-body-sm-font-size, --typography-code-sm-font-size, --typography-label-sm-font-size, --typography-label-sm-strong-font-size, --typography-microcopy-code-sm-font-size, --typography-microcopy-sm-font-size, --typography-microcopy-sm-strong-font-size, --typography-microcopy-sm-subtle-font-size Components:esa-link-column, esa-stat |
--font-size-200 | clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) | 8 tok3 comp1 fileTokens:--typography-body-md-font-size, --typography-code-md-font-size, --typography-label-md-font-size, --typography-label-md-strong-font-size, --typography-microcopy-code-md-font-size, --typography-microcopy-md-font-size, --typography-microcopy-md-strong-font-size, --typography-microcopy-md-subtle-font-size Components:esa-avatar, esa-page-header, esa-stat Files:packages/spoke-template/src/pages/index.astro |
--font-size-250 | clamp(0.8125rem, 0.71rem + 0.5vw, 1.0625rem) | clamp(0.8125rem, 0.71rem + 0.5vw, 1.0625rem) | 1 tokTokens:--typography-title-sm-strong-font-size |
--font-size-300 | clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | clamp(0.875rem, 0.77rem + 0.52vw, 1.125rem) | 8 tok1 comp1 fileTokens:--typography-body-lg-font-size, --typography-code-lg-font-size, --typography-label-lg-font-size, --typography-label-lg-strong-font-size, --typography-microcopy-code-lg-font-size, --typography-microcopy-lg-font-size, --typography-microcopy-lg-strong-font-size, --typography-microcopy-lg-subtle-font-size Components:esa-app-shell Files:packages/spoke-template/src/pages/index.astro |
--font-size-400 | clamp(1rem, 0.88rem + 0.6vw, 1.25rem) | clamp(1rem, 0.88rem + 0.6vw, 1.25rem) | 2 tok1 compTokens:--typography-title-font-size, --typography-title-strong-font-size Components:esa-avatar |
--font-size-500 | clamp(1.125rem, 0.98rem + 0.72vw, 1.5rem) | clamp(1.125rem, 0.98rem + 0.72vw, 1.5rem) | 1 tok1 fileTokens:--typography-heading-md-font-size Files:packages/spoke-template/src/pages/index.astro |
--font-size-600 | clamp(1.375rem, 1.2rem + 0.88vw, 1.875rem) | clamp(1.375rem, 1.2rem + 0.88vw, 1.875rem) | 1 tok1 comp1 fileTokens:--typography-heading-lg-font-size Components:esa-page-header Files:packages/spoke-template/src/pages/index.astro |
--font-size-700 | clamp(1.625rem, 1.41rem + 1.08vw, 2.25rem) | clamp(1.625rem, 1.41rem + 1.08vw, 2.25rem) | 2 tok1 compTokens:--stat-value-size, --typography-display-sm-font-size Components:esa-stat |
--font-size-800 | clamp(2rem, 1.73rem + 1.35vw, 2.75rem) | clamp(2rem, 1.73rem + 1.35vw, 2.75rem) | 1 tok1 compTokens:--typography-display-font-size Components:esa-page-header |
--font-size-900 | clamp(2.5rem, 2.15rem + 1.75vw, 3.375rem) | clamp(2.5rem, 2.15rem + 1.75vw, 3.375rem) | orphan |
--font-size-1000 | clamp(3rem, 2.6rem + 2vw, 4rem) | clamp(3rem, 2.6rem + 2vw, 4rem) | orphan |
font-weight12
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--font-weight-100 | 100 | 100 | orphan |
--font-weight-200 | 200 | 200 | orphan |
--font-weight-300 | 300 | 300 | 1 tokTokens:--typography-font-weight-light |
--font-weight-350 | 350 | 350 | 1 tokTokens:--typography-font-weight-regular |
--font-weight-400 | 400 | 400 | orphan |
--font-weight-500 | 500 | 500 | 1 tokTokens:--typography-font-weight-medium |
--font-weight-550 | 550 | 550 | 1 tokTokens:--typography-font-weight-semibold |
--font-weight-600 | 600 | 600 | orphan |
--font-weight-650 | 650 | 650 | 1 tokTokens:--typography-font-weight-bold |
--font-weight-700 | 700 | 700 | orphan |
--font-weight-800 | 800 | 800 | orphan |
--font-weight-900 | 900 | 900 | orphan |
font-style2
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--font-style-italic | italic | italic | 4 compComponents:esa-combobox, esa-filter-dropdown, esa-input-tag, esa-select |
--font-style-normal | normal | normal | orphan |
line-height4
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--line-height-none | 1 | 1 | 18 tok1 compTokens:--typography-microcopy-2xs-line-height, --typography-microcopy-2xs-strong-line-height, --typography-microcopy-2xs-subtle-line-height, --typography-microcopy-code-lg-line-height, --typography-microcopy-code-md-line-height, --typography-microcopy-code-sm-line-height, --typography-microcopy-lg-line-height, --typography-microcopy-lg-strong-line-height, --typography-microcopy-lg-subtle-line-height, --typography-microcopy-md-line-height, --typography-microcopy-md-strong-line-height, --typography-microcopy-md-subtle-line-height, --typography-microcopy-sm-line-height, --typography-microcopy-sm-strong-line-height, --typography-microcopy-sm-subtle-line-height, --typography-microcopy-xs-line-height, --typography-microcopy-xs-strong-line-height, --typography-microcopy-xs-subtle-line-height Components:esa-app-shell |
--line-height-normal | 1.6 | 1.6 | 25 tok1 compTokens:--typography-body-2xs-line-height, --typography-body-md-line-height, --typography-body-sm-line-height, --typography-body-xs-line-height, --typography-code-2xs-line-height, --typography-code-lg-line-height, --typography-code-md-line-height, --typography-code-sm-line-height, --typography-code-xs-line-height, --typography-eyebrow-md-line-height, --typography-eyebrow-sm-line-height, --typography-label-2xs-line-height, --typography-label-2xs-strong-line-height, --typography-label-lg-line-height, --typography-label-lg-strong-line-height, --typography-label-md-line-height, --typography-label-md-strong-line-height, --typography-label-sm-line-height, --typography-label-sm-strong-line-height, --typography-label-xs-line-height, --typography-label-xs-strong-line-height, --typography-meta-line-height, --typography-title-line-height, --typography-title-sm-strong-line-height, --typography-title-strong-line-height Components:esa-page-header |
--line-height-relaxed | 1.8 | 1.8 | 1 tokTokens:--typography-body-lg-line-height |
--line-height-tight | 1.3 | 1.3 | 4 tokTokens:--typography-display-line-height, --typography-display-sm-line-height, --typography-heading-lg-line-height, --typography-heading-md-line-height |
letter-spacing5
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--letter-spacing-default | 0.01em | 0.01em | 42 tokTokens:--typography-body-2xs-letter-spacing, --typography-body-lg-letter-spacing, --typography-body-md-letter-spacing, --typography-body-sm-letter-spacing, --typography-body-xs-letter-spacing, --typography-code-2xs-letter-spacing, --typography-code-lg-letter-spacing, --typography-code-md-letter-spacing, --typography-code-sm-letter-spacing, --typography-code-xs-letter-spacing, --typography-label-2xs-letter-spacing, --typography-label-2xs-strong-letter-spacing, --typography-label-lg-letter-spacing, --typography-label-lg-strong-letter-spacing, --typography-label-md-letter-spacing, --typography-label-md-strong-letter-spacing, --typography-label-sm-letter-spacing, --typography-label-sm-strong-letter-spacing, --typography-label-xs-letter-spacing, --typography-label-xs-strong-letter-spacing, --typography-meta-letter-spacing, --typography-microcopy-2xs-letter-spacing, --typography-microcopy-2xs-strong-letter-spacing, --typography-microcopy-2xs-subtle-letter-spacing, --typography-microcopy-code-lg-letter-spacing, --typography-microcopy-code-md-letter-spacing, --typography-microcopy-code-sm-letter-spacing, --typography-microcopy-lg-letter-spacing, --typography-microcopy-lg-strong-letter-spacing, --typography-microcopy-lg-subtle-letter-spacing, --typography-microcopy-md-letter-spacing, --typography-microcopy-md-strong-letter-spacing, --typography-microcopy-md-subtle-letter-spacing, --typography-microcopy-sm-letter-spacing, --typography-microcopy-sm-strong-letter-spacing, --typography-microcopy-sm-subtle-letter-spacing, --typography-microcopy-xs-letter-spacing, --typography-microcopy-xs-strong-letter-spacing, --typography-microcopy-xs-subtle-letter-spacing, --typography-title-letter-spacing, --typography-title-sm-strong-letter-spacing, --typography-title-strong-letter-spacing |
--letter-spacing-normal | 0 | 0 | orphan |
--letter-spacing-tight | -0.01em | -0.01em | 4 tok1 compTokens:--typography-display-letter-spacing, --typography-display-sm-letter-spacing, --typography-heading-lg-letter-spacing, --typography-heading-md-letter-spacing Components:esa-app-shell |
--letter-spacing-wide | 0.03em | 0.03em | 1 tokTokens:--typography-eyebrow-md-letter-spacing |
--letter-spacing-wider | 0.06em | 0.06em | 1 tokTokens:--typography-eyebrow-sm-letter-spacing |
text-transform4
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--text-transform-capitalize | capitalize | capitalize | orphan |
--text-transform-lowercase | lowercase | lowercase | orphan |
--text-transform-none | none | none | orphan |
--text-transform-uppercase | uppercase | uppercase | 2 tokTokens:--typography-eyebrow-md-text-transform, --typography-eyebrow-sm-text-transform |
Spacing 15
The one linear-then-modular scale. Spokes inherit this unchanged — re-skin color and type, not density.
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--spacing-050 | 0.125rem | 0.125rem | 10 comp1 fileComponents:esa-alert-box, esa-card, esa-combobox, esa-file-list, esa-filter-pills, esa-input-tag, esa-page-header, esa-select, esa-stat, esa-tab-layout Files:packages/tokens/src/layouts.css |
--spacing-100 | 0.25rem | 0.25rem | 2 tok37 comp4 fileTokens:--form-help-gap, --form-label-gap Components:esa-app-shell, esa-badge, esa-breadcrumbs, esa-button-toggle, esa-card, esa-checkbox-group, esa-chip-group, esa-color-picker, esa-combobox, esa-command-palette, esa-date-picker, esa-dropdown-menu, esa-empty-state, esa-entity-search, esa-error-summary, esa-field-error, esa-file-upload, esa-filter-clear-button, esa-filter-dropdown, esa-filter-pills, esa-header-nav, esa-input-tag, esa-link-column, esa-page-header, esa-pagination, esa-pill, esa-pillbox, esa-progress-bar, esa-radio-group, esa-range-slider, esa-search-panel, esa-select, esa-sidebar-nav, esa-snackbar-item, esa-tab-layout, esa-text-field, esa-textarea Files:packages/docs/src/ApiTable.astro, packages/docs/src/Preview.astro, packages/spoke-template/src/pages/index.astro, packages/tokens/src/layouts.css |
--spacing-150 | 0.375rem | 0.375rem | 11 comp3 fileComponents:esa-badge, esa-button-toggle, esa-chip-group, esa-confirm-dialog, esa-entity-search, esa-file-list, esa-filter-dropdown, esa-header-nav, esa-pill, esa-tab-layout, esa-tooltip Files:packages/docs/src/ColorScale.astro, packages/docs/src/DocsShell.astro, packages/spoke-template/src/pages/index.astro |
--spacing-200 | 0.5rem | 0.5rem | 3 tok45 comp8 fileTokens:--grid-cell-padding-y, --grid-toolbar-gap, --grid-toolbar-padding Components:esa-app-shell, esa-badge, esa-breadcrumbs, esa-button, esa-button-toggle, esa-card, esa-checkbox, esa-checkbox-group, esa-chip-group, esa-collapsible, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-danger-zone, esa-date-picker, esa-dialog, esa-dropdown-menu, esa-empty-state, esa-entity-search, esa-error-summary, esa-file-list, esa-file-upload, esa-filter-clear-button, esa-filter-container, esa-filter-dropdown, esa-filter-pills, esa-header-nav, esa-input-tag, esa-link-column, esa-nav-dropdown, esa-page-header, esa-pagination, esa-pill, esa-pillbox, esa-radio-group, esa-search-panel, esa-select, esa-sidebar-nav, esa-snackbar-container, esa-snackbar-item, esa-switch-toggle, esa-tab-layout, esa-text-field, esa-textarea Files:packages/docs/src/ColorScale.astro, packages/docs/src/DocsShell.astro, packages/docs/src/TypeFoundation.astro, packages/spoke-template/src/pages/design-system/foundations/iconography.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro, packages/spoke-template/src/pages/patterns/index.astro, packages/tokens/src/layouts.css |
--spacing-250 | 0.625rem | 0.625rem | 13 comp5 fileComponents:esa-badge, esa-button, esa-button-toggle, esa-chip-group, esa-color-picker, esa-combobox, esa-date-picker, esa-entity-search, esa-input-tag, esa-select, esa-text-field, esa-textarea, esa-tooltip Files:packages/docs/src/Api.astro, packages/docs/src/ApiTable.astro, packages/docs/src/DocsShell.astro, packages/docs/src/SpacingFoundation.astro, packages/spoke-template/src/pages/index.astro |
--spacing-300 | 0.75rem | 0.75rem | 3 tok41 comp11 fileTokens:--file-list-row-padding-x, --grid-cell-padding-x, --grid-toolbar-padding Components:esa-alert-box, esa-app-shell, esa-badge, esa-button, esa-button-toggle, esa-card, esa-chart, esa-chip-group, esa-collapsible, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-danger-zone, esa-date-picker, esa-dialog, esa-dropdown-menu, esa-empty-state, esa-entity-search, esa-error-summary, esa-file-list, esa-file-upload, esa-filter-dropdown, esa-filter-pills, esa-header-nav, esa-input-tag, esa-loading-overlay, esa-nav-dropdown, esa-page-header, esa-pill, esa-pillbox, esa-popover, esa-range-slider, esa-search-panel, esa-select, esa-side-dialog, esa-sidebar-nav, esa-snackbar-item, esa-tab-layout, esa-text-field, esa-textarea Files:packages/docs/src/ApiTable.astro, packages/docs/src/ColorFoundation.astro, packages/docs/src/DocsShell.astro, packages/docs/src/Preview.astro, packages/docs/src/PropsTable.astro, packages/docs/src/RadiusFoundation.astro, packages/docs/src/SpacingFoundation.astro, packages/spoke-template/src/pages/design-system/foundations/iconography.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro, packages/tokens/src/layouts.css |
--spacing-400 | 1rem | 1rem | 30 comp12 fileComponents:esa-alert-box, esa-app-bar, esa-button, esa-button-toggle, esa-card, esa-checkbox-group, esa-chip-group, esa-collapsible, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-date-picker, esa-empty-state, esa-entity-search, esa-error-summary, esa-file-upload, esa-filter-dropdown, esa-header-nav, esa-input-tag, esa-pagination, esa-radio-group, esa-search-panel, esa-select, esa-side-dialog, esa-sidebar-nav, esa-snackbar-item, esa-tab-layout, esa-text-field, esa-textarea Files:packages/docs/src/Api.astro, packages/docs/src/ApiTable.astro, packages/docs/src/DocsShell.astro, packages/docs/src/Preview.astro, packages/docs/src/PropsTable.astro, packages/docs/src/RadiusFoundation.astro, packages/docs/src/SpacingFoundation.astro, packages/docs/src/TypeFoundation.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro, packages/spoke-template/src/pages/patterns/index.astro, packages/tokens/src/layouts.css |
--spacing-500 | 1.5rem | 1.5rem | 11 comp11 fileComponents:esa-app-shell, esa-back-to-top, esa-card, esa-confirm-dialog, esa-dialog, esa-filter-dropdown, esa-page-header, esa-search-panel, esa-side-dialog, esa-snackbar-container, esa-tab-layout Files:packages/docs/src/ApiTable.astro, packages/docs/src/ColorScale.astro, packages/docs/src/DocsShell.astro, packages/docs/src/Preview.astro, packages/docs/src/RadiusFoundation.astro, packages/docs/src/SpacingFoundation.astro, packages/docs/src/TypeFoundation.astro, packages/spoke-template/src/pages/design-system/foundations/iconography.astro, packages/spoke-template/src/pages/design-system/index.astro, packages/spoke-template/src/pages/index.astro, packages/tokens/src/layouts.css |
--spacing-600 | 2rem | 2rem | 7 comp5 fileComponents:esa-app-bar, esa-command-palette, esa-container, esa-empty-state, esa-entity-search, esa-file-upload, esa-header-nav Files:packages/docs/src/ColorFoundation.astro, packages/docs/src/DocsShell.astro, packages/docs/src/Preview.astro, packages/spoke-template/src/pages/index.astro, packages/tokens/src/layouts.css |
--spacing-650 | 2.5rem | 2.5rem | orphan |
--spacing-700 | 3rem | 3rem | 3 comp3 fileComponents:esa-card, esa-entity-search, esa-search-panel Files:packages/docs/src/DocsShell.astro, packages/docs/src/SpacingFoundation.astro, packages/tokens/src/layouts.css |
--spacing-800 | 4rem | 4rem | 1 comp1 fileComponents:esa-empty-state Files:packages/spoke-template/src/pages/index.astro |
--spacing-900 | 6rem | 6rem | 2 fileFiles:packages/docs/src/DocsShell.astro, packages/spoke-template/src/pages/index.astro |
--spacing-950 | 7.5rem | 7.5rem | orphan |
--spacing-1000 | 15rem | 15rem | orphan |
Border 11
border-radius defines the available radius values, border-width the available widths, and border-style the available styles (the rarest of the three). Tier 2 maps those into themeable roles — the model names them with t-shirt sizing, e.g. theme-border-radius-large. Most components wire to the tier-2 roles, but radius and the other border properties can also be controlled per component at tier 3. Two of the three axes ship here: seven --radius-* steps and four --border-width-* steps (100–400 = 1–4px), each with a tier-2 role above it and tier-3 hooks below. border-style is deliberately absent — 56 of the 57 borders in the kit are solid and the one dashed border is the file-upload dropzone affordance, so a --border-style-solid token would alias a keyword nobody would re-point. Two departures from the model, both on purpose. The roles are named by INTENTION rather than t-shirt size — control / surface / card / overlay / pill for radius — because naming WHERE a corner belongs lets a theme round its cards without rounding every menu, which radius-lg cannot express. And width gets exactly ONE role, --border-width-default, because it turned out to have exactly one: the hairline, read by the 49 real borders in the kit. Every other width here (2px, 3px, 4px) is internal micro-geometry — spinner rings, the kbd keycap lip, a chevron built from two borders — which SPEC.md excludes from the theming surface by name, so those stay literals rather than becoming a role nobody can point at.
border-radius7
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--radius-050 | 0.125rem | 0.125rem | 1 tok1 fileTokens:--radius-xs Files:packages/spoke-template/src/styles/theme-__SPOKE_SLUG__.css |
--radius-100 | 0.25rem | 0.25rem | 2 tok2 fileTokens:--radius-chip, --radius-sm Files:packages/spoke-template/src/pages/index.astro, packages/spoke-template/src/styles/theme-__SPOKE_SLUG__.css |
--radius-200 | 0.5rem | 0.5rem | 1 tok3 fileTokens:--radius-md Files:packages/docs/src/RadiusFoundation.astro, packages/spoke-template/src/pages/design-system/foundations/iconography.astro, packages/spoke-template/src/styles/theme-__SPOKE_SLUG__.css |
--radius-300 | 0.5rem | 0.5rem | 1 fileFiles:packages/spoke-template/src/pages/index.astro |
--radius-400 | 0.75rem | 0.75rem | 1 tok3 fileTokens:--radius-lg Files:packages/docs/src/RadiusFoundation.astro, packages/spoke-template/src/pages/index.astro, packages/spoke-template/src/styles/theme-__SPOKE_SLUG__.css |
--radius-500 | 1rem | 1rem | orphan |
--radius-full | 9999px | 9999px | 1 tok2 fileTokens:--radius-pill Files:packages/docs/src/RadiusFoundation.astro, packages/spoke-template/src/pages/index.astro |
border-width4
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--border-width-100 | 1px | 1px | 1 tokTokens:--border-width-default |
--border-width-200 | 2px | 2px | 2 tokTokens:--border-width-emphasis, --border-width-focus |
--border-width-300 | 3px | 3px | orphan |
--border-width-400 | 4px | 4px | orphan |
border-stylenone definedShadow 25
Shadow is a composite token in the same way typography is: color, x offset, y offset, blur and spread work together to produce one stylistic result. Technically you define each of those axes and cluster them into a composite. In practice it is the weird one — you often do not need x / y / blur / spread to be addressable, so a lot of the time the shadow is just described at tier 2 directly. Component-specific shadow values can be created at tier 3 as well. Both halves of that ship here, which is why this category no longer diverges. Tier 1 holds the axes as raw material; tier 2 does the clustering, as --elevation-1…6 — the model's "just describe them at the tier two level", taken literally. --elevation-4 compiles to var(--shadow-offset-x) var(--shadow-offset-y-300) var(--shadow-blur-300) var(--shadow-spread-300) var(--shadow-color-300), and tier 3 adds the component-specific values the model mentions last (--grid-shadow, --command-palette-shadow, --nav-dropdown-panel-shadow). Three calls worth recording. The composite belongs at tier 2, not tier 1: choosing which combination of axes is a resting card and which is a modal is an intent, so the old ordinal --shadow-050…500 were intent wearing a tier-1 name — the same misfiling as --transition-fast — and formed a 1:1 passthrough with elevation besides. They are gone; migrations.json keeps them resolving. Doing the axes at all was optional by the model, but the color axis was not optional in practice: every shadow used to terminate in a hardcoded rgba(0,0,0,α) referencing nothing, so a theme could not tint its shadows. offset-x is a single shared token rather than a ramp because every shadow casts straight down — same call as --border-width-default — and the colors deliberately do NOT alias black-a, which starts at 0.05 and steps by 0.05, since five of these six alphas (0.03–0.08) fall between its steps.
offset-x1
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--shadow-offset-x | 0 | 0 | 6 tokTokens:--elevation-1, --elevation-2, --elevation-3, --elevation-4, --elevation-5, --elevation-6 |
offset-y6
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--shadow-offset-y-050 | 1px | 1px | 1 tokTokens:--elevation-1 |
--shadow-offset-y-100 | 2px | 2px | 1 tokTokens:--elevation-2 |
--shadow-offset-y-200 | 4px | 4px | 1 tokTokens:--elevation-3 |
--shadow-offset-y-300 | 6px | 6px | 1 tokTokens:--elevation-4 |
--shadow-offset-y-400 | 8px | 8px | 1 tokTokens:--elevation-5 |
--shadow-offset-y-500 | 20px | 20px | 1 tokTokens:--elevation-6 |
blur6
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--shadow-blur-050 | 4px | 4px | 1 tokTokens:--elevation-1 |
--shadow-blur-100 | 12px | 12px | 1 tokTokens:--elevation-2 |
--shadow-blur-200 | 20px | 20px | 1 tokTokens:--elevation-3 |
--shadow-blur-300 | 24px | 24px | 1 tokTokens:--elevation-4 |
--shadow-blur-400 | 32px | 32px | 1 tokTokens:--elevation-5 |
--shadow-blur-500 | 60px | 60px | 1 tokTokens:--elevation-6 |
spread6
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--shadow-spread-050 | 0 | 0 | 1 tokTokens:--elevation-1 |
--shadow-spread-100 | 0 | 0 | 1 tokTokens:--elevation-2 |
--shadow-spread-200 | -4px | -4px | 1 tokTokens:--elevation-3 |
--shadow-spread-300 | -6px | -6px | 1 tokTokens:--elevation-4 |
--shadow-spread-400 | -8px | -8px | 1 tokTokens:--elevation-5 |
--shadow-spread-500 | 0 | 0 | 1 tokTokens:--elevation-6 |
color6
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--shadow-color-050 | rgba(0, 0, 0, 0.03) | rgba(0, 0, 0, 0.03) | 1 tokTokens:--elevation-1 |
--shadow-color-100 | rgba(0, 0, 0, 0.04) | rgba(0, 0, 0, 0.04) | 1 tokTokens:--elevation-2 |
--shadow-color-200 | rgba(0, 0, 0, 0.06) | rgba(0, 0, 0, 0.06) | 1 tokTokens:--elevation-3 |
--shadow-color-300 | rgba(0, 0, 0, 0.07) | rgba(0, 0, 0, 0.07) | 1 tokTokens:--elevation-4 |
--shadow-color-400 | rgba(0, 0, 0, 0.08) | rgba(0, 0, 0, 0.08) | 1 tokTokens:--elevation-5 |
--shadow-color-500 | rgba(0, 0, 0, 0.2) | rgba(0, 0, 0, 0.2) | 1 tokTokens:--elevation-6 |
Animation 16
Animation is a COMPOSITE family, so tier 1 holds the ingredients and tier 2 assembles them. The ingredients are two: duration (how long) and ease (how it progresses through that duration). The animated property — opacity, color — is deliberately NOT tokenised at tier 1; the model is explicit that properties "are more just applied" at the call site. Tier 2 is where the named animations live. Tier 3 (component-specific animations) is sanctioned but the model notes it has never been needed in production. These work in code but Figma cannot consume animation tokens.
Adoption: All 23 `animation:` call sites are on tokens; 22 of the 74 `transition:` declarations still hold literals. The animation pass settled three disagreements nothing had chosen: four components were spinning at three different speeds (600ms, 750ms, 1000ms) because there was no token to spin at, and several entrances and exits shared one `ease` curve where the system now distinguishes decelerate from accelerate. The remaining transition literals still ignore the `prefers-reduced-motion` override, which can only reach tokenised call sites. Both figures are derived at build time — this sentence used to hardcode "42 of the 73", and by the time anyone re-checked, four different counts were in circulation because the prose could not carry the counting rule. See motionAdoption above for the rule.
duration11
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--duration-0 | 0ms | 0ms | 7 tokTokens:--animation-enter, --animation-exit, --animation-overlay-enter, --animation-overlay-exit, --transition-base, --transition-fast, --transition-slow |
--duration-75 | 75ms | 75ms | orphan |
--duration-100 | 100ms | 100ms | orphan |
--duration-150 | 150ms | 150ms | 3 tokTokens:--animation-enter, --animation-exit, --transition-fast |
--duration-200 | 200ms | 200ms | 2 tokTokens:--animation-overlay-exit, --transition-base |
--duration-250 | 250ms | 250ms | 1 tokTokens:--animation-overlay-enter |
--duration-300 | 300ms | 300ms | 1 tokTokens:--transition-slow |
--duration-500 | 500ms | 500ms | orphan |
--duration-750 | 750ms | 750ms | 1 tokTokens:--animation-spin |
--duration-1000 | 1000ms | 1000ms | orphan |
--duration-1500 | 1500ms | 1500ms | 1 tokTokens:--animation-indeterminate |
easing5
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--easing-emphasized | ease-in-out | ease-in-out | 1 tokTokens:--animation-indeterminate |
--easing-enter | ease-out | ease-out | 2 tokTokens:--animation-enter, --animation-overlay-enter |
--easing-exit | ease-in | ease-in | 2 tokTokens:--animation-exit, --animation-overlay-exit |
--easing-linear | linear | linear | 1 tokTokens:--animation-spin |
--easing-standard | ease | ease | 3 tokTokens:--transition-base, --transition-fast, --transition-slow |
Z-index 0
z-index defines the stacking order. It cannot be applied in Figma, and it is a genuine judgement call whether to manage stacking as tokens at all — they are a known source of confusion. Where they are kept, the recommendation is to manage them as core/shared tokens rather than per-theme.
| Token | Resolution chain | Value | Used by |
|---|
Other 5
Primitives that fit none of the categories above — currently icon sizing and the minimum touch target. Not a defect, but if this grows it wants its own category.
| Token | Resolution chain | Value | Used by |
|---|---|---|---|
--icon-size-lg | 24px | 24px | 2 compComponents:esa-file-upload, esa-icon |
--icon-size-md | 20px | 20px | 3 compComponents:esa-file-upload, esa-icon, esa-select |
--icon-size-sm | 16px | 16px | 4 compComponents:esa-combobox, esa-file-upload, esa-icon, esa-input-tag |
--icon-size-xl | 28px | 28px | 1 compComponents:esa-icon |
--icon-size-xs | 14px | 14px | 1 compComponents:esa-icon |