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
+20 -5
View File
@@ -1,8 +1,23 @@
# Foundations · Grid
Reference documentation for the **grid** foundation. The canonical token values
live in [`../../design.md`](../../design.md) and the machine-readable export
in [`../../tokens/`](../../tokens/).
12-column responsive grid, with gutters that scale by breakpoint.
This page is for human-facing rationale: when to use which token, examples,
and platform notes.
| Breakpoint | Columns | Gutter | Margin |
|------------|---------|--------|--------|
| < `md` (mobile) | 4 | 16px | 16px |
| `md` (tablet) | 8 | 24px | 24px |
| ≥ `lg` (desktop) | 12 | 24px | 32px |
Max content width: **1200px**, centered.
## Composition
- **Cards** snap to multiples of 3 columns (4-up / 3-up / 2-up).
- **Form fields** snap to multiples of 4 (full / half / third / quarter).
- **Sidebar layouts** reserve 3 columns left (240px ≈ 3 cols at 1200px container) and 9 columns for content.
## Rules
- ✅ Use CSS Grid for page layout, Flexbox for component internals.
- ✅ When in doubt, give content more room — KDS is generous with whitespace.
- ❌ Don't fight the grid for visual interest. Asymmetry comes from content rhythm, not from breaking the column structure.