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>
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.solidfor ambient counts; reserve it for active selections.