Token reference
Every semantic colour token, light and dark side by side. This page is generated from
tokens/tokens.json, so it is
always current. In CSS, each token is a --color-* variable holding an sRGB triplet.
How the tokens behave:
accentis Maker Teal, the action colour.branddefaults to the accent, and is the one family a makerspace may override with its own colour.emphasisis Workshop Orange. It belongs to Space Works and can never be overridden.*-softtokens are opaque tinted fills for pills and cards.*-inktokens are the text colour that passes contrast on every surface.dangercomes from the UX references, because the brand palette has no red. It is reserved for destructive actions and errors.
How every value was derived, with its contrast ratio, is in the UI brand spec.
Surfaces and text
| Token | Light | Dark |
|---|---|---|
--color-bg | #FFF4E8 | #000000 |
--color-surface | #F6ECE0 | #0B0B0B |
--color-panel | #FFFFFF | #141414 |
--color-hover | #EFE6DB | #1C1C1C |
--color-line | #D5D0C6 | #2C2C2C |
--color-outline | #828A83 | #787878 |
--color-ink | #142C2A | #FFF4E8 |
--color-muted | #5B6863 | #ACACAC |
--color-focus | #006E63 | #DFFF8F |
Accent
| Token | Light | Dark |
|---|---|---|
--color-accent | #006E63 | #006E63 |
--color-accent-hover | #02675D | #02675D |
--color-accent-active | #046158 | #046158 |
--color-on-accent | #FFF4E8 | #FFF4E8 |
--color-accent-soft | #E0EEEC | #121D1C |
--color-accent-ink | #006E63 | #80B1A6 |
Brand
| Token | Light | Dark |
|---|---|---|
--color-brand | #006E63 | #006E63 |
--color-brand-hover | #02675D | #02675D |
--color-brand-active | #046158 | #046158 |
--color-on-brand | #FFF4E8 | #FFF4E8 |
--color-brand-soft | #E0EEEC | #121D1C |
--color-brand-ink | #006E63 | #80B1A6 |
--color-brand-boundary | #006E63 | #80B1A6 |
Emphasis
| Token | Light | Dark |
|---|---|---|
--color-emphasis | #FF7447 | #FF7447 |
--color-emphasis-hover | #FF8157 | #FF8157 |
--color-emphasis-active | #FF8E67 | #FF8E67 |
--color-on-emphasis | #142C2A | #142C2A |
--color-emphasis-soft | #FFEEE9 | #221A17 |
Success
| Token | Light | Dark |
|---|---|---|
--color-success | #DFFF8F | #DFFF8F |
--color-success-hover | #CBEA85 | #CBEA85 |
--color-success-active | #B6D57B | #B6D57B |
--color-on-success | #142C2A | #142C2A |
--color-success-soft | #FBFFF2 | #20221B |
--color-success-ink | #536D49 | #E9FCAA |
Warn
| Token | Light | Dark |
|---|---|---|
--color-warn | #FFD447 | #FFD447 |
--color-warn-hover | #E8C344 | #E8C344 |
--color-warn-active | #D0B241 | #D0B241 |
--color-on-warn | #142C2A | #142C2A |
--color-warn-soft | #FFFAE9 | #222017 |
--color-warn-ink | #696834 | #FFDE77 |
Info
| Token | Light | Dark |
|---|---|---|
--color-info | #B5CDFF | #B5CDFF |
--color-info-hover | #A5BDEA | #A5BDEA |
--color-info-active | #95ADD4 | #95ADD4 |
--color-on-info | #142C2A | #142C2A |
--color-info-soft | #F6F9FF | #1E1F22 |
--color-info-ink | #51697B | #CBD9F8 |
Danger
| Token | Light | Dark |
|---|---|---|
--color-danger | #B91C1C | #FCA5A5 |
--color-danger-hover | #991B1B | #FDB9B6 |
--color-danger-active | #851E1D | #FDC9C3 |
--color-on-danger | #FFF4E8 | #142C2A |
--color-danger-line | #FCA5A5 | #7C6261 |
Sidebar
| Token | Light | Dark |
|---|---|---|
--color-sidebar | #DFFF8F | #0B0B0B |
--color-sidebar-hover | #F2FFD2 | #1C1C1C |
--color-sidebar-active | #006E63 | #006E63 |
Scrim
| Token | Light | Dark |
|---|---|---|
--color-scrim | #142C2A | #000000 |
Chart series
Design System v2.0, SW-380: series 1-5 are the five bright brand colours (teal, orange, citron, sky, yellow), the SAME hex in light and dark. Contrast is carried by `edge` (a 1px edge on every filled mark, a 4px casing under every 2px line), never by dulling a fill. Danger is not a series colour: use it explicitly for a bad or negative value. Series colour is chosen by hashing the series identity; each series also gets a dash pattern (solid, 8 4, 2 4, 10 3 2 3) so colour is never the only cue.
| Token | Light | Dark |
|---|---|---|
--chart-1 | #006E63 | #006E63 |
--chart-2 | #FF7447 | #FF7447 |
--chart-3 | #DFFF8F | #DFFF8F |
--chart-4 | #B5CDFF | #B5CDFF |
--chart-5 | #FFD447 | #FFD447 |
--chart-edge | #142C2A | #FFF4E8 |
Box-open loader
Box-open loader (motion/box-open/). The box faces are the logo masters' own colours.
| Token | Light | Dark |
|---|---|---|
--sw-under | #354845 | #66625D |
--sw-spark | #142C2A | #FFF4E8 |
--sw-seam | #142C2A | #000000 |
Find a token by purpose
Section titled “Find a token by purpose”The paired portable contract includes chart-danger, Aurora and loader-local roles. Scope and partner restrictions are explicit; a partner label alone does not certify contrast. Read architecture, the complete generated usage table and required/diagnostic contrast pairs. Download all exports and checksums.
219 roles
| DTCG / CSS / legacy | Purpose and use | Scope / override | Contrast partner / exclusions |
|---|---|---|---|
semantic.color.bg--sw-semantic-color-bg--color-bg | bg background Page canvas | system none | ink, muted Do not use as text or an essential boundary. |
semantic.color.surface--sw-semantic-color-surface--color-surface | surface background Inset or secondary surface | system none | ink, muted Do not use as text or an essential boundary. |
semantic.color.panel--sw-semantic-color-panel--color-panel | panel background Cards and floating panels | system none | ink, muted Do not use as text or an essential boundary. |
semantic.color.hover--sw-semantic-color-hover--color-hover | hover background Neutral hover state | system none | ink, muted Do not use as text or an essential boundary. |
semantic.color.line--sw-semantic-color-line--color-line | Decorative divider Nonessential card separators; accompany danger with text/icon | system none | bg, surface, panel, hover Never the only necessary control, focus or error cue; see contrast matrix. |
semantic.color.outline--sw-semantic-color-outline--color-outline | Legacy neutral control outline Only pairings marked PASS; use boundary-strong across hover and pressed surfaces | system none | bg, surface, panel, hover Never the only necessary control, focus or error cue; see contrast matrix. |
semantic.color.ink--sw-semantic-color-ink--color-ink | Primary text and icons Content, labels and icons on neutral surfaces | system none | bg, surface, panel, hover No alpha text; no use on filled teal or bright status fills. |
semantic.color.muted--sw-semantic-color-muted--color-muted | Secondary text, labels and placeholders Supporting text and placeholders with a visible label | system none | bg, surface, panel, hover No alpha text; no use on filled teal or bright status fills. |
semantic.color.focus--sw-semantic-color-focus--color-focus | Visible keyboard focus pigment 2px external outline with 2px gap on neutral surroundings | system none | bg, surface, panel, hover Do not rely on hue alone or place directly on a matching fill; check both adjacent colours. |
semantic.color.accent--sw-semantic-color-accent--color-accent | accent fill Opaque named action/status fill in its stated interaction state | system none | on-accent Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.accent-hover--sw-semantic-color-accent-hover--color-accent-hover | accent-hover fill Opaque named action/status fill in its stated interaction state | system none | on-accent Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.accent-active--sw-semantic-color-accent-active--color-accent-active | accent-active fill Opaque named action/status fill in its stated interaction state | system none | on-accent Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.on-accent--sw-semantic-color-on-accent--color-on-accent | Label on accent fill Opaque text/icons on accent default, hover and active fills | system none | accent, accent-hover, accent-active Neutral backgrounds, soft fills or another status fill without checking contrast. |
semantic.color.accent-soft--sw-semantic-color-accent-soft--color-accent-soft | accent-soft opaque tint Badges, pills and contextual panels | system none | accent-ink, ink, muted (verify matrix) No alpha tints; no danger-soft token exists. |
semantic.color.accent-ink--sw-semantic-color-accent-ink--color-accent-ink | Readable accent-ink foreground Links, icons, thin selected marks on neutral/soft grounds; check exact pairing | system none | bg, surface, panel, hover, corresponding soft fill Filled-button labels; use on-* instead. |
semantic.color.brand--sw-semantic-color-brand--color-brand | brand fill Opaque named action/status fill in its stated interaction state | system tenant-public | on-brand Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.brand-hover--sw-semantic-color-brand-hover--color-brand-hover | brand-hover fill Opaque named action/status fill in its stated interaction state | system tenant-public | on-brand Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.brand-active--sw-semantic-color-brand-active--color-brand-active | brand-active fill Opaque named action/status fill in its stated interaction state | system tenant-public | on-brand Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.on-brand--sw-semantic-color-on-brand--color-on-brand | Label on brand fill Opaque text/icons on brand default, hover and active fills | system tenant-public | brand, brand-hover, brand-active Neutral backgrounds, soft fills or another status fill without checking contrast. |
semantic.color.brand-soft--sw-semantic-color-brand-soft--color-brand-soft | brand-soft opaque tint Badges, pills and contextual panels | system tenant-public | brand-ink, ink, muted (verify matrix) No alpha tints; no danger-soft token exists. |
semantic.color.brand-ink--sw-semantic-color-brand-ink--color-brand-ink | Readable brand-ink foreground Links, icons, thin selected marks on neutral/soft grounds; check exact pairing | system tenant-public | bg, surface, panel, hover, corresponding soft fill Filled-button labels; use on-* instead. |
semantic.color.brand-boundary--sw-semantic-color-brand-boundary--color-brand-boundary | Essential tenant-brand boundary Links, icons, thin selected marks on neutral/soft grounds; check exact pairing | system tenant-public | bg, surface, panel, hover, corresponding soft fill Filled-button labels; use on-* instead. |
semantic.color.emphasis--sw-semantic-color-emphasis--color-emphasis | emphasis fill Opaque named action/status fill in its stated interaction state | system none | on-emphasis Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.emphasis-hover--sw-semantic-color-emphasis-hover--color-emphasis-hover | emphasis-hover fill Opaque named action/status fill in its stated interaction state | system none | on-emphasis Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.emphasis-active--sw-semantic-color-emphasis-active--color-emphasis-active | emphasis-active fill Opaque named action/status fill in its stated interaction state | system none | on-emphasis Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.on-emphasis--sw-semantic-color-on-emphasis--color-on-emphasis | Label on emphasis fill Opaque text/icons on emphasis default, hover and active fills | system none | emphasis, emphasis-hover, emphasis-active Neutral backgrounds, soft fills or another status fill without checking contrast. |
semantic.color.emphasis-soft--sw-semantic-color-emphasis-soft--color-emphasis-soft | emphasis-soft opaque tint Badges, pills and contextual panels | system none | emphasis-ink, ink, muted (verify matrix) No alpha tints; no danger-soft token exists. |
semantic.color.success--sw-semantic-color-success--color-success | success fill Opaque named action/status fill in its stated interaction state | system none | on-success Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.success-hover--sw-semantic-color-success-hover--color-success-hover | success-hover fill Opaque named action/status fill in its stated interaction state | system none | on-success Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.success-active--sw-semantic-color-success-active--color-success-active | success-active fill Opaque named action/status fill in its stated interaction state | system none | on-success Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.on-success--sw-semantic-color-on-success--color-on-success | Label on success fill Opaque text/icons on success default, hover and active fills | system none | success, success-hover, success-active Neutral backgrounds, soft fills or another status fill without checking contrast. |
semantic.color.success-soft--sw-semantic-color-success-soft--color-success-soft | success-soft opaque tint Badges, pills and contextual panels | system none | success-ink, ink, muted (verify matrix) No alpha tints; no danger-soft token exists. |
semantic.color.success-ink--sw-semantic-color-success-ink--color-success-ink | Readable success-ink foreground Links, icons, thin selected marks on neutral/soft grounds; check exact pairing | system none | bg, surface, panel, hover, corresponding soft fill Filled-button labels; use on-* instead. |
semantic.color.warn--sw-semantic-color-warn--color-warn | warn fill Opaque named action/status fill in its stated interaction state | system none | on-warn Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.warn-hover--sw-semantic-color-warn-hover--color-warn-hover | warn-hover fill Opaque named action/status fill in its stated interaction state | system none | on-warn Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.warn-active--sw-semantic-color-warn-active--color-warn-active | warn-active fill Opaque named action/status fill in its stated interaction state | system none | on-warn Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.on-warn--sw-semantic-color-on-warn--color-on-warn | Label on warn fill Opaque text/icons on warn default, hover and active fills | system none | warn, warn-hover, warn-active Neutral backgrounds, soft fills or another status fill without checking contrast. |
semantic.color.warn-soft--sw-semantic-color-warn-soft--color-warn-soft | warn-soft opaque tint Badges, pills and contextual panels | system none | warn-ink, ink, muted (verify matrix) No alpha tints; no danger-soft token exists. |
semantic.color.warn-ink--sw-semantic-color-warn-ink--color-warn-ink | Readable warn-ink foreground Links, icons, thin selected marks on neutral/soft grounds; check exact pairing | system none | bg, surface, panel, hover, corresponding soft fill Filled-button labels; use on-* instead. |
semantic.color.info--sw-semantic-color-info--color-info | info fill Opaque named action/status fill in its stated interaction state | system none | on-info Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.info-hover--sw-semantic-color-info-hover--color-info-hover | info-hover fill Opaque named action/status fill in its stated interaction state | system none | on-info Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.info-active--sw-semantic-color-info-active--color-info-active | info-active fill Opaque named action/status fill in its stated interaction state | system none | on-info Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.on-info--sw-semantic-color-on-info--color-on-info | Label on info fill Opaque text/icons on info default, hover and active fills | system none | info, info-hover, info-active Neutral backgrounds, soft fills or another status fill without checking contrast. |
semantic.color.info-soft--sw-semantic-color-info-soft--color-info-soft | info-soft opaque tint Badges, pills and contextual panels | system none | info-ink, ink, muted (verify matrix) No alpha tints; no danger-soft token exists. |
semantic.color.info-ink--sw-semantic-color-info-ink--color-info-ink | Readable info-ink foreground Links, icons, thin selected marks on neutral/soft grounds; check exact pairing | system none | bg, surface, panel, hover, corresponding soft fill Filled-button labels; use on-* instead. |
semantic.color.danger--sw-semantic-color-danger--color-danger | danger fill Opaque named action/status fill in its stated interaction state | system none | on-danger Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.danger-hover--sw-semantic-color-danger-hover--color-danger-hover | danger-hover fill Opaque named action/status fill in its stated interaction state | system none | on-danger Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.danger-active--sw-semantic-color-danger-active--color-danger-active | danger-active fill Opaque named action/status fill in its stated interaction state | system none | on-danger Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.on-danger--sw-semantic-color-on-danger--color-on-danger | Label on danger fill Opaque text/icons on danger default, hover and active fills | system none | danger, danger-hover, danger-active Neutral backgrounds, soft fills or another status fill without checking contrast. |
semantic.color.danger-line--sw-semantic-color-danger-line--color-danger-line | Decorative danger-card border Nonessential card separators; accompany danger with text/icon | system none | bg, surface, panel, hover Never the only necessary control, focus or error cue; see contrast matrix. |
semantic.color.sidebar--sw-semantic-color-sidebar--color-sidebar | sidebar background Sidebar ground or row hover | system none | sidebar-ink (selected rows use on-accent) Do not use as text or an essential boundary. |
semantic.color.sidebar-hover--sw-semantic-color-sidebar-hover--color-sidebar-hover | sidebar-hover background Sidebar ground or row hover | system none | sidebar-ink (selected rows use on-accent) Do not use as text or an essential boundary. |
semantic.color.sidebar-active--sw-semantic-color-sidebar-active--color-sidebar-active | sidebar-active fill Opaque named action/status fill in its stated interaction state | system none | on-accent Not a text ink or essential thin state mark; use *-ink, brand-boundary or state-indicator. |
semantic.color.scrim--sw-semantic-color-scrim--color-scrim | Modal backdrop pigment Composite over page at named scrim opacity; isolate from dialog content | system none | Composite over bg, surface, panel; not a label foreground Text colour or a translucent parent of content. |
semantic.chart.series1--sw-semantic-chart-series1--chart-1 | Stable categorical chart fill series1 Hash series identity into series1–5; add dash/shape cues | chart none | chart.edge; labels use ink on panel Never use fill alone as a low-contrast necessary line; never convey data by colour alone. |
semantic.chart.series2--sw-semantic-chart-series2--chart-2 | Stable categorical chart fill series2 Hash series identity into series1–5; add dash/shape cues | chart none | chart.edge; labels use ink on panel Never use fill alone as a low-contrast necessary line; never convey data by colour alone. |
semantic.chart.series3--sw-semantic-chart-series3--chart-3 | Stable categorical chart fill series3 Hash series identity into series1–5; add dash/shape cues | chart none | chart.edge; labels use ink on panel Never use fill alone as a low-contrast necessary line; never convey data by colour alone. |
semantic.chart.series4--sw-semantic-chart-series4--chart-4 | Stable categorical chart fill series4 Hash series identity into series1–5; add dash/shape cues | chart none | chart.edge; labels use ink on panel Never use fill alone as a low-contrast necessary line; never convey data by colour alone. |
semantic.chart.series5--sw-semantic-chart-series5--chart-5 | Stable categorical chart fill series5 Hash series identity into series1–5; add dash/shape cues | chart none | chart.edge; labels use ink on panel Never use fill alone as a low-contrast necessary line; never convey data by colour alone. |
semantic.chart.edge--sw-semantic-chart-edge--chart-edge | Chart mark edge and line casing 1px filled-mark edge, 4px casing under a 2px line | chart none | Chart fills and panel Never use fill alone as a low-contrast necessary line; never convey data by colour alone. |
semantic.chart.danger--sw-semantic-chart-danger--chart-danger | Explicit negative chart data Bad/negative values only; never categorical order | chart none | chart.edge; labels use ink on panel Never use fill alone as a low-contrast necessary line; never convey data by colour alone. |
component.loader.under--sw-component-loader-under | Box-open loader local under Only box-open loader: underside face | loader-local none | Local logo face colours; diagnostic matrix is not permission to recolour logo Not a global text, boundary, status or focus role; logo face colours remain their masters. |
component.loader.spark--sw-component-loader-spark | Box-open loader local spark Only box-open loader: spark strokes | loader-local none | Local logo face colours; diagnostic matrix is not permission to recolour logo Not a global text, boundary, status or focus role; logo face colours remain their masters. |
component.loader.seam--sw-component-loader-seam | Box-open loader local seam Only box-open loader: fold seam | loader-local none | Local logo face colours; diagnostic matrix is not permission to recolour logo Not a global text, boundary, status or focus role; logo face colours remain their masters. |
component.aurora.background--sw-component-aurora-background | Aurora badge-card background Aurora ID/badge card background slot only (decision 317a) | aurora-local none | aurora.text, aurora.label Not a global surface or status role; header label uses on-accent, ribbon/tail labels use deep ink. |
component.aurora.text--sw-component-aurora-text | Aurora badge-card text Aurora ID/badge card text slot only (decision 317a) | aurora-local none | aurora.background Not a global surface or status role; header label uses on-accent, ribbon/tail labels use deep ink. |
component.aurora.label--sw-component-aurora-label | Aurora badge-card label Aurora ID/badge card label slot only (decision 317a) | aurora-local none | aurora.background Not a global surface or status role; header label uses on-accent, ribbon/tail labels use deep ink. |
component.aurora.header--sw-component-aurora-header | Aurora badge-card header Aurora ID/badge card header slot only (decision 317a) | aurora-local none | on-accent Not a global surface or status role; header label uses on-accent, ribbon/tail labels use deep ink. |
component.aurora.ribbon--sw-component-aurora-ribbon | Aurora badge-card ribbon Aurora ID/badge card ribbon slot only (decision 317a) | aurora-local none | on-success Not a global surface or status role; header label uses on-accent, ribbon/tail labels use deep ink. |
component.aurora.tail--sw-component-aurora-tail | Aurora badge-card tail Aurora ID/badge card tail slot only (decision 317a) | aurora-local none | on-emphasis Not a global surface or status role; header label uses on-accent, ribbon/tail labels use deep ink. |
semantic.spacing.0--sw-semantic-spacing-0 | spacing 0 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.4--sw-semantic-spacing-4 | spacing 4 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.8--sw-semantic-spacing-8 | spacing 8 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.12--sw-semantic-spacing-12 | spacing 12 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.16--sw-semantic-spacing-16 | spacing 16 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.20--sw-semantic-spacing-20 | spacing 20 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.24--sw-semantic-spacing-24 | spacing 24 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.28--sw-semantic-spacing-28 | spacing 28 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.32--sw-semantic-spacing-32 | spacing 32 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.36--sw-semantic-spacing-36 | spacing 36 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.40--sw-semantic-spacing-40 | spacing 40 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.44--sw-semantic-spacing-44 | spacing 44 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.48--sw-semantic-spacing-48 | spacing 48 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.56--sw-semantic-spacing-56 | spacing 56 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.spacing.64--sw-semantic-spacing-64 | spacing 64 4px layout grid; choose the smallest step that preserves grouping | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.radius.none--sw-semantic-radius-none | radius none Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.radius.sm--sw-semantic-radius-sm | radius sm Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.radius.base--sw-semantic-radius-base | radius base Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.radius.md--sw-semantic-radius-md | radius md Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.radius.lg--sw-semantic-radius-lg | radius lg Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.radius.xl--sw-semantic-radius-xl | radius xl Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.radius.2xl--sw-semantic-radius-2xl | radius 2xl Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.radius.full--sw-semantic-radius-full | radius full Shape scale; controls use semantic.radius.control and cards use semantic.radius.card | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.border-width.none--sw-semantic-border-width-none | border-width none 1px borders, 2px focus/selected underline, 4px chart casing | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.border-width.hairline--sw-semantic-border-width-hairline | border-width hairline 1px borders, 2px focus/selected underline, 4px chart casing | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.border-width.strong--sw-semantic-border-width-strong | border-width strong 1px borders, 2px focus/selected underline, 4px chart casing | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.border-width.casing--sw-semantic-border-width-casing | border-width casing 1px borders, 2px focus/selected underline, 4px chart casing | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.breakpoint.sm--sw-semantic-breakpoint-sm | breakpoint sm Minimum viewport widths; 2xl is the inherited Tailwind default, wide is the app 1680px adaptation | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.breakpoint.md--sw-semantic-breakpoint-md | breakpoint md Minimum viewport widths; 2xl is the inherited Tailwind default, wide is the app 1680px adaptation | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.breakpoint.lg--sw-semantic-breakpoint-lg | breakpoint lg Minimum viewport widths; 2xl is the inherited Tailwind default, wide is the app 1680px adaptation | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.breakpoint.xl--sw-semantic-breakpoint-xl | breakpoint xl Minimum viewport widths; 2xl is the inherited Tailwind default, wide is the app 1680px adaptation | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.breakpoint.2xl--sw-semantic-breakpoint-2xl | breakpoint 2xl Minimum viewport widths; 2xl is the inherited Tailwind default, wide is the app 1680px adaptation | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.breakpoint.wide--sw-semantic-breakpoint-wide | breakpoint wide Minimum viewport widths; 2xl is the inherited Tailwind default, wide is the app 1680px adaptation | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.size.control--sw-semantic-size-control | size control Minimum geometry; allow text growth and safe-area padding | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.size.row-list--sw-semantic-size-row-list | size row-list Minimum geometry; allow text growth and safe-area padding | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.size.row-table--sw-semantic-size-row-table | size row-table Minimum geometry; allow text growth and safe-area padding | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.size.sidebar--sw-semantic-size-sidebar | size sidebar Minimum geometry; allow text growth and safe-area padding | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.size.sidebar-app--sw-semantic-size-sidebar-app | size sidebar-app Minimum geometry; allow text growth and safe-area padding | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.size.bottom-tabs--sw-semantic-size-bottom-tabs | size bottom-tabs Minimum geometry; allow text growth and safe-area padding | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.layer.base--sw-semantic-layer-base | layer base Stacking within a common context; nested overlays still require a stack manager | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.layer.local--sw-semantic-layer-local | layer local Stacking within a common context; nested overlays still require a stack manager | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.layer.raised--sw-semantic-layer-raised | layer raised Stacking within a common context; nested overlays still require a stack manager | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.layer.sticky--sw-semantic-layer-sticky | layer sticky Stacking within a common context; nested overlays still require a stack manager | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.layer.fixed--sw-semantic-layer-fixed | layer fixed Stacking within a common context; nested overlays still require a stack manager | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.layer.navigation--sw-semantic-layer-navigation | layer navigation Stacking within a common context; nested overlays still require a stack manager | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.layer.popover--sw-semantic-layer-popover | layer popover Stacking within a common context; nested overlays still require a stack manager | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.layer.overlay--sw-semantic-layer-overlay | layer overlay Stacking within a common context; nested overlays still require a stack manager | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.layer.critical--sw-semantic-layer-critical | layer critical Stacking within a common context; nested overlays still require a stack manager | system none | N/A: geometry or behaviour, not a contrast foreground. No arbitrary replacement of the named semantic/component role. |
semantic.opacity.hidden--sw-semantic-opacity-hidden | opacity hidden Decoration, shadow or scrim only; text and button disabled states stay opaque | system none | N/A: geometry or behaviour, not a contrast foreground. No alpha text, faded button labels or translucent soft fills. |
semantic.opacity.shadow-near--sw-semantic-opacity-shadow-near | opacity shadow-near Decoration, shadow or scrim only; text and button disabled states stay opaque | system none | N/A: geometry or behaviour, not a contrast foreground. No alpha text, faded button labels or translucent soft fills. |
semantic.opacity.shadow-far--sw-semantic-opacity-shadow-far | opacity shadow-far Decoration, shadow or scrim only; text and button disabled states stay opaque | system none | N/A: geometry or behaviour, not a contrast foreground. No alpha text, faded button labels or translucent soft fills. |
semantic.opacity.scrim-light--sw-semantic-opacity-scrim-light | opacity scrim-light Decoration, shadow or scrim only; text and button disabled states stay opaque | system none | N/A: geometry or behaviour, not a contrast foreground. No alpha text, faded button labels or translucent soft fills. |
semantic.opacity.scrim-medium--sw-semantic-opacity-scrim-medium | opacity scrim-medium Decoration, shadow or scrim only; text and button disabled states stay opaque | system none | N/A: geometry or behaviour, not a contrast foreground. No alpha text, faded button labels or translucent soft fills. |
semantic.opacity.scrim-default--sw-semantic-opacity-scrim-default | opacity scrim-default Decoration, shadow or scrim only; text and button disabled states stay opaque | system none | N/A: geometry or behaviour, not a contrast foreground. No alpha text, faded button labels or translucent soft fills. |
semantic.opacity.drag--sw-semantic-opacity-drag | opacity drag Decoration, shadow or scrim only; text and button disabled states stay opaque | system none | N/A: geometry or behaviour, not a contrast foreground. No alpha text, faded button labels or translucent soft fills. |
semantic.opacity.scrim-strong--sw-semantic-opacity-scrim-strong | opacity scrim-strong Decoration, shadow or scrim only; text and button disabled states stay opaque | system none | N/A: geometry or behaviour, not a contrast foreground. No alpha text, faded button labels or translucent soft fills. |
semantic.opacity.decoration--sw-semantic-opacity-decoration | opacity decoration Decoration, shadow or scrim only; text and button disabled states stay opaque | system none | N/A: geometry or behaviour, not a contrast foreground. No alpha text, faded button labels or translucent soft fills. |
semantic.opacity.solid--sw-semantic-opacity-solid | opacity solid Decoration, shadow or scrim only; text and button disabled states stay opaque | system none | N/A: geometry or behaviour, not a contrast foreground. No alpha text, faded button labels or translucent soft fills. |
semantic.motion.duration-none--sw-semantic-motion-duration-none | none motion duration Reduced motion and immediate state changes | system none | N/A: geometry or behaviour, not a contrast foreground. Do not delay input or announcements; reduced motion sets durations to zero. |
semantic.motion.duration-fast--sw-semantic-motion-duration-fast | fast motion duration Press, hover, exit | system none | N/A: geometry or behaviour, not a contrast foreground. Do not delay input or announcements; reduced motion sets durations to zero. |
semantic.motion.duration-base--sw-semantic-motion-duration-base | base motion duration Overlay and indicator | system none | N/A: geometry or behaviour, not a contrast foreground. Do not delay input or announcements; reduced motion sets durations to zero. |
semantic.motion.duration-slow--sw-semantic-motion-duration-slow | slow motion duration Route settle | system none | N/A: geometry or behaviour, not a contrast foreground. Do not delay input or announcements; reduced motion sets durations to zero. |
semantic.motion.duration-display-fade--sw-semantic-motion-duration-display-fade | display-fade motion duration Passive kiosk/display slide fade only (docs/motion.md) | system none | N/A: geometry or behaviour, not a contrast foreground. Do not delay input or announcements; reduced motion sets durations to zero. |
semantic.motion.duration-scroll-reveal--sw-semantic-motion-duration-scroll-reveal | scroll-reveal motion duration Once-only marketing scroll reveal (docs/motion.md) | system none | N/A: geometry or behaviour, not a contrast foreground. Do not delay input or announcements; reduced motion sets durations to zero. |
semantic.motion.duration-logo-box-open--sw-semantic-motion-duration-logo-box-open | logo-box-open motion duration Space Works mark box-open exception only; never general UI | system none | N/A: geometry or behaviour, not a contrast foreground. Do not delay input or announcements; reduced motion sets durations to zero. |
semantic.motion.easing-standard--sw-semantic-motion-easing-standard | standard motion curve Standard for movement; enter for arrival; exit for departure; out-soft is the app Tailwind curve. | system none | N/A: geometry or behaviour, not a contrast foreground. Do not animate layout or add hover translation. |
semantic.motion.easing-enter--sw-semantic-motion-easing-enter | enter motion curve Standard for movement; enter for arrival; exit for departure; out-soft is the app Tailwind curve. | system none | N/A: geometry or behaviour, not a contrast foreground. Do not animate layout or add hover translation. |
semantic.motion.easing-exit--sw-semantic-motion-easing-exit | exit motion curve Standard for movement; enter for arrival; exit for departure; out-soft is the app Tailwind curve. | system none | N/A: geometry or behaviour, not a contrast foreground. Do not animate layout or add hover translation. |
semantic.motion.easing-out-soft--sw-semantic-motion-easing-out-soft | out-soft motion curve Standard for movement; enter for arrival; exit for departure; out-soft is the app Tailwind curve. | system none | N/A: geometry or behaviour, not a contrast foreground. Do not animate layout or add hover translation. |
semantic.motion.enter-y--sw-semantic-motion-enter-y | Motion enter-y Arrival motion only; kiosk/TV zero translations and keep scale at one. | system none | N/A: geometry or behaviour, not a contrast foreground. Hover transforms; reduced-motion movement. |
semantic.motion.pop-scale--sw-semantic-motion-pop-scale | Motion pop-scale Arrival motion only; kiosk/TV zero translations and keep scale at one. | system none | N/A: geometry or behaviour, not a contrast foreground. Hover transforms; reduced-motion movement. |
semantic.motion.pop-offset--sw-semantic-motion-pop-offset | Motion pop-offset Arrival motion only; kiosk/TV zero translations and keep scale at one. | system none | N/A: geometry or behaviour, not a contrast foreground. Hover transforms; reduced-motion movement. |
semantic.motion.slide-x--sw-semantic-motion-slide-x | Motion slide-x Arrival motion only; kiosk/TV zero translations and keep scale at one. | system none | N/A: geometry or behaviour, not a contrast foreground. Hover transforms; reduced-motion movement. |
semantic.type.display--sw-semantic-type-display | display typography Public landing hero | system none | N/A: geometry or behaviour, not a contrast foreground. Do not request unshipped Gilroy 400–700; use Outfit for UI text. |
semantic.type.display-sub--sw-semantic-type-display-sub | display-sub typography Public/auth display supporting line | system none | N/A: geometry or behaviour, not a contrast foreground. No monospace substitution; IDs use Outfit tabular numerals. |
semantic.type.heading--sw-semantic-type-heading | heading typography Public section heading | system none | N/A: geometry or behaviour, not a contrast foreground. Do not request unshipped Gilroy 400–700; use Outfit for UI text. |
semantic.type.page--sw-semantic-type-page | page typography One page h1 | system none | N/A: geometry or behaviour, not a contrast foreground. No monospace substitution; IDs use Outfit tabular numerals. |
semantic.type.panel--sw-semantic-type-panel | panel typography Card/panel title | system none | N/A: geometry or behaviour, not a contrast foreground. No monospace substitution; IDs use Outfit tabular numerals. |
semantic.type.section--sw-semantic-type-section | section typography Section/list-row title | system none | N/A: geometry or behaviour, not a contrast foreground. No monospace substitution; IDs use Outfit tabular numerals. |
semantic.type.stat--sw-semantic-type-stat | stat typography Stat number with tabular numerals | system none | N/A: geometry or behaviour, not a contrast foreground. No monospace substitution; IDs use Outfit tabular numerals. |
semantic.type.date--sw-semantic-type-date | date typography Date chip numeral with tabular numerals | system none | N/A: geometry or behaviour, not a contrast foreground. No monospace substitution; IDs use Outfit tabular numerals. |
semantic.type.body--sw-semantic-type-body | body typography Body copy and input text | system none | N/A: geometry or behaviour, not a contrast foreground. No monospace substitution; IDs use Outfit tabular numerals. |
semantic.type.label--sw-semantic-type-label | label typography Form labels, navigation and meta | system none | N/A: geometry or behaviour, not a contrast foreground. No monospace substitution; IDs use Outfit tabular numerals. |
semantic.type.button--sw-semantic-type-button | button typography Button label | system none | N/A: geometry or behaviour, not a contrast foreground. No monospace substitution; IDs use Outfit tabular numerals. |
semantic.type.caption--sw-semantic-type-caption | caption typography Pills, timestamps and helper text | system none | N/A: geometry or behaviour, not a contrast foreground. No monospace substitution; IDs use Outfit tabular numerals. |
semantic.type.eyebrow--sw-semantic-type-eyebrow | eyebrow typography Short uppercase category kicker | system none | N/A: geometry or behaviour, not a contrast foreground. No monospace substitution; IDs use Outfit tabular numerals. |
semantic.type.accent--sw-semantic-type-accent | accent typography One short brand phrase | system none | N/A: geometry or behaviour, not a contrast foreground. No long copy: one short phrase per layout. |
semantic.type.display-mobile--sw-semantic-type-display-mobile | display-mobile typography Public landing hero; below 640px | system none | N/A: geometry or behaviour, not a contrast foreground. Do not request unshipped Gilroy 400–700; use Outfit for UI text. |
semantic.type.display-sub-mobile--sw-semantic-type-display-sub-mobile | display-sub-mobile typography Public/auth display supporting line; below 640px | system none | N/A: geometry or behaviour, not a contrast foreground. No monospace substitution; IDs use Outfit tabular numerals. |
semantic.type.heading-mobile--sw-semantic-type-heading-mobile | heading-mobile typography Public section heading; below 640px | system none | N/A: geometry or behaviour, not a contrast foreground. Do not request unshipped Gilroy 400–700; use Outfit for UI text. |
semantic.type.page-mobile--sw-semantic-type-page-mobile | page-mobile typography One page h1; below 640px | system none | N/A: geometry or behaviour, not a contrast foreground. No monospace substitution; IDs use Outfit tabular numerals. |
semantic.type.accent-mobile--sw-semantic-type-accent-mobile | accent-mobile typography One short brand phrase; below 640px | system none | N/A: geometry or behaviour, not a contrast foreground. No long copy: one short phrase per layout. |
semantic.elevation.flat--sw-semantic-elevation-flat | flat elevation Cards and panels (no shadow) | system none | N/A: geometry or behaviour, not a contrast foreground. Use overlay only for floating content. |
semantic.elevation.overlay--sw-semantic-elevation-overlay | overlay elevation Floating menus, popovers, dialogs, drawers and toasts only | system none | N/A: geometry or behaviour, not a contrast foreground. No shadow on flat cards; no invented elevation ladder. |
semantic.color.boundary-strong--sw-semantic-color-boundary-strong | Essential control boundary across neutral default, hover and pressed surfaces Inputs, checkbox outlines and essential separators | system none | bg, surface, panel, hover, line Decorative dividers; use line there |
semantic.color.state-indicator--sw-semantic-color-state-indicator | Essential selected-state mark Tab underline, selected icon or short state stroke on neutral surfaces | system none | bg, surface, panel, hover Text on a filled accent button; use on-accent |
semantic.color.sidebar-ink--sw-semantic-color-sidebar-ink | Sidebar text Neutral sidebar and hover rows | system none | sidebar, sidebar-hover Selected teal row; use on-accent |
semantic.color.shadow--sw-semantic-color-shadow | Overlay shadow pigment Only the two overlay shadow layers | system none | panel Text, borders or flat cards |
semantic.space.page-phone--sw-semantic-space-page-phone | Phone page gutter Phone page gutter | system none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
semantic.space.page-tablet--sw-semantic-space-page-tablet | Tablet page gutter Tablet page gutter | system none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
semantic.space.page-desktop--sw-semantic-space-page-desktop | Desktop page gutter Desktop page gutter | system none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
semantic.space.card--sw-semantic-space-card | Default card padding Default card padding | system none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
semantic.space.settings--sw-semantic-space-settings | Settings card padding Settings card padding | system none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
semantic.space.control-x--sw-semantic-space-control-x | Control inline padding Control inline padding | system none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
semantic.space.control-y--sw-semantic-space-control-y | Control block padding Control block padding | system none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
semantic.radius.control--sw-semantic-radius-control | Owner-selectable control radius: 10px default, full for pill Owner-selectable control radius: 10px default, full for pill | system owner-control | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
semantic.radius.card--sw-semantic-radius-card | Card and panel radius Card and panel radius | system none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
semantic.focus.width--sw-semantic-focus-width | Visible focus outline width Visible focus outline width | system none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
semantic.focus.offset--sw-semantic-focus-offset | Gap between control and external focus outline Gap between control and external focus outline | system none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
semantic.focus.color--sw-semantic-focus-color | Focus outline pigment on neutral surfaces Focus outline pigment on neutral surfaces | system none | bg, surface, panel, hover Use only for the named component or role; do not replace unrelated system roles. |
semantic.motion.reduced-duration--sw-semantic-motion-reduced-duration | Reduced-motion duration; keep all content visible Reduced-motion duration; keep all content visible | system none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.button.height--sw-component-button-height | Minimum button hit area Minimum button hit area | button none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.button.radius--sw-component-button-radius | Button corners Button corners | button none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.button.padding-x--sw-component-button-padding-x | Button inline padding Button inline padding | button none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.button.padding-y--sw-component-button-padding-y | Button block padding Button block padding | button none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.button.fill--sw-component-button-fill | Primary button default fill Primary button default fill | button none | on-accent Use only for the named component or role; do not replace unrelated system roles. |
component.button.hover--sw-component-button-hover | Primary button hover fill Primary button hover fill | button none | on-accent Use only for the named component or role; do not replace unrelated system roles. |
component.button.pressed--sw-component-button-pressed | Primary button pressed fill Primary button pressed fill | button none | on-accent Use only for the named component or role; do not replace unrelated system roles. |
component.button.label--sw-component-button-label | Primary button label Primary button label | button none | accent, accent-hover, accent-active Use only for the named component or role; do not replace unrelated system roles. |
component.button.boundary--sw-component-button-boundary | Primary button essential perimeter Primary button essential perimeter | button none | bg, surface, panel, hover Use only for the named component or role; do not replace unrelated system roles. |
component.button.disabled-fill--sw-component-button-disabled-fill | Opaque disabled fill Opaque disabled fill | button none | muted Use only for the named component or role; do not replace unrelated system roles. |
component.button.disabled-label--sw-component-button-disabled-label | Opaque disabled label Opaque disabled label | button none | surface Use only for the named component or role; do not replace unrelated system roles. |
component.button.disabled-border--sw-component-button-disabled-border | Disabled decorative boundary Disabled decorative boundary | button none | surface Use only for the named component or role; do not replace unrelated system roles. |
component.button.type--sw-component-button-type | Button label typography Button label typography | button none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.input.height--sw-component-input-height | Minimum input hit area Minimum input hit area | input none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.input.radius--sw-component-input-radius | Input corners Input corners | input none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.input.boundary--sw-component-input-boundary | Input essential boundary including hover and pressed surroundings Input essential boundary including hover and pressed surroundings | input none | bg, surface, panel, hover, line Use only for the named component or role; do not replace unrelated system roles. |
component.input.fill--sw-component-input-fill | Input background matching app components.css Input background matching app components.css | input none | ink, muted Use only for the named component or role; do not replace unrelated system roles. |
component.input.label--sw-component-input-label | Input entered text Input entered text | input none | panel, surface Use only for the named component or role; do not replace unrelated system roles. |
component.input.placeholder--sw-component-input-placeholder | Placeholder text with a separate visible label Placeholder text with a separate visible label | input none | panel, surface Use only for the named component or role; do not replace unrelated system roles. |
component.input.type--sw-component-input-type | Input text; 16px minimum prevents phone focus zoom Input text; 16px minimum prevents phone focus zoom | input none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.tabs.indicator--sw-component-tabs-indicator | Selected tab underline Selected tab underline | tabs none | bg, surface, panel, hover Use only for the named component or role; do not replace unrelated system roles. |
component.tabs.indicator-width--sw-component-tabs-indicator-width | Tab underline thickness Tab underline thickness | tabs none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.card.fill--sw-component-card-fill | Flat card surface Flat card surface | card none | ink, muted Use only for the named component or role; do not replace unrelated system roles. |
component.card.radius--sw-component-card-radius | Card corners Card corners | card none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.card.padding--sw-component-card-padding | Card inset Card inset | card none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.card.border--sw-component-card-border | Decorative card divider only Decorative card divider only | card none | panel Use only for the named component or role; do not replace unrelated system roles. |
component.card.shadow--sw-component-card-shadow | Cards remain flat Cards remain flat | card none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.overlay.shadow--sw-component-overlay-shadow | Floating popover, menu, modal, drawer and toast shadow Floating popover, menu, modal, drawer and toast shadow | overlay none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.overlay.layer--sw-component-overlay-layer | Root overlay stacking group Root overlay stacking group | overlay none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.overlay.scrim-opacity--sw-component-overlay-scrim-opacity | Scrim opacity; apply to scrim only, never its content Scrim opacity; apply to scrim only, never its content | overlay none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.focus.color--sw-component-focus-color | External focus indicator separated from fill by an offset External focus indicator separated from fill by an offset | focus none | bg, surface, panel, hover Use only for the named component or role; do not replace unrelated system roles. |
component.focus.width--sw-component-focus-width | Focus outline width Focus outline width | focus none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.focus.offset--sw-component-focus-offset | External focus gap External focus gap | focus none | N/A: geometry or behaviour, not a contrast foreground. Use only for the named component or role; do not replace unrelated system roles. |
component.button-brand.fill--sw-component-button-brand-fill | Public tenant-branded button fill Public tenant-branded button fill | button-brand none | on-brand Use only for the named component or role; do not replace unrelated system roles. |
component.button-brand.hover--sw-component-button-brand-hover | Public tenant-branded button hover fill Public tenant-branded button hover fill | button-brand none | on-brand Use only for the named component or role; do not replace unrelated system roles. |
component.button-brand.pressed--sw-component-button-brand-pressed | Public tenant-branded button pressed fill Public tenant-branded button pressed fill | button-brand none | on-brand Use only for the named component or role; do not replace unrelated system roles. |
component.button-brand.label--sw-component-button-brand-label | Public tenant-branded button text Public tenant-branded button text | button-brand none | brand, brand-hover, brand-active Use only for the named component or role; do not replace unrelated system roles. |
component.button-brand.boundary--sw-component-button-brand-boundary | Essential public tenant-branded button perimeter Essential public tenant-branded button perimeter | button-brand none | bg, surface, panel, hover Use only for the named component or role; do not replace unrelated system roles. |