Paul Roberts
6593bdf689
Extracted real production usage from 8 KDC repos and consolidated the consensus (kdcsurveyadd / kdcvault / kdc_void_planner) into the canonical design.md + tokens. Highlights: - brand.ink #000000 -> #1A1530 (purple-tinted, matches real usage) - brand.canvas #F5F4F0 -> #F7F4ED (warm) - neutral ramp rebuilt around ink (purple-tinted, not cold slate) - semantic palette retuned for warm canvas + soft tints - elevation shadows retinted with brand-ink rgb - new accent.gold (product) and accent.mint (marketing) tokens - real themes/light, themes/dark, themes/high-contrast - fleshed out every component + foundation README - docs/consolidation-2026-05.md captures the full audit + drift inventory Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1.2 KiB
1.2 KiB
Foundations · Elevation
Five-step shadow scale tinted with the brand ink so shadows read warm against the canvas — not cold slate.
Scale
| Level | Shadow | Use |
|---|---|---|
0 |
none | Flush surfaces, page background |
1 |
0 1px 2px rgba(26,21,48,0.04) |
Cards, list rows, buttons |
2 |
0 4px 12px -4px rgba(26,21,48,0.08) |
Dropdowns, popovers |
3 |
0 16px 40px -16px rgba(26,21,48,0.18) |
Modals, dialogs |
4 |
0 24px 80px -24px rgba(26,21,48,0.22) |
Toasts, command palette |
focusRing |
0 0 0 3px rgba(107,53,167,0.18) |
Any focusable element |
rgb(26 21 48) is brand.ink; rgb(107 53 167) is brand.primary.
Rules
- ✅ Treat the scale as discrete. Hover may bump elevation one step, never two.
- ✅ Use
focusRingconsistently — never invent a per-component focus style. - ❌ Don't use elevation for decoration. Reserve it for hierarchy and affordance.
- ❌ Don't use grey / black shadows; they look dirty on the warm canvas.
Dark theme
In dark theme, elevation is communicated primarily through lighter surface tints rather than darker shadows. Shadows still exist but with reduced alpha (0.3–0.4 of brand.ink). See themes/dark/theme.json.