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>
38 lines
1.8 KiB
Markdown
38 lines
1.8 KiB
Markdown
# Cards
|
||
|
||
A surface for grouping related content. Two canonical variants: `default` (flat, hairline border) and `elevated` (lifted shadow).
|
||
|
||
## Anatomy
|
||
|
||
See `anatomy.svg`. Standard parts: `CardHeader` · `CardTitle` · `CardDescription` · `CardAction` (top-right slot) · `CardContent` · `CardFooter`. Reference: `kdcvault/frontend/src/components/ui/card.tsx`.
|
||
|
||
## Variants
|
||
|
||
| Token | Background | Border | Shadow | Radius | Padding |
|
||
|-------|------------|--------|--------|--------|---------|
|
||
| `card.default` | `surface.background` | `border.default` (1px) | `elevation.1` | `rounded.lg` (12px) | 24px |
|
||
| `card.elevated` | `surface.background` | none | `elevation.3` | `rounded.xl` (16px) | 28px |
|
||
| `card.muted` | `surface.subtle` | `border.subtle` | none | `rounded.lg` | 24px |
|
||
| `card.outlined` | `surface.background` | `border.strong` (1px) | none | `rounded.lg` | 24px |
|
||
|
||
## States
|
||
|
||
- **Hover (interactive cards only)** — bump shadow one level (`1` → `2`) and shift `translateY(-2px)` over `motion.duration.fast`.
|
||
- **Focus-visible** — apply `elevation.focusRing` on the card root.
|
||
- **Selected** — 2px `brand.primary` left border or full `border.strong` ring.
|
||
|
||
## Tokens used
|
||
|
||
`components.card.*`, `elevation.1`–`3`, `colors.surface.*`, `colors.border.*`.
|
||
|
||
## Accessibility
|
||
|
||
- If the card is clickable, the entire card is the hit target; expose it as a `<button>` or `<a>` (not a `<div onClick>`).
|
||
- Don't rely on hover state alone to indicate interactivity — pair with cursor + raised elevation.
|
||
|
||
## Do / Don't
|
||
|
||
- ✅ Use `card.default` for list rows and grid tiles. Reserve `card.elevated` for modals, popovers, and feature highlights.
|
||
- ❌ Don't nest cards more than one level deep — collapse to sections instead.
|
||
- ❌ Don't mix `card.default` and `card.elevated` in the same grid.
|