Status: Phase 3 — first cut shipped. Deepens in Phase 5 with .material-thick / .material-chrome when use-cases land.

Statement

Frosted surfaces — popovers, sheets, action panels, picker overlays — render through a material taxonomy borrowed from Apple HIG: thin, regular, thick, chrome. Phase 3 ships the two we use today (.material-thin, .material-regular) as token-backed utility classes with documented a11y degradations. The legacy .glass / .glass-subtle names are retired.

The orthogonal axis of surface elevation (.surface-elevated, .surface-inset) keeps its own names and tokens. Material is "how the panel feels"; elevation is "how the panel sits relative to the canvas." Do not collapse them.

Why

The audit (Design/0000-hig-diagnostic.md §2.6, §3.4) flagged three drifts:

.glass and .glass-subtle were named after the visual effect ("glass") rather than the role ("material thickness"), so designers had no vocabulary for "I want a heavier blur than .glass-subtle but lighter than .glass" — the gradient between them was undiscoverable.
Neither class honored prefers-reduced-transparency: reduce, so users who explicitly request fewer translucent surfaces (a vestibular / cognitive accommodation) saw the blur anyway.
Browsers without backdrop-filter (older Safari, some embedded WebViews) rendered a low-opacity panel with content bleeding through behind it, which broke legibility.

The rename + degradation contract resolves all three.

How

Tokens (src/components/design-system/tokens.json → {light,dark}.material):

Token	Light	Dark	Class
`material.regular`	`rgba(255,255,255,0.7)`	`rgba(17,24,39,0.7)`	`.material-regular`
`material.thin`	`rgba(255,255,255,0.4)`	`rgba(17,24,39,0.4)`	`.material-thin`

Emitted as --material-regular and --material-thin CSS custom properties per theme. Generated by scripts/generate-tokens/css.mjs.

Classes (src/app/globals.css):

.material-regular — heavier blur (blur(20px) saturate(180%)), more opaque tint. Use for primary frosted surfaces (popovers, picker overlays, sheets that need to clearly separate from canvas).
.material-thin — lighter blur (blur(12px)), more transparent tint. Use for ambient overlays where the canvas should remain partly readable underneath.

A11y degradations (both classes):

@media (prefers-reduced-transparency: reduce) {
  .material-regular, .material-thin {
    backdrop-filter: none;
    background: var(--surface-1);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .material-regular, .material-thin {
    background: var(--surface-1);
  }
}

Both degradations collapse the material to a solid token-backed surface (--surface-1) so legibility is preserved.

Cross-references

DEC-0016 (modal vs sheet vs panel) — picks the structural primitive. F-8 picks the material that primitive renders through.
DEC-0017 (toast behavior) — toasts use .surface-elevated (elevation axis), not material. Distinct on purpose.
F-1 — material tokens live in the single-source pipeline; no raw rgba in components.

Out of scope (Phase 5)

.material-thick (heavier than regular — for full-canvas overlays).
.material-chrome (window-chrome material — system-bar / sidebar surface, follows OS appearance).
Per-component citation of where each material is used today.

Stop conditions

If backdrop-filter fallback rendering on a supported browser breaks a primary surface, harden the fallback before adding new materials.
If prefers-reduced-transparency degradation is found to break contrast on any surface, raise --surface-1 opacity in that context rather than reverting the degradation.