feat: design system v1.0.0 — reconcile tokens from cross-repo audit

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>
This commit is contained in:
Paul Roberts
2026-05-17 17:51:39 +00:00
parent 5c6d703774
commit 6593bdf689
28 changed files with 904 additions and 247 deletions
+24 -5
View File
@@ -1,8 +1,27 @@
# Foundations · Elevation
Reference documentation for the **elevation** foundation. The canonical token values
live in [`../../design.md`](../../design.md) and the machine-readable export
in [`../../tokens/`](../../tokens/).
Five-step shadow scale tinted with the brand ink so shadows read **warm** against the canvas — not cold slate.
This page is for human-facing rationale: when to use which token, examples,
and platform notes.
## 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 `focusRing` consistently — 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.30.4 of brand.ink). See `themes/dark/theme.json`.