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

2.1 KiB

Raw Permalink Blame History

Tables

Dense data display. Default to flat (no zebra striping) with hairline row borders. Reference: kdctracker/admin.html (.card data tables), kdcdocs/public/styles.css (.kdc-table-head, .kdc-row).

Anatomy

See anatomy.svg. Header row · grouped header rows (optional) · data rows · footer summary (optional).

Sizing

Density	Row height	Cell padding
`compact`	36px	`6px 12px`
`default`	44px	`10px 16px`
`comfortable`	56px	`14px 20px`

Drive density with [data-density="compact|default|comfortable"] (per the kdcmapper convention).

Styling

Header: text.muted caption uppercase, 600 weight, surface.subtle background.
Cell text: bodyM, text.default. Numerics use tabular-nums (.tnum utility).
Row separator: 1px border.subtle bottom border. No vertical lines.
Hover row: surface.subtle, 120ms transition.
Selected row: 2px brand.primary left border, brand.primarySoft background.
Sticky header sits below any toolbar; sticky first column gets a 4px elevation.2 shadow on right edge when scrolled.

Cell types

Status pill → badge.* variants.
Identifier / code → typography.mono with subtle background surface.subtle.
Numeric → right-aligned, tabular-nums.
Action cell → trailing cell, ghost icon buttons; right-aligned, never wrap.

Tokens used

colors.surface.*, colors.border.*, typography.bodyM/caption/mono, components.badge.*.

Accessibility

Use proper <thead> / <tbody> / <th scope="col"> / <th scope="row">.
Sortable columns: button inside <th> with aria-sort="ascending|descending|none".
Empty state: role="status", single line in text.muted.
Long tables: pagination or aria-rowcount for virtualised lists.

Do / Don't

✅ Use compact density for ≥ 50 rows on screen at once.
✅ Right-align numerics and currencies; left-align text and identifiers.
❌ Don't zebra-stripe — it competes with hover and selection.
❌ Don't wrap action buttons; truncate text instead.

2.1 KiB Raw Permalink Blame History