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>
31 lines
1.1 KiB
Markdown
31 lines
1.1 KiB
Markdown
# 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 at `md`+.
|
||
- ✅ Test the 320px width — that's the floor.
|
||
- ❌ Don't use device-specific breakpoints (iPad, iPhone). Design for content reflow, not specific hardware.
|