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>
887 B
887 B
Foundations · Grid
12-column responsive grid, with gutters that scale by breakpoint.
| 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.