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.3 KiB
1.3 KiB
Foundations · Radius
Corner radius scales with component density. Pick from the curated set — never hand-roll a value.
Scale
| Token | px | Use |
|---|---|---|
none |
0 | Resets, full-bleed images |
xs |
2 | Chips, inline tags |
sm |
4 | Inputs, small controls, tooltips |
md |
8 | Buttons, default surfaces |
lg |
12 | Cards, sections |
xl |
16 | Modals, sheets, elevated cards |
2xl |
24 | Marketing surfaces, feature panels |
full |
9999 | Pills, avatars, badges, circular buttons |
Rules
- ✅ Match radius to size: small controls get
sm, big surfaces getlg/xl. A 600px modal atrounded.smlooks broken. - ✅ Nested radii — the inner radius should be
outer - paddingto keep the corner concentric. Most of the timelgoutside +mdinside reads right. - ❌ Don't mix more than two radii in a single composition.
- ❌ Don't use
fullon anything taller than 32px unless it's intentionally circular.
Per-platform notes
- iOS: Apple's continuous corners are not directly available in CSS — accept the small perceptual difference rather than approximating.
- Tailwind v4: bind these to
--radius-{token}in@theme, e.g.--radius-md: 8px. The product family does this inglobals.css.