Coda — Reach for the primitive
No role by design — the keyword is already the vocabulary, or it's a named edge.
Type — weight & tracking (no role)
| token | description |
|---|---|
| --font-weight-light | 300 — nothing in the chrome uses it; offered for display type |
| --font-weight-normal | 400 |
| --font-weight-medium | 500 |
| --font-weight-semibold | 600 |
| --font-weight-bold | 700 |
| --letter-spacing-normal | no tracking |
| --letter-spacing-wide | the widest tracking the chrome uses |
| --letter-spacing-wider | wider than the chrome ever went — for small caps and labels |
| --line-height-flush | 1 — single-line chrome |
| --line-height-tight | headings |
| --line-height-normal | running text |
| --line-height-loose | long-form reading, looser than the chrome needs |
Space — named edges
| token | description |
|---|---|
| --space-void | a deliberate 0 |
| --space-hairline | 1px, does not scale |
Borders — edges & specials
| token | description |
|---|---|
| --border-radius-void | sharp (0) — what Classic sets everything to |
| --border-radius-circle | circle / ellipse |
| --border-radius-pill | pill |
| --border-width-1 | the standard hairline, behind --border-width-default |
| --border-width-2 | a 2px edge |
| --border-width-4 | a 4px edge — heavier than anything the chrome draws |
Surfaces — bevels reached for directly
| token | description |
|---|---|
| --bevel-raised-outer | the classic raised edge, outer ring |
| --bevel-raised-inner | the classic raised edge, inner ring |
| --bevel-sunken-outer | the classic sunken edge, outer ring |
| --bevel-sunken-inner | the classic sunken edge, inner ring |
| --bevel-window-outer | a window’s own edge, outer ring |
| --bevel-window-inner | a window’s own edge, inner ring |
| --bevel-flat | no relief |