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>
Navigation
App shell, sidebar, top bar, tabs, breadcrumbs. Reference: kdcvault/frontend/src/components/ui/sidebar.tsx, kdcsurveyadd/components/sidebar-nav.tsx, k-d-c-workspace/dashboard/components/AppShell.tsx.
Anatomy
App shell = top bar (60px, surface.background, hairline bottom border) + sidebar (240px collapsed → 72px icon-only, dark brand.ink on workspace; canvas-toned in product apps) + main outlet.
Variants
| Pattern | Use |
|---|---|
| Top bar + sidebar | Default product layout (vault, void planner, surveyadd) |
| Top bar only | Simple tools (mapper, tracker) |
| Sidebar collapsible | SidebarProvider controls expanded / icon-only / off-canvas (mobile) |
| Command palette | ⌘K trigger; modal.default shell over backdrop |
| Tabs | In-page section switching — underline (border.bottom-2 brand.primary active) |
| Breadcrumbs | Hierarchical path; text.muted non-active, text.default current, › separator in text.disabled |
Sidebar items
- 40px row height, 12px horizontal padding, 12px gap between icon and label.
- Icon 20×20px from the curated Phosphor set (see
assets/icons/). - Active state:
brand.primarySoftbackground,brand.primarytext, 2px left border inbrand.primary. - Hover:
surface.subtlebackground. - Section labels:
captionuppercase,text.muted, 24px row.
Top bar
- 60px tall, sticky.
- Left: brand mark · workspace switcher. Right: search · notifications · user menu.
backdrop-filter: saturate(180%) blur(14px)on scroll (translucent over content).
Tokens used
components.button.* (icon buttons), colors.surface.*, colors.border.*, elevation.focusRing.
Accessibility
- Sidebar uses
<nav aria-label="primary">; in-page tabs userole="tablist"/role="tab"/role="tabpanel". - Current page link:
aria-current="page". - Skip-to-content link as the first focusable element, visible on focus.
- Command palette: trap focus, restore on close, announce via
aria-live.
Do / Don't
- ✅ Always show the active route — left border + tinted background, not colour-shift alone.
- ✅ Collapse to icon-only below 1024px, off-canvas below 768px.
- ❌ Don't nest more than two sidebar levels — flatten into separate sections.
- ❌ Don't put primary actions in the sidebar — they belong in the top bar or page header.