# Token usage reference

Generated from the legacy palette plus `contract.json` by `node scripts/tokens/generate.mjs`. All semantic and component roles are listed; primitive values are in the DTCG exports. No legacy name is deprecated or removed.

Use browser Find or search `usage.json` by `path`, `purpose`, `scope`, `override`, `legacy` or `css`. Copy the exact path/CSS name from each row. This machine-readable file lets batch 3 add search/copy controls without maintaining another value table.

Read [architecture, units and tenant boundaries](ARCHITECTURE.md) first. Every colour pairing, including failed state/boundary combinations and computed replacements, is in the [contrast matrix](contrast-matrix.md); the partner column is role guidance, not a blanket contrast guarantee. Only the matrix’s required-pair table lists asserted combinations.

CSS: import `portable.css` (it imports the original `tokens.css`). New colours are complete CSS colours: `color: var(--sw-semantic-color-ink)`. Legacy colours remain RGB triplets: `color: rgb(var(--color-ink))`. Component aliases inherit semantic changes. DTCG paths are identical to the first column. Native names replace dots/hyphens with underscores and begin `sw_`.

> **Current rule (v2.1.0, 2026-11-13; DSA-014):** `line` and `danger-line` are decorative. `outline` has restricted backgrounds; use `boundary-strong` for essential neutral boundaries across hover/pressed surfaces. Use `state-indicator` (accent-ink), or tenant brand-boundary, for essential thin selected marks. Preserve the legacy colours.

## semantic roles

