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.0 KiB

Raw Blame History

Inputs

Text inputs, textareas, selects. Single visual treatment, semantic states. Reference: kdcvault/frontend/src/components/ui/input.tsx and .kdc-input / .kdc-input-underline utilities in kdcsurveyadd/app/globals.css.

Anatomy

See anatomy.svg. Label · input shell · helper / error text. Label sits above the input; helper text below in text.muted bodyS.

Variants

Token	Use	Background	Border
`input.default`	Standard field	`surface.background`	`border.default` (1px)
`input.filled`	High-density forms	`surface.subtle`	none
`input.underline`	Marketing / minimal forms	transparent	bottom 1px `border.default`

Sizes

Size	Height	Padding
`sm`	32px	`6px 10px`
`md` (default)	40px	`8px 12px`
`lg`	48px	`12px 16px`

States

Hover — border border.default → border.strong, 120ms transition.
Focus-visible — apply elevation.focusRing, border brand.primary.
Disabled — opacity: 0.5, cursor: not-allowed, background surface.subtle.
Error — border semantic.danger, helper text semantic.danger, focus ring rgba(176,56,47,0.18).
Read-only — background surface.subtle, remove border, keep text colour.

Tokens used

components.input.*, elevation.focusRing, colors.border.*, colors.semantic.danger.

Accessibility

Every input has a programmatically associated <label> (visible or sr-only only when an adjacent icon supplies meaning).
Error messages reference the input via aria-describedby and use role="alert" on first appearance.
Placeholder text is decorative — never the only label.
Maintain 4.5:1 contrast on placeholder text (currently text.muted #6B647A).

Do / Don't

✅ Show errors under the input, not as a tooltip.
✅ Use tabular-nums for numeric-only inputs (.tnum utility).
❌ Don't use placeholder text as a label.
❌ Don't shrink the height below 32px — it breaks touch targets.

2.0 KiB Raw Blame History