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

Raw Blame History

Foundations · Colors

Canonical values live in ../../design.md and ../../tokens/colors.json. This page is the human-facing rationale.

The system in one paragraph

KDC's palette is built around Kode purple #6B35A7, a purple-tinted ink #1A1530 (never pure black), and a warm off-white canvas #F7F4ED. Together they give surfaces a craft / editorial feel rather than the cold slate look of generic SaaS. A muted gold accent #C9892B is reserved for emphasis CTAs in product surfaces; a mint accent #46C194 is reserved for marketing surfaces. Both accents are deliberately scarce — one per surface.

Layers

Brand — brand.primary and its four variants (primaryHover, primaryPressed, primaryLight, primarySoft), brand.ink, brand.canvas.
Accent — accent.gold (product emphasis) and accent.mint (marketing).
Neutral — a 13-step ink-tinted ramp (neutral.0 → neutral.1000). Aliases: 100 ≡ canvas, 900 ≡ ink.
Semantic — success #2F7A5A, warning #C9892B, danger #B0382F, info #5C2D90. Each has a *Soft tint for backgrounds.
Role tokens — always consume text.default, surface.canvas, border.default, etc. in product code. Never hardcode the palette.

Choosing a colour

Default text → text.default (brand.ink). For supporting copy, text.soft; for meta, text.muted.
Page surface → surface.canvas (brand.canvas) for product UIs, surface.background (#FFFFFF) for content cards.
Primary CTA → brand.primary + hover brand.primaryHover.
Emphasis CTA / commit → accent.gold. Only one per surface, and only when there's a meaningful one-way action.
Status pill / badge → semantic.{success|warning|danger}Soft background + matching semantic text.

Contrast (WCAG 2.2 AA minimums)

Body text on background ≥ 4.5:1.
Large text (≥ 24px, or ≥ 19px bold) and UI icons ≥ 3:1.
text.muted #6B647A on surface.background #FFFFFF → 5.4:1 ✓
brand.primary #6B35A7 on surface.background → 6.9:1 ✓
accent.gold #C9892B on surface.background → 3.0:1 — meets large-text only; pair with text labels for small UI.

Drift to be aware of

The legacy apps (kdcdiary, kdctracker, kdcdocs, kdcmapper) currently use different purples (#6B4EFF, #A37CD9, #5567E8) and fonts (Geist, Inter+Outfit). Treat anything not in this swatch sheet as drift; new work follows the canonical palette.

2.5 KiB Raw Blame History