| Path / CSS / legacy | Purpose / scope / override | Use | Do not use | Light | Dark | Contrast partner | Aliases light / dark |
|---|---|---|---|---|---|---|---|
| `semantic.color.bg` / `--sw-semantic-color-bg` / --color-bg | bg background; system; override: none | Page canvas | Do not use as text or an essential boundary. | #FFF4E8 | #000000 | ink, muted | "{primitive.color.hexfff4e8}" / "{primitive.color.hex000000}" |
| `semantic.color.surface` / `--sw-semantic-color-surface` / --color-surface | surface background; system; override: none | Inset or secondary surface | Do not use as text or an essential boundary. | #F6ECE0 | #0B0B0B | ink, muted | "{primitive.color.hexf6ece0}" / "{primitive.color.hex0b0b0b}" |
| `semantic.color.panel` / `--sw-semantic-color-panel` / --color-panel | panel background; system; override: none | Cards and floating panels | Do not use as text or an essential boundary. | #FFFFFF | #141414 | ink, muted | "{primitive.color.hexffffff}" / "{primitive.color.hex141414}" |
| `semantic.color.hover` / `--sw-semantic-color-hover` / --color-hover | hover background; system; override: none | Neutral hover state | Do not use as text or an essential boundary. | #EFE6DB | #1C1C1C | ink, muted | "{primitive.color.hexefe6db}" / "{primitive.color.hex1c1c1c}" |
| `semantic.color.line` / `--sw-semantic-color-line` / --color-line | Decorative divider; system; override: none | Nonessential card separators; accompany danger with text/icon | Never the only necessary control, focus or error cue; see contrast matrix. | #D5D0C6 | #2C2C2C | bg, surface, panel, hover | "{primitive.color.hexd5d0c6}" / "{primitive.color.hex2c2c2c}" |
| `semantic.color.outline` / `--sw-semantic-color-outline` / --color-outline | Legacy neutral control outline; system; override: none | Only pairings marked PASS; use boundary-strong across hover and pressed surfaces | Never the only necessary control, focus or error cue; see contrast matrix. | #828A83 | #787878 | bg, surface, panel, hover | "{primitive.color.hex828a83}" / "{primitive.color.hex787878}" |
| `semantic.color.ink` / `--sw-semantic-color-ink` / --color-ink | Primary text and icons; system; override: none | Content, labels and icons on neutral surfaces | No alpha text; no use on filled teal or bright status fills. | #142C2A | #FFF4E8 | bg, surface, panel, hover | "{primitive.color.hex142c2a}" / "{primitive.color.hexfff4e8}" |
| `semantic.color.muted` / `--sw-semantic-color-muted` / --color-muted | Secondary text, labels and placeholders; system; override: none | Supporting text and placeholders with a visible label | No alpha text; no use on filled teal or bright status fills. | #5B6863 | #ACACAC | bg, surface, panel, hover | "{primitive.color.hex5b6863}" / "{primitive.color.hexacacac}" |
| `semantic.color.focus` / `--sw-semantic-color-focus` / --color-focus | Visible keyboard focus pigment; system; override: none | 2px external outline with 2px gap on neutral surroundings | Do not rely on hue alone or place directly on a matching fill; check both adjacent colours. | #006E63 | #DFFF8F | bg, surface, panel, hover | "{primitive.color.hex006e63}" / "{primitive.color.hexdfff8f}" |
| `semantic.color.accent` / `--sw-semantic-color-accent` / --color-accent | accent fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #006E63 | #006E63 | on-accent | "{primitive.color.hex006e63}" / "{primitive.color.hex006e63}" |
| `semantic.color.accent-hover` / `--sw-semantic-color-accent-hover` / --color-accent-hover | accent-hover fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #02675D | #02675D | on-accent | "{primitive.color.hex02675d}" / "{primitive.color.hex02675d}" |
| `semantic.color.accent-active` / `--sw-semantic-color-accent-active` / --color-accent-active | accent-active fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #046158 | #046158 | on-accent | "{primitive.color.hex046158}" / "{primitive.color.hex046158}" |
| `semantic.color.on-accent` / `--sw-semantic-color-on-accent` / --color-on-accent | Label on accent fill; system; override: none | Opaque text/icons on accent default, hover and active fills | Neutral backgrounds, soft fills or another status fill without checking contrast. | #FFF4E8 | #FFF4E8 | accent, accent-hover, accent-active | "{primitive.color.hexfff4e8}" / "{primitive.color.hexfff4e8}" |
| `semantic.color.accent-soft` / `--sw-semantic-color-accent-soft` / --color-accent-soft | accent-soft opaque tint; system; override: none | Badges, pills and contextual panels | No alpha tints; no danger-soft token exists. | #E0EEEC | #121D1C | accent-ink, ink, muted (verify matrix) | "{primitive.color.hexe0eeec}" / "{primitive.color.hex121d1c}" |
| `semantic.color.accent-ink` / `--sw-semantic-color-accent-ink` / --color-accent-ink | Readable accent-ink foreground; system; override: none | Links, icons, thin selected marks on neutral/soft grounds; check exact pairing | Filled-button labels; use on-* instead. | #006E63 | #80B1A6 | bg, surface, panel, hover, corresponding soft fill | "{primitive.color.hex006e63}" / "{primitive.color.hex80b1a6}" |
| `semantic.color.brand` / `--sw-semantic-color-brand` / --color-brand | brand fill; system; override: tenant-public | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #006E63 | #006E63 | on-brand | "{primitive.color.hex006e63}" / "{primitive.color.hex006e63}" |
| `semantic.color.brand-hover` / `--sw-semantic-color-brand-hover` / --color-brand-hover | brand-hover fill; system; override: tenant-public | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #02675D | #02675D | on-brand | "{primitive.color.hex02675d}" / "{primitive.color.hex02675d}" |
| `semantic.color.brand-active` / `--sw-semantic-color-brand-active` / --color-brand-active | brand-active fill; system; override: tenant-public | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #046158 | #046158 | on-brand | "{primitive.color.hex046158}" / "{primitive.color.hex046158}" |
| `semantic.color.on-brand` / `--sw-semantic-color-on-brand` / --color-on-brand | Label on brand fill; system; override: tenant-public | Opaque text/icons on brand default, hover and active fills | Neutral backgrounds, soft fills or another status fill without checking contrast. | #FFF4E8 | #FFF4E8 | brand, brand-hover, brand-active | "{primitive.color.hexfff4e8}" / "{primitive.color.hexfff4e8}" |
| `semantic.color.brand-soft` / `--sw-semantic-color-brand-soft` / --color-brand-soft | brand-soft opaque tint; system; override: tenant-public | Badges, pills and contextual panels | No alpha tints; no danger-soft token exists. | #E0EEEC | #121D1C | brand-ink, ink, muted (verify matrix) | "{primitive.color.hexe0eeec}" / "{primitive.color.hex121d1c}" |
| `semantic.color.brand-ink` / `--sw-semantic-color-brand-ink` / --color-brand-ink | Readable brand-ink foreground; system; override: tenant-public | Links, icons, thin selected marks on neutral/soft grounds; check exact pairing | Filled-button labels; use on-* instead. | #006E63 | #80B1A6 | bg, surface, panel, hover, corresponding soft fill | "{primitive.color.hex006e63}" / "{primitive.color.hex80b1a6}" |
| `semantic.color.brand-boundary` / `--sw-semantic-color-brand-boundary` / --color-brand-boundary | Essential tenant-brand boundary; system; override: tenant-public | Links, icons, thin selected marks on neutral/soft grounds; check exact pairing | Filled-button labels; use on-* instead. | #006E63 | #80B1A6 | bg, surface, panel, hover, corresponding soft fill | "{primitive.color.hex006e63}" / "{primitive.color.hex80b1a6}" |
| `semantic.color.emphasis` / `--sw-semantic-color-emphasis` / --color-emphasis | emphasis fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #FF7447 | #FF7447 | on-emphasis | "{primitive.color.hexff7447}" / "{primitive.color.hexff7447}" |
| `semantic.color.emphasis-hover` / `--sw-semantic-color-emphasis-hover` / --color-emphasis-hover | emphasis-hover fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #FF8157 | #FF8157 | on-emphasis | "{primitive.color.hexff8157}" / "{primitive.color.hexff8157}" |
| `semantic.color.emphasis-active` / `--sw-semantic-color-emphasis-active` / --color-emphasis-active | emphasis-active fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #FF8E67 | #FF8E67 | on-emphasis | "{primitive.color.hexff8e67}" / "{primitive.color.hexff8e67}" |
| `semantic.color.on-emphasis` / `--sw-semantic-color-on-emphasis` / --color-on-emphasis | Label on emphasis fill; system; override: none | Opaque text/icons on emphasis default, hover and active fills | Neutral backgrounds, soft fills or another status fill without checking contrast. | #142C2A | #142C2A | emphasis, emphasis-hover, emphasis-active | "{primitive.color.hex142c2a}" / "{primitive.color.hex142c2a}" |
| `semantic.color.emphasis-soft` / `--sw-semantic-color-emphasis-soft` / --color-emphasis-soft | emphasis-soft opaque tint; system; override: none | Badges, pills and contextual panels | No alpha tints; no danger-soft token exists. | #FFEEE9 | #221A17 | emphasis-ink, ink, muted (verify matrix) | "{primitive.color.hexffeee9}" / "{primitive.color.hex221a17}" |
| `semantic.color.success` / `--sw-semantic-color-success` / --color-success | success fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #DFFF8F | #DFFF8F | on-success | "{primitive.color.hexdfff8f}" / "{primitive.color.hexdfff8f}" |
| `semantic.color.success-hover` / `--sw-semantic-color-success-hover` / --color-success-hover | success-hover fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #CBEA85 | #CBEA85 | on-success | "{primitive.color.hexcbea85}" / "{primitive.color.hexcbea85}" |
| `semantic.color.success-active` / `--sw-semantic-color-success-active` / --color-success-active | success-active fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #B6D57B | #B6D57B | on-success | "{primitive.color.hexb6d57b}" / "{primitive.color.hexb6d57b}" |
| `semantic.color.on-success` / `--sw-semantic-color-on-success` / --color-on-success | Label on success fill; system; override: none | Opaque text/icons on success default, hover and active fills | Neutral backgrounds, soft fills or another status fill without checking contrast. | #142C2A | #142C2A | success, success-hover, success-active | "{primitive.color.hex142c2a}" / "{primitive.color.hex142c2a}" |
| `semantic.color.success-soft` / `--sw-semantic-color-success-soft` / --color-success-soft | success-soft opaque tint; system; override: none | Badges, pills and contextual panels | No alpha tints; no danger-soft token exists. | #FBFFF2 | #20221B | success-ink, ink, muted (verify matrix) | "{primitive.color.hexfbfff2}" / "{primitive.color.hex20221b}" |
| `semantic.color.success-ink` / `--sw-semantic-color-success-ink` / --color-success-ink | Readable success-ink foreground; system; override: none | Links, icons, thin selected marks on neutral/soft grounds; check exact pairing | Filled-button labels; use on-* instead. | #536D49 | #E9FCAA | bg, surface, panel, hover, corresponding soft fill | "{primitive.color.hex536d49}" / "{primitive.color.hexe9fcaa}" |
| `semantic.color.warn` / `--sw-semantic-color-warn` / --color-warn | warn fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #FFD447 | #FFD447 | on-warn | "{primitive.color.hexffd447}" / "{primitive.color.hexffd447}" |
| `semantic.color.warn-hover` / `--sw-semantic-color-warn-hover` / --color-warn-hover | warn-hover fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #E8C344 | #E8C344 | on-warn | "{primitive.color.hexe8c344}" / "{primitive.color.hexe8c344}" |
| `semantic.color.warn-active` / `--sw-semantic-color-warn-active` / --color-warn-active | warn-active fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #D0B241 | #D0B241 | on-warn | "{primitive.color.hexd0b241}" / "{primitive.color.hexd0b241}" |
| `semantic.color.on-warn` / `--sw-semantic-color-on-warn` / --color-on-warn | Label on warn fill; system; override: none | Opaque text/icons on warn default, hover and active fills | Neutral backgrounds, soft fills or another status fill without checking contrast. | #142C2A | #142C2A | warn, warn-hover, warn-active | "{primitive.color.hex142c2a}" / "{primitive.color.hex142c2a}" |
| `semantic.color.warn-soft` / `--sw-semantic-color-warn-soft` / --color-warn-soft | warn-soft opaque tint; system; override: none | Badges, pills and contextual panels | No alpha tints; no danger-soft token exists. | #FFFAE9 | #222017 | warn-ink, ink, muted (verify matrix) | "{primitive.color.hexfffae9}" / "{primitive.color.hex222017}" |
| `semantic.color.warn-ink` / `--sw-semantic-color-warn-ink` / --color-warn-ink | Readable warn-ink foreground; system; override: none | Links, icons, thin selected marks on neutral/soft grounds; check exact pairing | Filled-button labels; use on-* instead. | #696834 | #FFDE77 | bg, surface, panel, hover, corresponding soft fill | "{primitive.color.hex696834}" / "{primitive.color.hexffde77}" |
| `semantic.color.info` / `--sw-semantic-color-info` / --color-info | info fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #B5CDFF | #B5CDFF | on-info | "{primitive.color.hexb5cdff}" / "{primitive.color.hexb5cdff}" |
| `semantic.color.info-hover` / `--sw-semantic-color-info-hover` / --color-info-hover | info-hover fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #A5BDEA | #A5BDEA | on-info | "{primitive.color.hexa5bdea}" / "{primitive.color.hexa5bdea}" |
| `semantic.color.info-active` / `--sw-semantic-color-info-active` / --color-info-active | info-active fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #95ADD4 | #95ADD4 | on-info | "{primitive.color.hex95add4}" / "{primitive.color.hex95add4}" |
| `semantic.color.on-info` / `--sw-semantic-color-on-info` / --color-on-info | Label on info fill; system; override: none | Opaque text/icons on info default, hover and active fills | Neutral backgrounds, soft fills or another status fill without checking contrast. | #142C2A | #142C2A | info, info-hover, info-active | "{primitive.color.hex142c2a}" / "{primitive.color.hex142c2a}" |
| `semantic.color.info-soft` / `--sw-semantic-color-info-soft` / --color-info-soft | info-soft opaque tint; system; override: none | Badges, pills and contextual panels | No alpha tints; no danger-soft token exists. | #F6F9FF | #1E1F22 | info-ink, ink, muted (verify matrix) | "{primitive.color.hexf6f9ff}" / "{primitive.color.hex1e1f22}" |
| `semantic.color.info-ink` / `--sw-semantic-color-info-ink` / --color-info-ink | Readable info-ink foreground; system; override: none | Links, icons, thin selected marks on neutral/soft grounds; check exact pairing | Filled-button labels; use on-* instead. | #51697B | #CBD9F8 | bg, surface, panel, hover, corresponding soft fill | "{primitive.color.hex51697b}" / "{primitive.color.hexcbd9f8}" |
| `semantic.color.danger` / `--sw-semantic-color-danger` / --color-danger | danger fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #B91C1C | #FCA5A5 | on-danger | "{primitive.color.hexb91c1c}" / "{primitive.color.hexfca5a5}" |
| `semantic.color.danger-hover` / `--sw-semantic-color-danger-hover` / --color-danger-hover | danger-hover fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #991B1B | #FDB9B6 | on-danger | "{primitive.color.hex991b1b}" / "{primitive.color.hexfdb9b6}" |
| `semantic.color.danger-active` / `--sw-semantic-color-danger-active` / --color-danger-active | danger-active fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #851E1D | #FDC9C3 | on-danger | "{primitive.color.hex851e1d}" / "{primitive.color.hexfdc9c3}" |
| `semantic.color.on-danger` / `--sw-semantic-color-on-danger` / --color-on-danger | Label on danger fill; system; override: none | Opaque text/icons on danger default, hover and active fills | Neutral backgrounds, soft fills or another status fill without checking contrast. | #FFF4E8 | #142C2A | danger, danger-hover, danger-active | "{primitive.color.hexfff4e8}" / "{primitive.color.hex142c2a}" |
| `semantic.color.danger-line` / `--sw-semantic-color-danger-line` / --color-danger-line | Decorative danger-card border; system; override: none | Nonessential card separators; accompany danger with text/icon | Never the only necessary control, focus or error cue; see contrast matrix. | #FCA5A5 | #7C6261 | bg, surface, panel, hover | "{primitive.color.hexfca5a5}" / "{primitive.color.hex7c6261}" |
| `semantic.color.sidebar` / `--sw-semantic-color-sidebar` / --color-sidebar | sidebar background; system; override: none | Sidebar ground or row hover | Do not use as text or an essential boundary. | #DFFF8F | #0B0B0B | sidebar-ink (selected rows use on-accent) | "{primitive.color.hexdfff8f}" / "{primitive.color.hex0b0b0b}" |
| `semantic.color.sidebar-hover` / `--sw-semantic-color-sidebar-hover` / --color-sidebar-hover | sidebar-hover background; system; override: none | Sidebar ground or row hover | Do not use as text or an essential boundary. | #F2FFD2 | #1C1C1C | sidebar-ink (selected rows use on-accent) | "{primitive.color.hexf2ffd2}" / "{primitive.color.hex1c1c1c}" |
| `semantic.color.sidebar-active` / `--sw-semantic-color-sidebar-active` / --color-sidebar-active | sidebar-active fill; system; override: none | Opaque named action/status fill in its stated interaction state | Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. | #006E63 | #006E63 | on-accent | "{primitive.color.hex006e63}" / "{primitive.color.hex006e63}" |
| `semantic.color.scrim` / `--sw-semantic-color-scrim` / --color-scrim | Modal backdrop pigment; system; override: none | Composite over page at named scrim opacity; isolate from dialog content | Text colour or a translucent parent of content. | #142C2A | #000000 | Composite over bg, surface, panel; not a label foreground | "{primitive.color.hex142c2a}" / "{primitive.color.hex000000}" |
| `semantic.chart.series1` / `--sw-semantic-chart-series1` / --chart-1 | Stable categorical chart fill series1; chart; override: none | Hash series identity into series1–5; add dash/shape cues | Never use fill alone as a low-contrast necessary line; never convey data by colour alone. | #006E63 | #006E63 | chart.edge; labels use ink on panel | "{primitive.color.hex006e63}" / "{primitive.color.hex006e63}" |
| `semantic.chart.series2` / `--sw-semantic-chart-series2` / --chart-2 | Stable categorical chart fill series2; chart; override: none | Hash series identity into series1–5; add dash/shape cues | Never use fill alone as a low-contrast necessary line; never convey data by colour alone. | #FF7447 | #FF7447 | chart.edge; labels use ink on panel | "{primitive.color.hexff7447}" / "{primitive.color.hexff7447}" |
| `semantic.chart.series3` / `--sw-semantic-chart-series3` / --chart-3 | Stable categorical chart fill series3; chart; override: none | Hash series identity into series1–5; add dash/shape cues | Never use fill alone as a low-contrast necessary line; never convey data by colour alone. | #DFFF8F | #DFFF8F | chart.edge; labels use ink on panel | "{primitive.color.hexdfff8f}" / "{primitive.color.hexdfff8f}" |
| `semantic.chart.series4` / `--sw-semantic-chart-series4` / --chart-4 | Stable categorical chart fill series4; chart; override: none | Hash series identity into series1–5; add dash/shape cues | Never use fill alone as a low-contrast necessary line; never convey data by colour alone. | #B5CDFF | #B5CDFF | chart.edge; labels use ink on panel | "{primitive.color.hexb5cdff}" / "{primitive.color.hexb5cdff}" |
| `semantic.chart.series5` / `--sw-semantic-chart-series5` / --chart-5 | Stable categorical chart fill series5; chart; override: none | Hash series identity into series1–5; add dash/shape cues | Never use fill alone as a low-contrast necessary line; never convey data by colour alone. | #FFD447 | #FFD447 | chart.edge; labels use ink on panel | "{primitive.color.hexffd447}" / "{primitive.color.hexffd447}" |
| `semantic.chart.edge` / `--sw-semantic-chart-edge` / --chart-edge | Chart mark edge and line casing; chart; override: none | 1px filled-mark edge, 4px casing under a 2px line | Never use fill alone as a low-contrast necessary line; never convey data by colour alone. | #142C2A | #FFF4E8 | Chart fills and panel | "{primitive.color.hex142c2a}" / "{primitive.color.hexfff4e8}" |
| `semantic.chart.danger` / `--sw-semantic-chart-danger` / --chart-danger | Explicit negative chart data; chart; override: none | Bad/negative values only; never categorical order | Never use fill alone as a low-contrast necessary line; never convey data by colour alone. | #B91C1C | #FCA5A5 | chart.edge; labels use ink on panel | "{primitive.color.hexb91c1c}" / "{primitive.color.hexfca5a5}" |
| `semantic.spacing.0` / `--sw-semantic-spacing-0` | spacing 0; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 0px | 0px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.0}" / "{primitive.spacing.0}" |
| `semantic.spacing.4` / `--sw-semantic-spacing-4` | spacing 4; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 4px | 4px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.4}" / "{primitive.spacing.4}" |
| `semantic.spacing.8` / `--sw-semantic-spacing-8` | spacing 8; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 8px | 8px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.8}" / "{primitive.spacing.8}" |
| `semantic.spacing.12` / `--sw-semantic-spacing-12` | spacing 12; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 12px | 12px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.12}" / "{primitive.spacing.12}" |
| `semantic.spacing.16` / `--sw-semantic-spacing-16` | spacing 16; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 16px | 16px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.16}" / "{primitive.spacing.16}" |
| `semantic.spacing.20` / `--sw-semantic-spacing-20` | spacing 20; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 20px | 20px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.20}" / "{primitive.spacing.20}" |
| `semantic.spacing.24` / `--sw-semantic-spacing-24` | spacing 24; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 24px | 24px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.24}" / "{primitive.spacing.24}" |
| `semantic.spacing.28` / `--sw-semantic-spacing-28` | spacing 28; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 28px | 28px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.28}" / "{primitive.spacing.28}" |
| `semantic.spacing.32` / `--sw-semantic-spacing-32` | spacing 32; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 32px | 32px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.32}" / "{primitive.spacing.32}" |
| `semantic.spacing.36` / `--sw-semantic-spacing-36` | spacing 36; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 36px | 36px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.36}" / "{primitive.spacing.36}" |
| `semantic.spacing.40` / `--sw-semantic-spacing-40` | spacing 40; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 40px | 40px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.40}" / "{primitive.spacing.40}" |
| `semantic.spacing.44` / `--sw-semantic-spacing-44` | spacing 44; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 44px | 44px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.44}" / "{primitive.spacing.44}" |
| `semantic.spacing.48` / `--sw-semantic-spacing-48` | spacing 48; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 48px | 48px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.48}" / "{primitive.spacing.48}" |
| `semantic.spacing.56` / `--sw-semantic-spacing-56` | spacing 56; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 56px | 56px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.56}" / "{primitive.spacing.56}" |
| `semantic.spacing.64` / `--sw-semantic-spacing-64` | spacing 64; system; override: none | 4px layout grid; choose the smallest step that preserves grouping | No arbitrary replacement of the named semantic/component role. | 64px | 64px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.64}" / "{primitive.spacing.64}" |
| `semantic.radius.none` / `--sw-semantic-radius-none` | radius none; system; override: none | Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | No arbitrary replacement of the named semantic/component role. | 0px | 0px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.radius.none}" / "{primitive.radius.none}" |
| `semantic.radius.sm` / `--sw-semantic-radius-sm` | radius sm; system; override: none | Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | No arbitrary replacement of the named semantic/component role. | 6px | 6px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.radius.sm}" / "{primitive.radius.sm}" |
| `semantic.radius.base` / `--sw-semantic-radius-base` | radius base; system; override: none | Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | No arbitrary replacement of the named semantic/component role. | 8px | 8px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.radius.base}" / "{primitive.radius.base}" |
| `semantic.radius.md` / `--sw-semantic-radius-md` | radius md; system; override: none | Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | No arbitrary replacement of the named semantic/component role. | 10px | 10px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.radius.md}" / "{primitive.radius.md}" |
| `semantic.radius.lg` / `--sw-semantic-radius-lg` | radius lg; system; override: none | Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | No arbitrary replacement of the named semantic/component role. | 12px | 12px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.radius.lg}" / "{primitive.radius.lg}" |
| `semantic.radius.xl` / `--sw-semantic-radius-xl` | radius xl; system; override: none | Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | No arbitrary replacement of the named semantic/component role. | 16px | 16px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.radius.xl}" / "{primitive.radius.xl}" |
| `semantic.radius.2xl` / `--sw-semantic-radius-2xl` | radius 2xl; system; override: none | Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | No arbitrary replacement of the named semantic/component role. | 20px | 20px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.radius.2xl}" / "{primitive.radius.2xl}" |
| `semantic.radius.full` / `--sw-semantic-radius-full` | radius full; system; override: none | Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | No arbitrary replacement of the named semantic/component role. | 9999px | 9999px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.radius.full}" / "{primitive.radius.full}" |
| `semantic.border-width.none` / `--sw-semantic-border-width-none` | border-width none; system; override: none | 1px borders, 2px focus/selected underline, 4px chart casing | No arbitrary replacement of the named semantic/component role. | 0px | 0px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.border-width.none}" / "{primitive.border-width.none}" |
| `semantic.border-width.hairline` / `--sw-semantic-border-width-hairline` | border-width hairline; system; override: none | 1px borders, 2px focus/selected underline, 4px chart casing | No arbitrary replacement of the named semantic/component role. | 1px | 1px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.border-width.hairline}" / "{primitive.border-width.hairline}" |
| `semantic.border-width.strong` / `--sw-semantic-border-width-strong` | border-width strong; system; override: none | 1px borders, 2px focus/selected underline, 4px chart casing | No arbitrary replacement of the named semantic/component role. | 2px | 2px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.border-width.strong}" / "{primitive.border-width.strong}" |
| `semantic.border-width.casing` / `--sw-semantic-border-width-casing` | border-width casing; system; override: none | 1px borders, 2px focus/selected underline, 4px chart casing | No arbitrary replacement of the named semantic/component role. | 4px | 4px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.border-width.casing}" / "{primitive.border-width.casing}" |
| `semantic.breakpoint.sm` / `--sw-semantic-breakpoint-sm` | breakpoint sm; system; override: none | Minimum viewport widths; 2xl is the inherited Tailwind default, wide is the app 1680px adaptation | No arbitrary replacement of the named semantic/component role. | 640px | 640px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.breakpoint.sm}" / "{primitive.breakpoint.sm}" |
| `semantic.breakpoint.md` / `--sw-semantic-breakpoint-md` | breakpoint md; system; override: none | Minimum viewport widths; 2xl is the inherited Tailwind default, wide is the app 1680px adaptation | No arbitrary replacement of the named semantic/component role. | 768px | 768px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.breakpoint.md}" / "{primitive.breakpoint.md}" |
| `semantic.breakpoint.lg` / `--sw-semantic-breakpoint-lg` | breakpoint lg; system; override: none | Minimum viewport widths; 2xl is the inherited Tailwind default, wide is the app 1680px adaptation | No arbitrary replacement of the named semantic/component role. | 1024px | 1024px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.breakpoint.lg}" / "{primitive.breakpoint.lg}" |
| `semantic.breakpoint.xl` / `--sw-semantic-breakpoint-xl` | breakpoint xl; system; override: none | Minimum viewport widths; 2xl is the inherited Tailwind default, wide is the app 1680px adaptation | No arbitrary replacement of the named semantic/component role. | 1280px | 1280px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.breakpoint.xl}" / "{primitive.breakpoint.xl}" |
| `semantic.breakpoint.2xl` / `--sw-semantic-breakpoint-2xl` | breakpoint 2xl; system; override: none | Minimum viewport widths; 2xl is the inherited Tailwind default, wide is the app 1680px adaptation | No arbitrary replacement of the named semantic/component role. | 1536px | 1536px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.breakpoint.2xl}" / "{primitive.breakpoint.2xl}" |
| `semantic.breakpoint.wide` / `--sw-semantic-breakpoint-wide` | breakpoint wide; system; override: none | Minimum viewport widths; 2xl is the inherited Tailwind default, wide is the app 1680px adaptation | No arbitrary replacement of the named semantic/component role. | 1680px | 1680px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.breakpoint.wide}" / "{primitive.breakpoint.wide}" |
| `semantic.size.control` / `--sw-semantic-size-control` | size control; system; override: none | Minimum geometry; allow text growth and safe-area padding | No arbitrary replacement of the named semantic/component role. | 44px | 44px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.size.control}" / "{primitive.size.control}" |
| `semantic.size.row-list` / `--sw-semantic-size-row-list` | size row-list; system; override: none | Minimum geometry; allow text growth and safe-area padding | No arbitrary replacement of the named semantic/component role. | 56px | 56px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.size.row-list}" / "{primitive.size.row-list}" |
| `semantic.size.row-table` / `--sw-semantic-size-row-table` | size row-table; system; override: none | Minimum geometry; allow text growth and safe-area padding | No arbitrary replacement of the named semantic/component role. | 48px | 48px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.size.row-table}" / "{primitive.size.row-table}" |
| `semantic.size.sidebar` / `--sw-semantic-size-sidebar` | size sidebar; system; override: none | Minimum geometry; allow text growth and safe-area padding | No arbitrary replacement of the named semantic/component role. | 256px | 256px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.size.sidebar}" / "{primitive.size.sidebar}" |
| `semantic.size.sidebar-app` / `--sw-semantic-size-sidebar-app` | size sidebar-app; system; override: none | Minimum geometry; allow text growth and safe-area padding | No arbitrary replacement of the named semantic/component role. | 264px | 264px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.size.sidebar-app}" / "{primitive.size.sidebar-app}" |
| `semantic.size.bottom-tabs` / `--sw-semantic-size-bottom-tabs` | size bottom-tabs; system; override: none | Minimum geometry; allow text growth and safe-area padding | No arbitrary replacement of the named semantic/component role. | 64px | 64px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.size.bottom-tabs}" / "{primitive.size.bottom-tabs}" |
| `semantic.layer.base` / `--sw-semantic-layer-base` | layer base; system; override: none | Stacking within a common context; nested overlays still require a stack manager | No arbitrary replacement of the named semantic/component role. | 0 | 0 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.layer.base}" / "{primitive.layer.base}" |
| `semantic.layer.local` / `--sw-semantic-layer-local` | layer local; system; override: none | Stacking within a common context; nested overlays still require a stack manager | No arbitrary replacement of the named semantic/component role. | 1 | 1 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.layer.local}" / "{primitive.layer.local}" |
| `semantic.layer.raised` / `--sw-semantic-layer-raised` | layer raised; system; override: none | Stacking within a common context; nested overlays still require a stack manager | No arbitrary replacement of the named semantic/component role. | 2 | 2 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.layer.raised}" / "{primitive.layer.raised}" |
| `semantic.layer.sticky` / `--sw-semantic-layer-sticky` | layer sticky; system; override: none | Stacking within a common context; nested overlays still require a stack manager | No arbitrary replacement of the named semantic/component role. | 10 | 10 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.layer.sticky}" / "{primitive.layer.sticky}" |
| `semantic.layer.fixed` / `--sw-semantic-layer-fixed` | layer fixed; system; override: none | Stacking within a common context; nested overlays still require a stack manager | No arbitrary replacement of the named semantic/component role. | 20 | 20 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.layer.fixed}" / "{primitive.layer.fixed}" |
| `semantic.layer.navigation` / `--sw-semantic-layer-navigation` | layer navigation; system; override: none | Stacking within a common context; nested overlays still require a stack manager | No arbitrary replacement of the named semantic/component role. | 30 | 30 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.layer.navigation}" / "{primitive.layer.navigation}" |
| `semantic.layer.popover` / `--sw-semantic-layer-popover` | layer popover; system; override: none | Stacking within a common context; nested overlays still require a stack manager | No arbitrary replacement of the named semantic/component role. | 40 | 40 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.layer.popover}" / "{primitive.layer.popover}" |
| `semantic.layer.overlay` / `--sw-semantic-layer-overlay` | layer overlay; system; override: none | Stacking within a common context; nested overlays still require a stack manager | No arbitrary replacement of the named semantic/component role. | 50 | 50 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.layer.overlay}" / "{primitive.layer.overlay}" |
| `semantic.layer.critical` / `--sw-semantic-layer-critical` | layer critical; system; override: none | Stacking within a common context; nested overlays still require a stack manager | No arbitrary replacement of the named semantic/component role. | 60 | 60 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.layer.critical}" / "{primitive.layer.critical}" |
| `semantic.opacity.hidden` / `--sw-semantic-opacity-hidden` | opacity hidden; system; override: none | Decoration, shadow or scrim only; text and button disabled states stay opaque | No alpha text, faded button labels or translucent soft fills. | 0 | 0 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.opacity.hidden}" / "{primitive.opacity.hidden}" |
| `semantic.opacity.shadow-near` / `--sw-semantic-opacity-shadow-near` | opacity shadow-near; system; override: none | Decoration, shadow or scrim only; text and button disabled states stay opaque | No alpha text, faded button labels or translucent soft fills. | 0.06 | 0.06 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.opacity.shadow-near}" / "{primitive.opacity.shadow-near}" |
| `semantic.opacity.shadow-far` / `--sw-semantic-opacity-shadow-far` | opacity shadow-far; system; override: none | Decoration, shadow or scrim only; text and button disabled states stay opaque | No alpha text, faded button labels or translucent soft fills. | 0.1 | 0.1 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.opacity.shadow-far}" / "{primitive.opacity.shadow-far}" |
| `semantic.opacity.scrim-light` / `--sw-semantic-opacity-scrim-light` | opacity scrim-light; system; override: none | Decoration, shadow or scrim only; text and button disabled states stay opaque | No alpha text, faded button labels or translucent soft fills. | 0.3 | 0.3 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.opacity.scrim-light}" / "{primitive.opacity.scrim-light}" |
| `semantic.opacity.scrim-medium` / `--sw-semantic-opacity-scrim-medium` | opacity scrim-medium; system; override: none | Decoration, shadow or scrim only; text and button disabled states stay opaque | No alpha text, faded button labels or translucent soft fills. | 0.35 | 0.35 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.opacity.scrim-medium}" / "{primitive.opacity.scrim-medium}" |
| `semantic.opacity.scrim-default` / `--sw-semantic-opacity-scrim-default` | opacity scrim-default; system; override: none | Decoration, shadow or scrim only; text and button disabled states stay opaque | No alpha text, faded button labels or translucent soft fills. | 0.4 | 0.4 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.opacity.scrim-default}" / "{primitive.opacity.scrim-default}" |
| `semantic.opacity.drag` / `--sw-semantic-opacity-drag` | opacity drag; system; override: none | Decoration, shadow or scrim only; text and button disabled states stay opaque | No alpha text, faded button labels or translucent soft fills. | 0.6 | 0.6 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.opacity.drag}" / "{primitive.opacity.drag}" |
| `semantic.opacity.scrim-strong` / `--sw-semantic-opacity-scrim-strong` | opacity scrim-strong; system; override: none | Decoration, shadow or scrim only; text and button disabled states stay opaque | No alpha text, faded button labels or translucent soft fills. | 0.7 | 0.7 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.opacity.scrim-strong}" / "{primitive.opacity.scrim-strong}" |
| `semantic.opacity.decoration` / `--sw-semantic-opacity-decoration` | opacity decoration; system; override: none | Decoration, shadow or scrim only; text and button disabled states stay opaque | No alpha text, faded button labels or translucent soft fills. | 0.8 | 0.8 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.opacity.decoration}" / "{primitive.opacity.decoration}" |
| `semantic.opacity.solid` / `--sw-semantic-opacity-solid` | opacity solid; system; override: none | Decoration, shadow or scrim only; text and button disabled states stay opaque | No alpha text, faded button labels or translucent soft fills. | 1 | 1 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.opacity.solid}" / "{primitive.opacity.solid}" |
| `semantic.motion.duration-none` / `--sw-semantic-motion-duration-none` | none motion duration; system; override: none | Reduced motion and immediate state changes | Do not delay input or announcements; reduced motion sets durations to zero. | 0ms | 0ms | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.duration.none}" / "{primitive.duration.none}" |
| `semantic.motion.duration-fast` / `--sw-semantic-motion-duration-fast` | fast motion duration; system; override: none | Press, hover, exit | Do not delay input or announcements; reduced motion sets durations to zero. | 120ms | 120ms | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.duration.fast}" / "{primitive.duration.fast}" |
| `semantic.motion.duration-base` / `--sw-semantic-motion-duration-base` | base motion duration; system; override: none | Overlay and indicator | Do not delay input or announcements; reduced motion sets durations to zero. | 180ms | 180ms | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.duration.base}" / "{primitive.duration.base}" |
| `semantic.motion.duration-slow` / `--sw-semantic-motion-duration-slow` | slow motion duration; system; override: none | Route settle | Do not delay input or announcements; reduced motion sets durations to zero. | 240ms | 240ms | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.duration.slow}" / "{primitive.duration.slow}" |
| `semantic.motion.duration-display-fade` / `--sw-semantic-motion-duration-display-fade` | display-fade motion duration; system; override: none | Passive kiosk/display slide fade only (docs/motion.md) | Do not delay input or announcements; reduced motion sets durations to zero. | 400ms | 400ms | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.duration.display-fade}" / "{primitive.duration.display-fade}" |
| `semantic.motion.duration-scroll-reveal` / `--sw-semantic-motion-duration-scroll-reveal` | scroll-reveal motion duration; system; override: none | Once-only marketing scroll reveal (docs/motion.md) | Do not delay input or announcements; reduced motion sets durations to zero. | 640ms | 640ms | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.duration.scroll-reveal}" / "{primitive.duration.scroll-reveal}" |
| `semantic.motion.duration-logo-box-open` / `--sw-semantic-motion-duration-logo-box-open` | logo-box-open motion duration; system; override: none | Space Works mark box-open exception only; never general UI | Do not delay input or announcements; reduced motion sets durations to zero. | 2200ms | 2200ms | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.duration.logo-box-open}" / "{primitive.duration.logo-box-open}" |
| `semantic.motion.easing-standard` / `--sw-semantic-motion-easing-standard` | standard motion curve; system; override: none | Standard for movement; enter for arrival; exit for departure; out-soft is the app Tailwind curve. | Do not animate layout or add hover translation. | cubic-bezier(0.2, 0, 0, 1) | cubic-bezier(0.2, 0, 0, 1) | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.easing.standard}" / "{primitive.easing.standard}" |
| `semantic.motion.easing-enter` / `--sw-semantic-motion-easing-enter` | enter motion curve; system; override: none | Standard for movement; enter for arrival; exit for departure; out-soft is the app Tailwind curve. | Do not animate layout or add hover translation. | cubic-bezier(0.16, 1, 0.3, 1) | cubic-bezier(0.16, 1, 0.3, 1) | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.easing.enter}" / "{primitive.easing.enter}" |
| `semantic.motion.easing-exit` / `--sw-semantic-motion-easing-exit` | exit motion curve; system; override: none | Standard for movement; enter for arrival; exit for departure; out-soft is the app Tailwind curve. | Do not animate layout or add hover translation. | cubic-bezier(0.4, 0, 1, 1) | cubic-bezier(0.4, 0, 1, 1) | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.easing.exit}" / "{primitive.easing.exit}" |
| `semantic.motion.easing-out-soft` / `--sw-semantic-motion-easing-out-soft` | out-soft motion curve; system; override: none | Standard for movement; enter for arrival; exit for departure; out-soft is the app Tailwind curve. | Do not animate layout or add hover translation. | cubic-bezier(0.32, 0.72, 0, 1) | cubic-bezier(0.32, 0.72, 0, 1) | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.easing.out-soft}" / "{primitive.easing.out-soft}" |
| `semantic.motion.enter-y` / `--sw-semantic-motion-enter-y` | Motion enter-y; system; override: none | Arrival motion only; kiosk/TV zero translations and keep scale at one. | Hover transforms; reduced-motion movement. | 8px | 8px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.distance.enter-y}" / "{primitive.distance.enter-y}" |
| `semantic.motion.pop-scale` / `--sw-semantic-motion-pop-scale` | Motion pop-scale; system; override: none | Arrival motion only; kiosk/TV zero translations and keep scale at one. | Hover transforms; reduced-motion movement. | 0.98 | 0.98 | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.distance.pop-scale}" / "{primitive.distance.pop-scale}" |
| `semantic.motion.pop-offset` / `--sw-semantic-motion-pop-offset` | Motion pop-offset; system; override: none | Arrival motion only; kiosk/TV zero translations and keep scale at one. | Hover transforms; reduced-motion movement. | 4px | 4px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.distance.pop-offset}" / "{primitive.distance.pop-offset}" |
| `semantic.motion.slide-x` / `--sw-semantic-motion-slide-x` | Motion slide-x; system; override: none | Arrival motion only; kiosk/TV zero translations and keep scale at one. | Hover transforms; reduced-motion movement. | 100% | 100% | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.distance.slide-x}" / "{primitive.distance.slide-x}" |
| `semantic.type.display` / `--sw-semantic-type-display` | display typography; system; override: none | Public landing hero | Do not request unshipped Gilroy 400–700; use Outfit for UI text. | 800 72px/1.0555555555555556 "Gilroy", "Outfit", sans-serif | 800 72px/1.0555555555555556 "Gilroy", "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.display}","fontSize":"{primitive.type-size.display}","fontWeight":"{primitive.font-weight.w800}","letterSpacing":"{primitive.type-tracking.display}","lineHeight":"{primitive.type-line.display}"} / {"fontFamily":"{primitive.font-family.display}","fontSize":"{primitive.type-size.display}","fontWeight":"{primitive.font-weight.w800}","letterSpacing":"{primitive.type-tracking.display}","lineHeight":"{primitive.type-line.display}"} |
| `semantic.type.display-sub` / `--sw-semantic-type-display-sub` | display-sub typography; system; override: none | Public/auth display supporting line | No monospace substitution; IDs use Outfit tabular numerals. | 400 32px/1.1875 "Outfit", sans-serif | 400 32px/1.1875 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.display-sub}","fontWeight":"{primitive.font-weight.w400}","letterSpacing":"{primitive.type-tracking.display-sub}","lineHeight":"{primitive.type-line.display-sub}"} / {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.display-sub}","fontWeight":"{primitive.font-weight.w400}","letterSpacing":"{primitive.type-tracking.display-sub}","lineHeight":"{primitive.type-line.display-sub}"} |
| `semantic.type.heading` / `--sw-semantic-type-heading` | heading typography; system; override: none | Public section heading | Do not request unshipped Gilroy 400–700; use Outfit for UI text. | 800 48px/1.0833333333333333 "Gilroy", "Outfit", sans-serif | 800 48px/1.0833333333333333 "Gilroy", "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.display}","fontSize":"{primitive.type-size.heading}","fontWeight":"{primitive.font-weight.w800}","letterSpacing":"{primitive.type-tracking.heading}","lineHeight":"{primitive.type-line.heading}"} / {"fontFamily":"{primitive.font-family.display}","fontSize":"{primitive.type-size.heading}","fontWeight":"{primitive.font-weight.w800}","letterSpacing":"{primitive.type-tracking.heading}","lineHeight":"{primitive.type-line.heading}"} |
| `semantic.type.page` / `--sw-semantic-type-page` | page typography; system; override: none | One page h1 | No monospace substitution; IDs use Outfit tabular numerals. | 600 32px/1.1875 "Outfit", sans-serif | 600 32px/1.1875 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.page}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.page}","lineHeight":"{primitive.type-line.page}"} / {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.page}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.page}","lineHeight":"{primitive.type-line.page}"} |
| `semantic.type.panel` / `--sw-semantic-type-panel` | panel typography; system; override: none | Card/panel title | No monospace substitution; IDs use Outfit tabular numerals. | 600 20px/1.4 "Outfit", sans-serif | 600 20px/1.4 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.panel}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.panel}","lineHeight":"{primitive.type-line.panel}"} / {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.panel}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.panel}","lineHeight":"{primitive.type-line.panel}"} |
| `semantic.type.section` / `--sw-semantic-type-section` | section typography; system; override: none | Section/list-row title | No monospace substitution; IDs use Outfit tabular numerals. | 600 16px/1.5 "Outfit", sans-serif | 600 16px/1.5 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.section}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.section}","lineHeight":"{primitive.type-line.section}"} / {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.section}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.section}","lineHeight":"{primitive.type-line.section}"} |
| `semantic.type.stat` / `--sw-semantic-type-stat` | stat typography; system; override: none | Stat number with tabular numerals | No monospace substitution; IDs use Outfit tabular numerals. | 600 32px/1.1875 "Outfit", sans-serif | 600 32px/1.1875 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.stat}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.stat}","lineHeight":"{primitive.type-line.stat}"} / {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.stat}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.stat}","lineHeight":"{primitive.type-line.stat}"} |
| `semantic.type.date` / `--sw-semantic-type-date` | date typography; system; override: none | Date chip numeral with tabular numerals | No monospace substitution; IDs use Outfit tabular numerals. | 600 20px/1.2 "Outfit", sans-serif | 600 20px/1.2 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.date}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.date}","lineHeight":"{primitive.type-line.date}"} / {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.date}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.date}","lineHeight":"{primitive.type-line.date}"} |
| `semantic.type.body` / `--sw-semantic-type-body` | body typography; system; override: none | Body copy and input text | No monospace substitution; IDs use Outfit tabular numerals. | 400 16px/1.5 "Outfit", sans-serif | 400 16px/1.5 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.body}","fontWeight":"{primitive.font-weight.w400}","letterSpacing":"{primitive.type-tracking.body}","lineHeight":"{primitive.type-line.body}"} / {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.body}","fontWeight":"{primitive.font-weight.w400}","letterSpacing":"{primitive.type-tracking.body}","lineHeight":"{primitive.type-line.body}"} |
| `semantic.type.label` / `--sw-semantic-type-label` | label typography; system; override: none | Form labels, navigation and meta | No monospace substitution; IDs use Outfit tabular numerals. | 500 14px/1.4285714285714286 "Outfit", sans-serif | 500 14px/1.4285714285714286 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.label}","fontWeight":"{primitive.font-weight.w500}","letterSpacing":"{primitive.type-tracking.label}","lineHeight":"{primitive.type-line.label}"} / {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.label}","fontWeight":"{primitive.font-weight.w500}","letterSpacing":"{primitive.type-tracking.label}","lineHeight":"{primitive.type-line.label}"} |
| `semantic.type.button` / `--sw-semantic-type-button` | button typography; system; override: none | Button label | No monospace substitution; IDs use Outfit tabular numerals. | 600 14px/1.4285714285714286 "Outfit", sans-serif | 600 14px/1.4285714285714286 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.button}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.button}","lineHeight":"{primitive.type-line.button}"} / {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.button}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.button}","lineHeight":"{primitive.type-line.button}"} |
| `semantic.type.caption` / `--sw-semantic-type-caption` | caption typography; system; override: none | Pills, timestamps and helper text | No monospace substitution; IDs use Outfit tabular numerals. | 500 12px/1.3333333333333333 "Outfit", sans-serif | 500 12px/1.3333333333333333 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.caption}","fontWeight":"{primitive.font-weight.w500}","letterSpacing":"{primitive.type-tracking.caption}","lineHeight":"{primitive.type-line.caption}"} / {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.caption}","fontWeight":"{primitive.font-weight.w500}","letterSpacing":"{primitive.type-tracking.caption}","lineHeight":"{primitive.type-line.caption}"} |
| `semantic.type.eyebrow` / `--sw-semantic-type-eyebrow` | eyebrow typography; system; override: none | Short uppercase category kicker | No monospace substitution; IDs use Outfit tabular numerals. | 600 12px/1.3333333333333333 "Outfit", sans-serif | 600 12px/1.3333333333333333 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.eyebrow}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.eyebrow}","lineHeight":"{primitive.type-line.eyebrow}"} / {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.eyebrow}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.eyebrow}","lineHeight":"{primitive.type-line.eyebrow}"} |
| `semantic.type.accent` / `--sw-semantic-type-accent` | accent typography; system; override: none | One short brand phrase | No long copy: one short phrase per layout. | 500 48px/1.1666666666666667 "Unbounded", "Outfit", sans-serif | 500 48px/1.1666666666666667 "Unbounded", "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.accent}","fontSize":"{primitive.type-size.accent}","fontWeight":"{primitive.font-weight.w500}","letterSpacing":"{primitive.type-tracking.accent}","lineHeight":"{primitive.type-line.accent}"} / {"fontFamily":"{primitive.font-family.accent}","fontSize":"{primitive.type-size.accent}","fontWeight":"{primitive.font-weight.w500}","letterSpacing":"{primitive.type-tracking.accent}","lineHeight":"{primitive.type-line.accent}"} |
| `semantic.type.display-mobile` / `--sw-semantic-type-display-mobile` | display-mobile typography; system; override: none | Public landing hero; below 640px | Do not request unshipped Gilroy 400–700; use Outfit for UI text. | 800 44px/1.0909090909090908 "Gilroy", "Outfit", sans-serif | 800 44px/1.0909090909090908 "Gilroy", "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.display}","fontSize":"{primitive.type-size.display-mobile}","fontWeight":"{primitive.font-weight.w800}","letterSpacing":"{primitive.type-tracking.display-mobile}","lineHeight":"{primitive.type-line.display-mobile}"} / {"fontFamily":"{primitive.font-family.display}","fontSize":"{primitive.type-size.display-mobile}","fontWeight":"{primitive.font-weight.w800}","letterSpacing":"{primitive.type-tracking.display-mobile}","lineHeight":"{primitive.type-line.display-mobile}"} |
| `semantic.type.display-sub-mobile` / `--sw-semantic-type-display-sub-mobile` | display-sub-mobile typography; system; override: none | Public/auth display supporting line; below 640px | No monospace substitution; IDs use Outfit tabular numerals. | 400 24px/1.25 "Outfit", sans-serif | 400 24px/1.25 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.display-sub-mobile}","fontWeight":"{primitive.font-weight.w400}","letterSpacing":"{primitive.type-tracking.display-sub-mobile}","lineHeight":"{primitive.type-line.display-sub-mobile}"} / {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.display-sub-mobile}","fontWeight":"{primitive.font-weight.w400}","letterSpacing":"{primitive.type-tracking.display-sub-mobile}","lineHeight":"{primitive.type-line.display-sub-mobile}"} |
| `semantic.type.heading-mobile` / `--sw-semantic-type-heading-mobile` | heading-mobile typography; system; override: none | Public section heading; below 640px | Do not request unshipped Gilroy 400–700; use Outfit for UI text. | 800 34px/1.1764705882352942 "Gilroy", "Outfit", sans-serif | 800 34px/1.1764705882352942 "Gilroy", "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.display}","fontSize":"{primitive.type-size.heading-mobile}","fontWeight":"{primitive.font-weight.w800}","letterSpacing":"{primitive.type-tracking.heading-mobile}","lineHeight":"{primitive.type-line.heading-mobile}"} / {"fontFamily":"{primitive.font-family.display}","fontSize":"{primitive.type-size.heading-mobile}","fontWeight":"{primitive.font-weight.w800}","letterSpacing":"{primitive.type-tracking.heading-mobile}","lineHeight":"{primitive.type-line.heading-mobile}"} |
| `semantic.type.page-mobile` / `--sw-semantic-type-page-mobile` | page-mobile typography; system; override: none | One page h1; below 640px | No monospace substitution; IDs use Outfit tabular numerals. | 600 26px/1.2307692307692308 "Outfit", sans-serif | 600 26px/1.2307692307692308 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.page-mobile}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.page-mobile}","lineHeight":"{primitive.type-line.page-mobile}"} / {"fontFamily":"{primitive.font-family.sans}","fontSize":"{primitive.type-size.page-mobile}","fontWeight":"{primitive.font-weight.w600}","letterSpacing":"{primitive.type-tracking.page-mobile}","lineHeight":"{primitive.type-line.page-mobile}"} |
| `semantic.type.accent-mobile` / `--sw-semantic-type-accent-mobile` | accent-mobile typography; system; override: none | One short brand phrase; below 640px | No long copy: one short phrase per layout. | 500 32px/1.25 "Unbounded", "Outfit", sans-serif | 500 32px/1.25 "Unbounded", "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | {"fontFamily":"{primitive.font-family.accent}","fontSize":"{primitive.type-size.accent-mobile}","fontWeight":"{primitive.font-weight.w500}","letterSpacing":"{primitive.type-tracking.accent-mobile}","lineHeight":"{primitive.type-line.accent-mobile}"} / {"fontFamily":"{primitive.font-family.accent}","fontSize":"{primitive.type-size.accent-mobile}","fontWeight":"{primitive.font-weight.w500}","letterSpacing":"{primitive.type-tracking.accent-mobile}","lineHeight":"{primitive.type-line.accent-mobile}"} |
| `semantic.elevation.flat` / `--sw-semantic-elevation-flat` | flat elevation; system; override: none | Cards and panels (no shadow) | Use overlay only for floating content. | none | none | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.shadow.flat}" / "{primitive.shadow.flat}" |
| `semantic.elevation.overlay` / `--sw-semantic-elevation-overlay` | overlay elevation; system; override: none | Floating menus, popovers, dialogs, drawers and toasts only | No shadow on flat cards; no invented elevation ladder. | 0px 2px 6px 0px rgb(20 44 42 / 0.06), 0px 12px 32px 0px rgb(20 44 42 / 0.1) | 0px 2px 6px 0px rgb(0 0 0 / 0.06), 0px 12px 32px 0px rgb(0 0 0 / 0.1) | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.shadow.overlay-light}" / "{primitive.shadow.overlay-dark}" |
| `semantic.color.boundary-strong` / `--sw-semantic-color-boundary-strong` | Essential control boundary across neutral default, hover and pressed surfaces; system; override: none | Inputs, checkbox outlines and essential separators | Decorative dividers; use line there | #5B6863 | #787878 | bg, surface, panel, hover, line | "{semantic.color.muted}" / "{semantic.color.outline}" |
| `semantic.color.state-indicator` / `--sw-semantic-color-state-indicator` | Essential selected-state mark; system; override: none | Tab underline, selected icon or short state stroke on neutral surfaces | Text on a filled accent button; use on-accent | #006E63 | #80B1A6 | bg, surface, panel, hover | "{semantic.color.accent-ink}" / "{semantic.color.accent-ink}" |
| `semantic.color.sidebar-ink` / `--sw-semantic-color-sidebar-ink` | Sidebar text; system; override: none | Neutral sidebar and hover rows | Selected teal row; use on-accent | #142C2A | #FFF4E8 | sidebar, sidebar-hover | "{semantic.color.ink}" / "{semantic.color.ink}" |
| `semantic.color.shadow` / `--sw-semantic-color-shadow` | Overlay shadow pigment; system; override: none | Only the two overlay shadow layers | Text, borders or flat cards | #142C2A | #000000 | panel | "{primitive.color.hex142c2a}" / "{primitive.color.hex000000}" |
| `semantic.space.page-phone` / `--sw-semantic-space-page-phone` | Phone page gutter; system; override: none | Phone page gutter | Use only for the named component or role; do not replace unrelated system roles. | 16px | 16px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.16}" / "{primitive.spacing.16}" |
| `semantic.space.page-tablet` / `--sw-semantic-space-page-tablet` | Tablet page gutter; system; override: none | Tablet page gutter | Use only for the named component or role; do not replace unrelated system roles. | 24px | 24px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.24}" / "{primitive.spacing.24}" |
| `semantic.space.page-desktop` / `--sw-semantic-space-page-desktop` | Desktop page gutter; system; override: none | Desktop page gutter | Use only for the named component or role; do not replace unrelated system roles. | 32px | 32px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.32}" / "{primitive.spacing.32}" |
| `semantic.space.card` / `--sw-semantic-space-card` | Default card padding; system; override: none | Default card padding | Use only for the named component or role; do not replace unrelated system roles. | 20px | 20px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.20}" / "{primitive.spacing.20}" |
| `semantic.space.settings` / `--sw-semantic-space-settings` | Settings card padding; system; override: none | Settings card padding | Use only for the named component or role; do not replace unrelated system roles. | 24px | 24px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.24}" / "{primitive.spacing.24}" |
| `semantic.space.control-x` / `--sw-semantic-space-control-x` | Control inline padding; system; override: none | Control inline padding | Use only for the named component or role; do not replace unrelated system roles. | 12px | 12px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.12}" / "{primitive.spacing.12}" |
| `semantic.space.control-y` / `--sw-semantic-space-control-y` | Control block padding; system; override: none | Control block padding | Use only for the named component or role; do not replace unrelated system roles. | 8px | 8px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.spacing.8}" / "{primitive.spacing.8}" |
| `semantic.radius.control` / `--sw-semantic-radius-control` | Owner-selectable control radius: 10px default, full for pill; system; override: owner-control | Owner-selectable control radius: 10px default, full for pill | Use only for the named component or role; do not replace unrelated system roles. | 10px | 10px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.radius.md}" / "{primitive.radius.md}" |
| `semantic.radius.card` / `--sw-semantic-radius-card` | Card and panel radius; system; override: none | Card and panel radius | Use only for the named component or role; do not replace unrelated system roles. | 16px | 16px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.radius.xl}" / "{primitive.radius.xl}" |
| `semantic.focus.width` / `--sw-semantic-focus-width` | Visible focus outline width; system; override: none | Visible focus outline width | Use only for the named component or role; do not replace unrelated system roles. | 2px | 2px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.border-width.strong}" / "{primitive.border-width.strong}" |
| `semantic.focus.offset` / `--sw-semantic-focus-offset` | Gap between control and external focus outline; system; override: none | Gap between control and external focus outline | Use only for the named component or role; do not replace unrelated system roles. | 2px | 2px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.border-width.strong}" / "{primitive.border-width.strong}" |
| `semantic.focus.color` / `--sw-semantic-focus-color` | Focus outline pigment on neutral surfaces; system; override: none | Focus outline pigment on neutral surfaces | Use only for the named component or role; do not replace unrelated system roles. | #006E63 | #DFFF8F | bg, surface, panel, hover | "{semantic.color.focus}" / "{semantic.color.focus}" |
| `semantic.motion.reduced-duration` / `--sw-semantic-motion-reduced-duration` | Reduced-motion duration; keep all content visible; system; override: none | Reduced-motion duration; keep all content visible | Use only for the named component or role; do not replace unrelated system roles. | 0ms | 0ms | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.duration.none}" / "{primitive.duration.none}" |
## component roles

