Files

T

Paul Roberts 6593bdf689 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>

2026-05-17 17:51:39 +00:00

1.5 KiB

Raw Blame History

Badges

Small inline labels for status, counts, and metadata. Pill-shaped by default. Reference: kdcvault/frontend/src/components/ui/badge.tsx.

Anatomy

See anatomy.svg. Optional leading dot or icon · label · rounded.full shape · 22px default height.

Variants

Token	Use	Background	Text
`badge.default`	Neutral tag	`brand.primarySoft`	`brand.primaryHover`
`badge.success`	Positive status	`semantic.successSoft`	`semantic.success`
`badge.warning`	Caution / attention	`semantic.warningSoft`	`semantic.warning`
`badge.danger`	Failure / blocked	`semantic.dangerSoft`	`semantic.danger`
`badge.outline`	Inline tag w/o fill	transparent	`text.muted` + `border.default`
`badge.solid`	High-emphasis count	`brand.primary`	`text.inverse`

Sizes

Size	Height	Padding	Typography
`sm`	18px	`0 6px`	`caption`
`md` (default)	22px	`2px 10px`	`caption`
`lg`	26px	`4px 12px`	`bodyS`

Tokens used

components.badge.*, colors.semantic.*Soft.

Accessibility

Decorative badges don't need ARIA, but status badges should set role="status" and include a text label (not colour alone).
Counts greater than 99 should render as 99+.

Do / Don't

✅ Pair colour with text or an icon to convey status.
❌ Don't stack more than two badges in a row — fold them into a single chip group instead.
❌ Don't use badge.solid for ambient counts; reserve it for active selections.

1.5 KiB Raw Blame History