feat: design system v1.0.0 — reconcile tokens from cross-repo audit
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>
This commit is contained in:
@@ -1,8 +1,28 @@
|
||||
# Foundations · Radius
|
||||
|
||||
Reference documentation for the **radius** foundation. The canonical token values
|
||||
live in [`../../design.md`](../../design.md) and the machine-readable export
|
||||
in [`../../tokens/`](../../tokens/).
|
||||
Corner radius scales with component density. Pick from the curated set — never hand-roll a value.
|
||||
|
||||
This page is for human-facing rationale: when to use which token, examples,
|
||||
and platform notes.
|
||||
## 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 get `lg`/`xl`. A 600px modal at `rounded.sm` looks broken.
|
||||
- ✅ Nested radii — the inner radius should be `outer - padding` to keep the corner concentric. Most of the time `lg` outside + `md` inside reads right.
|
||||
- ❌ Don't mix more than two radii in a single composition.
|
||||
- ❌ Don't use `full` on 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 in `globals.css`.
|
||||
|
||||
Reference in New Issue
Block a user