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.1 KiB
1.1 KiB
Foundations · Breakpoints
Five mobile-first breakpoints, aligned to Tailwind defaults so utility classes work without remapping.
| Token | Min width | Use |
|---|---|---|
sm |
640px | Larger phone / small tablet |
md |
768px | Tablet portrait |
lg |
1024px | Tablet landscape / small laptop |
xl |
1280px | Standard desktop |
2xl |
1536px | Wide desktop |
App shell behaviour
| Width | Layout |
|---|---|
< 768px (md) |
Sidebar off-canvas (drawer). Top bar collapses to brand + menu icon. |
768–1023px (md–lg) |
Sidebar icon-only (72px). |
≥ 1024px (lg) |
Sidebar expanded (240px). |
≥ 1280px (xl) |
Optional right-rail / detail column appears. |
Container
Max content width is 1200px, centered, with side padding of 16px (mobile) → 24px (tablet) → 32px (desktop).
Rules
- ✅ Always mobile-first. Stack to single column below
md; introduce side-by-side atmd+. - ✅ Test the 320px width — that's the floor.
- ❌ Don't use device-specific breakpoints (iPad, iPhone). Design for content reflow, not specific hardware.