<!-- GENERATED — do not edit. Source: packages/web-components/styles/colors/material-static.css.
     Provenance: produced in the framework monorepo at cut time by
     scripts/release/check-token-semantics-sync.mjs (producer-side tooling,
     not runnable from a consumer install — in a consumer repo this file
     describes the version you installed). -->

# Role roster — the `--md-sys-color-*` semantic layer

**Palettes (8):** neutral (54) · primary (54) · secondary (54) · tertiary (54) · info (54) · success (54) · warning (54) · danger (54) — every palette carries the full roster.

Grammar: `--md-sys-color-{palette}{suffix}`. Chrome palette = `neutral`; brand accent = `primary`; `secondary`/`tertiary` support; `info/success/warning/danger` carry MEANING only. Consume via `var()` — never a raw `-050…-950` stop, never a hex.

| Family | Suffixes (`{p}` = the palette's own slug) | Meaning |
|---|---|---|
| accent | `(bare)` | The bare accent — the palette's main solid fill (CTAs for primary; the intent color for intents) |
| accent variants | `-dim` `-bright` `-low` `-high` | Tonal variants of the accent for de/emphasis without leaving the palette |
| accent states | `-hover` `-active` `-disabled` | The solid accent fill's baked states — never synthesize with opacity/color-mix |
| on-accent | `-on-{p}` `-on-{p}-variant` `-on-{p}-hover` `-on-{p}-active` `-on-{p}-disabled` | Ink on the palette's own solid fill (the accent). FIXED LIGHT in both schemes by design — never "fix" with dark text or auto-contrast |
| UNCLASSIFIED | `-on-{p}-container` | ⚠ suffix not in the doctrine table — classify it |
| on-surface | `-on-surface` `-on-surface-variant` `-on-surface-hover` `-on-surface-active` `-on-surface-disabled` | Text/icon ink on the SAME palette's surfaces/containers/background — the pairing law's ink side, with baked states |
| placeholder | `-placeholder` | Form placeholder ink |
| outline | `-outline` `-outline-variant` `-outline-hover` `-outline-active` `-outline-disabled` | Borders/dividers/rings, with a softer -variant and baked states |
| container | `-container` `-container-low` `-container-high` `-container-hover` `-container-active` `-container-disabled` | Translucent tint fills for chips/badges/soft emphasis (distinct from the opaque surface ladder), with baked states |
| inverse | `-inverse-surface` `-inverse-on-surface` | The opposite-scheme pocket (tooltips, snackbars) |
| background | `-background` | The palette's page-level backdrop |
| surface ladder | `-surface` `-surface-dimmest` `-surface-dimmer` `-surface-dim` `-surface-bright` `-surface-brighter` `-surface-brightest` `-surface-lowest` `-surface-lower` `-surface-low` `-surface-high` `-surface-higher` `-surface-highest` | Elevation IS this ladder (dim↔bright, low↔high) — raise/recess with surfaces, never with opacity or ad-hoc shadows |
| scrim | `-scrim-weakest` `-scrim-weaker` `-scrim-weak` `-scrim` `-scrim-strong` `-scrim-stronger` `-scrim-strongest` | Scrim ladder — 7-step overlay dims for layering under sheets/dialogs/toasts |

⚠ **Unclassified roles (doctrine table needs updating):** --md-sys-color-neutral-on-neutral-container