Governs surfaces, depth, and effect scarcity - glass on sticky chrome and overlays only (one layer maximum, with a contrast fallback), dark-mode elevation via a 4-step surface ladder and 1px hairlines instead of shadows, whisper-quiet light-mode shadows, radius scaled to element size with concentric nesting, and a budget of one gradient zone and one signature effect per page. Use when someone asks "should this card use a shadow or a border", "when is glassmorphism acceptable", "what border radius should buttons versus cards use", "our nested corners look crooked", "how do we show elevation in dark mode", or a page stacks blur, gradients, grain, and glow at once. Do NOT use for palette and accent decisions - use premium-color-discipline instead; for icon construction and stroke rules, use icon-system.
---
name: material-and-depth-language
description: Governs surfaces, depth, and effect scarcity - glass on sticky chrome and overlays only (one layer maximum, with a contrast fallback), dark-mode elevation via a 4-step surface ladder and 1px hairlines instead of shadows, whisper-quiet light-mode shadows, radius scaled to element size with concentric nesting, and a budget of one gradient zone and one signature effect per page. Use when someone asks "should this card use a shadow or a border", "when is glassmorphism acceptable", "what border radius should buttons versus cards use", "our nested corners look crooked", "how do we show elevation in dark mode", or a page stacks blur, gradients, grain, and glow at once. Do NOT use for palette and accent decisions - use premium-color-discipline instead; for icon construction and stroke rules, use icon-system.
---
# material-and-depth-language
An effect used once is a signature; used everywhere it is wallpaper, and wallpaper destroys the contrast, the color budget, and the rendering performance that carry the premium read. The failure boundary is documented, not taste: even the platform that invented the glass material had to ship a legibility correction. This skill is the rationing system for everything that sits between color and layout - surfaces, shadows, radii, blur, grain, and glow.
## Operating procedure
Work the steps in order. The elevation model comes first because radius and glass decisions depend on which surfaces actually exist; effects are budgeted last because they spend whatever contrast and attention remain.
### Step 1: Gather the surface inventory and the charter
Ask for five things and label every unknown a guess:
1. **Themes** in scope - dark, light, or both.
2. **Inventory** of elevated surfaces: cards, menus, modals, sticky chrome.
3. **Radius values** in use, per element class.
4. **Effects** present anywhere - blur, gradients, grain, glow - each with its location.
5. **Charter** - the client charter's CTA geometry and radius language. Paste the charter block if one exists. If the client has a charter but the foundations pack is not installed, elicit the needed values directly and label them provisional. If no charter exists at all, halt and route to premium-design-foundations - never substitute worked-example values. Inventing a radius language here produces house taste, not the client's.
### Step 2: Build the elevation model per theme
… install to load the full skill