| Path / CSS / legacy | Purpose / scope / override | Use | Do not use | Light | Dark | Contrast partner | Aliases light / dark |
|---|---|---|---|---|---|---|---|
| `component.loader.under` / `--sw-component-loader-under` / loader.under | Box-open loader local under; loader-local; override: none | Only box-open loader: underside face | Not a global text, boundary, status or focus role; logo face colours remain their masters. | #354845 | #66625D | Local logo face colours; diagnostic matrix is not permission to recolour logo | "{primitive.color.hex354845}" / "{primitive.color.hex66625d}" |
| `component.loader.spark` / `--sw-component-loader-spark` / loader.spark | Box-open loader local spark; loader-local; override: none | Only box-open loader: spark strokes | Not a global text, boundary, status or focus role; logo face colours remain their masters. | #142C2A | #FFF4E8 | Local logo face colours; diagnostic matrix is not permission to recolour logo | "{primitive.color.hex142c2a}" / "{primitive.color.hexfff4e8}" |
| `component.loader.seam` / `--sw-component-loader-seam` / loader.seam | Box-open loader local seam; loader-local; override: none | Only box-open loader: fold seam | Not a global text, boundary, status or focus role; logo face colours remain their masters. | #142C2A | #000000 | Local logo face colours; diagnostic matrix is not permission to recolour logo | "{primitive.color.hex142c2a}" / "{primitive.color.hex000000}" |
| `component.aurora.background` / `--sw-component-aurora-background` / cards.background | Aurora badge-card background; aurora-local; override: none | Aurora ID/badge card background slot only (decision 317a) | Not a global surface or status role; header label uses on-accent, ribbon/tail labels use deep ink. | #FFF4E8 | #142C2A | aurora.text, aurora.label | "{primitive.color.hexfff4e8}" / "{primitive.color.hex142c2a}" |
| `component.aurora.text` / `--sw-component-aurora-text` / cards.text | Aurora badge-card text; aurora-local; override: none | Aurora ID/badge card text slot only (decision 317a) | Not a global surface or status role; header label uses on-accent, ribbon/tail labels use deep ink. | #142C2A | #FFF4E8 | aurora.background | "{primitive.color.hex142c2a}" / "{primitive.color.hexfff4e8}" |
| `component.aurora.label` / `--sw-component-aurora-label` / cards.label | Aurora badge-card label; aurora-local; override: none | Aurora ID/badge card label slot only (decision 317a) | Not a global surface or status role; header label uses on-accent, ribbon/tail labels use deep ink. | #006E63 | #DFFF8F | aurora.background | "{primitive.color.hex006e63}" / "{primitive.color.hexdfff8f}" |
| `component.aurora.header` / `--sw-component-aurora-header` / cards.header | Aurora badge-card header; aurora-local; override: none | Aurora ID/badge card header slot only (decision 317a) | Not a global surface or status role; header label uses on-accent, ribbon/tail labels use deep ink. | #006E63 | #006E63 | on-accent | "{primitive.color.hex006e63}" / "{primitive.color.hex006e63}" |
| `component.aurora.ribbon` / `--sw-component-aurora-ribbon` / cards.ribbon | Aurora badge-card ribbon; aurora-local; override: none | Aurora ID/badge card ribbon slot only (decision 317a) | Not a global surface or status role; header label uses on-accent, ribbon/tail labels use deep ink. | #DFFF8F | #DFFF8F | on-success | "{primitive.color.hexdfff8f}" / "{primitive.color.hexdfff8f}" |
| `component.aurora.tail` / `--sw-component-aurora-tail` / cards.tail | Aurora badge-card tail; aurora-local; override: none | Aurora ID/badge card tail slot only (decision 317a) | Not a global surface or status role; header label uses on-accent, ribbon/tail labels use deep ink. | #FF7447 | #FF7447 | on-emphasis | "{primitive.color.hexff7447}" / "{primitive.color.hexff7447}" |
| `component.button.height` / `--sw-component-button-height` | Minimum button hit area; button; override: none | Minimum button hit area | Use only for the named component or role; do not replace unrelated system roles. | 44px | 44px | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.size.control}" / "{semantic.size.control}" |
| `component.button.radius` / `--sw-component-button-radius` | Button corners; button; override: none | Button corners | Use only for the named component or role; do not replace unrelated system roles. | 10px | 10px | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.radius.control}" / "{semantic.radius.control}" |
| `component.button.padding-x` / `--sw-component-button-padding-x` | Button inline padding; button; override: none | Button inline padding | Use only for the named component or role; do not replace unrelated system roles. | 12px | 12px | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.space.control-x}" / "{semantic.space.control-x}" |
| `component.button.padding-y` / `--sw-component-button-padding-y` | Button block padding; button; override: none | Button block padding | Use only for the named component or role; do not replace unrelated system roles. | 8px | 8px | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.space.control-y}" / "{semantic.space.control-y}" |
| `component.button.fill` / `--sw-component-button-fill` | Primary button default fill; button; override: none | Primary button default fill | Use only for the named component or role; do not replace unrelated system roles. | #006E63 | #006E63 | on-accent | "{semantic.color.accent}" / "{semantic.color.accent}" |
| `component.button.hover` / `--sw-component-button-hover` | Primary button hover fill; button; override: none | Primary button hover fill | Use only for the named component or role; do not replace unrelated system roles. | #02675D | #02675D | on-accent | "{semantic.color.accent-hover}" / "{semantic.color.accent-hover}" |
| `component.button.pressed` / `--sw-component-button-pressed` | Primary button pressed fill; button; override: none | Primary button pressed fill | Use only for the named component or role; do not replace unrelated system roles. | #046158 | #046158 | on-accent | "{semantic.color.accent-active}" / "{semantic.color.accent-active}" |
| `component.button.label` / `--sw-component-button-label` | Primary button label; button; override: none | Primary button label | Use only for the named component or role; do not replace unrelated system roles. | #FFF4E8 | #FFF4E8 | accent, accent-hover, accent-active | "{semantic.color.on-accent}" / "{semantic.color.on-accent}" |
| `component.button.boundary` / `--sw-component-button-boundary` | Primary button essential perimeter; button; override: none | Primary button essential perimeter | Use only for the named component or role; do not replace unrelated system roles. | #006E63 | #80B1A6 | bg, surface, panel, hover | "{semantic.color.accent-ink}" / "{semantic.color.accent-ink}" |
| `component.button.disabled-fill` / `--sw-component-button-disabled-fill` | Opaque disabled fill; button; override: none | Opaque disabled fill | Use only for the named component or role; do not replace unrelated system roles. | #F6ECE0 | #0B0B0B | muted | "{semantic.color.surface}" / "{semantic.color.surface}" |
| `component.button.disabled-label` / `--sw-component-button-disabled-label` | Opaque disabled label; button; override: none | Opaque disabled label | Use only for the named component or role; do not replace unrelated system roles. | #5B6863 | #ACACAC | surface | "{semantic.color.muted}" / "{semantic.color.muted}" |
| `component.button.disabled-border` / `--sw-component-button-disabled-border` | Disabled decorative boundary; button; override: none | Disabled decorative boundary | Use only for the named component or role; do not replace unrelated system roles. | #D5D0C6 | #2C2C2C | surface | "{semantic.color.line}" / "{semantic.color.line}" |
| `component.button.type` / `--sw-component-button-type` | Button label typography; button; override: none | Button label typography | Use only for the named component or role; do not replace unrelated system roles. | 600 14px/1.4285714285714286 "Outfit", sans-serif | 600 14px/1.4285714285714286 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.type.button}" / "{semantic.type.button}" |
| `component.input.height` / `--sw-component-input-height` | Minimum input hit area; input; override: none | Minimum input hit area | Use only for the named component or role; do not replace unrelated system roles. | 44px | 44px | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.size.control}" / "{semantic.size.control}" |
| `component.input.radius` / `--sw-component-input-radius` | Input corners; input; override: none | Input corners | Use only for the named component or role; do not replace unrelated system roles. | 10px | 10px | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.radius.control}" / "{semantic.radius.control}" |
| `component.input.boundary` / `--sw-component-input-boundary` | Input essential boundary including hover and pressed surroundings; input; override: none | Input essential boundary including hover and pressed surroundings | Use only for the named component or role; do not replace unrelated system roles. | #5B6863 | #787878 | bg, surface, panel, hover, line | "{semantic.color.boundary-strong}" / "{semantic.color.boundary-strong}" |
| `component.input.fill` / `--sw-component-input-fill` | Input background matching app components.css; input; override: none | Input background matching app components.css | Use only for the named component or role; do not replace unrelated system roles. | #FFFFFF | #0B0B0B | ink, muted | "{semantic.color.panel}" / "{semantic.color.surface}" |
| `component.input.label` / `--sw-component-input-label` | Input entered text; input; override: none | Input entered text | Use only for the named component or role; do not replace unrelated system roles. | #142C2A | #FFF4E8 | panel, surface | "{semantic.color.ink}" / "{semantic.color.ink}" |
| `component.input.placeholder` / `--sw-component-input-placeholder` | Placeholder text with a separate visible label; input; override: none | Placeholder text with a separate visible label | Use only for the named component or role; do not replace unrelated system roles. | #5B6863 | #ACACAC | panel, surface | "{semantic.color.muted}" / "{semantic.color.muted}" |
| `component.input.type` / `--sw-component-input-type` | Input text; 16px minimum prevents phone focus zoom; input; override: none | Input text; 16px minimum prevents phone focus zoom | Use only for the named component or role; do not replace unrelated system roles. | 400 16px/1.5 "Outfit", sans-serif | 400 16px/1.5 "Outfit", sans-serif | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.type.body}" / "{semantic.type.body}" |
| `component.tabs.indicator` / `--sw-component-tabs-indicator` | Selected tab underline; tabs; override: none | Selected tab underline | Use only for the named component or role; do not replace unrelated system roles. | #006E63 | #80B1A6 | bg, surface, panel, hover | "{semantic.color.state-indicator}" / "{semantic.color.state-indicator}" |
| `component.tabs.indicator-width` / `--sw-component-tabs-indicator-width` | Tab underline thickness; tabs; override: none | Tab underline thickness | Use only for the named component or role; do not replace unrelated system roles. | 2px | 2px | N/A: geometry or behaviour, not a contrast foreground. | "{primitive.border-width.strong}" / "{primitive.border-width.strong}" |
| `component.card.fill` / `--sw-component-card-fill` | Flat card surface; card; override: none | Flat card surface | Use only for the named component or role; do not replace unrelated system roles. | #FFFFFF | #141414 | ink, muted | "{semantic.color.panel}" / "{semantic.color.panel}" |
| `component.card.radius` / `--sw-component-card-radius` | Card corners; card; override: none | Card corners | Use only for the named component or role; do not replace unrelated system roles. | 16px | 16px | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.radius.card}" / "{semantic.radius.card}" |
| `component.card.padding` / `--sw-component-card-padding` | Card inset; card; override: none | Card inset | Use only for the named component or role; do not replace unrelated system roles. | 20px | 20px | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.space.card}" / "{semantic.space.card}" |
| `component.card.border` / `--sw-component-card-border` | Decorative card divider only; card; override: none | Decorative card divider only | Use only for the named component or role; do not replace unrelated system roles. | #D5D0C6 | #2C2C2C | panel | "{semantic.color.line}" / "{semantic.color.line}" |
| `component.card.shadow` / `--sw-component-card-shadow` | Cards remain flat; card; override: none | Cards remain flat | Use only for the named component or role; do not replace unrelated system roles. | none | none | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.elevation.flat}" / "{semantic.elevation.flat}" |
| `component.overlay.shadow` / `--sw-component-overlay-shadow` | Floating popover, menu, modal, drawer and toast shadow; overlay; override: none | Floating popover, menu, modal, drawer and toast shadow | Use only for the named component or role; do not replace unrelated system roles. | 0px 2px 6px 0px rgb(20 44 42 / 0.06), 0px 12px 32px 0px rgb(20 44 42 / 0.1) | 0px 2px 6px 0px rgb(0 0 0 / 0.06), 0px 12px 32px 0px rgb(0 0 0 / 0.1) | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.elevation.overlay}" / "{semantic.elevation.overlay}" |
| `component.overlay.layer` / `--sw-component-overlay-layer` | Root overlay stacking group; overlay; override: none | Root overlay stacking group | Use only for the named component or role; do not replace unrelated system roles. | 50 | 50 | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.layer.overlay}" / "{semantic.layer.overlay}" |
| `component.overlay.scrim-opacity` / `--sw-component-overlay-scrim-opacity` | Scrim opacity; apply to scrim only, never its content; overlay; override: none | Scrim opacity; apply to scrim only, never its content | Use only for the named component or role; do not replace unrelated system roles. | 0.4 | 0.4 | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.opacity.scrim-default}" / "{semantic.opacity.scrim-default}" |
| `component.focus.color` / `--sw-component-focus-color` | External focus indicator separated from fill by an offset; focus; override: none | External focus indicator separated from fill by an offset | Use only for the named component or role; do not replace unrelated system roles. | #006E63 | #DFFF8F | bg, surface, panel, hover | "{semantic.focus.color}" / "{semantic.focus.color}" |
| `component.focus.width` / `--sw-component-focus-width` | Focus outline width; focus; override: none | Focus outline width | Use only for the named component or role; do not replace unrelated system roles. | 2px | 2px | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.focus.width}" / "{semantic.focus.width}" |
| `component.focus.offset` / `--sw-component-focus-offset` | External focus gap; focus; override: none | External focus gap | Use only for the named component or role; do not replace unrelated system roles. | 2px | 2px | N/A: geometry or behaviour, not a contrast foreground. | "{semantic.focus.offset}" / "{semantic.focus.offset}" |
| `component.button-brand.fill` / `--sw-component-button-brand-fill` | Public tenant-branded button fill; button-brand; override: none | Public tenant-branded button fill | Use only for the named component or role; do not replace unrelated system roles. | #006E63 | #006E63 | on-brand | "{semantic.color.brand}" / "{semantic.color.brand}" |
| `component.button-brand.hover` / `--sw-component-button-brand-hover` | Public tenant-branded button hover fill; button-brand; override: none | Public tenant-branded button hover fill | Use only for the named component or role; do not replace unrelated system roles. | #02675D | #02675D | on-brand | "{semantic.color.brand-hover}" / "{semantic.color.brand-hover}" |
| `component.button-brand.pressed` / `--sw-component-button-brand-pressed` | Public tenant-branded button pressed fill; button-brand; override: none | Public tenant-branded button pressed fill | Use only for the named component or role; do not replace unrelated system roles. | #046158 | #046158 | on-brand | "{semantic.color.brand-active}" / "{semantic.color.brand-active}" |
| `component.button-brand.label` / `--sw-component-button-brand-label` | Public tenant-branded button text; button-brand; override: none | Public tenant-branded button text | Use only for the named component or role; do not replace unrelated system roles. | #FFF4E8 | #FFF4E8 | brand, brand-hover, brand-active | "{semantic.color.on-brand}" / "{semantic.color.on-brand}" |
| `component.button-brand.boundary` / `--sw-component-button-brand-boundary` | Essential public tenant-branded button perimeter; button-brand; override: none | Essential public tenant-branded button perimeter | Use only for the named component or role; do not replace unrelated system roles. | #006E63 | #80B1A6 | bg, surface, panel, hover | "{semantic.color.brand-boundary}" / "{semantic.color.brand-boundary}" |