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 first. Every colour pairing, including failed state/boundary combinations and computed replacements, is in the contrast matrix; 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):
lineanddanger-lineare decorative.outlinehas restricted backgrounds; useboundary-strongfor essential neutral boundaries across hover/pressed surfaces. Usestate-indicator(accent-ink), or tenant brand-boundary, for essential thin selected marks. Preserve the legacy colours.
semantic roles
Section titled “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
Section titled “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}” |