web-color-depthlisted

# Web Color & Depth Rules only. No process narration. ## Color system - Prefer **OKLCH** for scales; hold hue, vary L/C. - Product UI: **≥90% neutrals + 1 accent**. Semantic only: success / warning / error / info. - Marketing may commit harder; still **one primary accent** unless brief says otherwise. - Tint neutrals (warm ~60° or cool ~250°); avoid pure `#000` / `#fff` on large surfaces. - **One accent lock**: same accent across the whole page/app surface. - Never default: purple→cyan gradients, neon glow, Inter+slate-900 purple SaaS look, cream+brass+espresso “premium” default. - Max accent saturation usually **< 80%** unless brand demands it. - Interactive states **increase contrast** vs rest (hover/active/focus). - Prefer **APCA** / WCAG AA min (text 4.5:1, UI 3:1). Mid-lightness surfaces (L≈0.4–0.7) are contrast traps. - Dark mode: `color-scheme`; elevate with **white alpha overlays** (≈6/8/12%) not inventing random lighter greys; reduce shadow intensity. - P3: ship sRGB-safe default, richer chroma under `@media (color-gamut: p3)`. - Never grey text on saturated fills — use darker shade of the fill or alpha of on-color. - Tokens: primitives → semantic (`--surface-*`, `--text-*`, `--status-*`, `--interactive-*`). No raw hex in components. ## Shadow / elevation ```css --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px rgb(0 0 0 / 0.07), 0 1px 3px rgb(0 0 0 / 0.06); --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05); --shadow-xl: 0