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>
This commit is contained in:
Paul Roberts
+42
-16
@@ -1,29 +1,55 @@
|
||||
{
|
||||
"$schema": "https://design-tokens.github.io/community-group/format/",
|
||||
"$description": "Reconciled from production usage in kdcsurveyadd, kdcvault, kdc_void_planner (refined product family) and k-d-c-workspace dashboard (marketing surface). 2026-05-17.",
|
||||
"color": {
|
||||
"brand": {
|
||||
"primary": { "$value": "#6B35A7", "$type": "color", "$description": "Kode purple — primary brand color." },
|
||||
"primary-hover": { "$value": "#582A8D", "$type": "color" },
|
||||
"primary-pressed": { "$value": "#45216E", "$type": "color" },
|
||||
"ink": { "$value": "#000000", "$type": "color", "$description": "Brand black — wordmark and high-emphasis text." },
|
||||
"canvas": { "$value": "#F5F4F0", "$type": "color", "$description": "Brand off-white — default page surface." }
|
||||
"primary": { "$value": "#6B35A7", "$type": "color", "$description": "Kode purple — primary brand color. Confirmed across all on-brand surfaces." },
|
||||
"primary-hover": { "$value": "#5C2D90", "$type": "color", "$description": "Hover / pressed-light. (alias: primary-2)" },
|
||||
"primary-pressed": { "$value": "#45216E", "$type": "color", "$description": "Pressed / deep. Legacy alias for darkest variant." },
|
||||
"primary-light": { "$value": "#8456C2", "$type": "color", "$description": "Light variant for gradients and dark-mode primary. (alias: primary-3)" },
|
||||
"primary-soft": { "$value": "#F1E9F8", "$type": "color", "$description": "Tinted background for primary surfaces (chips, callouts, focus halos)." },
|
||||
"ink": { "$value": "#1A1530", "$type": "color", "$description": "Brand ink — primary text. Purple-tinted near-black, NOT pure #000. Confirmed across surveyadd / vault / void / workspace." },
|
||||
"canvas": { "$value": "#F7F4ED", "$type": "color", "$description": "Brand off-white — warm page surface for product UIs." },
|
||||
"canvas-cool": { "$value": "#F7F6FB", "$type": "color", "$description": "Cool off-white variant used on the marketing dashboard. Avoid mixing with `canvas` on the same surface." }
|
||||
},
|
||||
"accent": {
|
||||
"gold": { "$value": "#C9892B", "$type": "color", "$description": "Product accent — used for emphasis CTAs and submit buttons in surveyadd / vault / void." },
|
||||
"gold-strong": { "$value": "#A86F1F", "$type": "color" },
|
||||
"gold-soft": { "$value": "#F5E9D2", "$type": "color" },
|
||||
"mint": { "$value": "#46C194", "$type": "color", "$description": "Marketing accent — secondary brand colour used on the workspace dashboard." }
|
||||
},
|
||||
"neutral": {
|
||||
"0": { "$value": "#FFFFFF", "$type": "color" },
|
||||
"50": { "$value": "#F5F4F0", "$type": "color", "$description": "Aliased to brand.canvas." },
|
||||
"100": { "$value": "#EDEFF3", "$type": "color" },
|
||||
"200": { "$value": "#D9DCE3", "$type": "color" },
|
||||
"300": { "$value": "#B8BDC9", "$type": "color" },
|
||||
"500": { "$value": "#6B7280", "$type": "color" },
|
||||
"700": { "$value": "#374151", "$type": "color" },
|
||||
"900": { "$value": "#111827", "$type": "color" },
|
||||
"50": { "$value": "#FBF8F1", "$type": "color", "$description": "Inset / secondary surface (matches surface-2 in product family)." },
|
||||
"100": { "$value": "#F7F4ED", "$type": "color", "$description": "Aliased to brand.canvas." },
|
||||
"150": { "$value": "#ECE9F3", "$type": "color", "$description": "Cool subtle line (workspace)." },
|
||||
"200": { "$value": "#E6E0D2", "$type": "color", "$description": "Hairline border." },
|
||||
"300": { "$value": "#D4CCB8", "$type": "color", "$description": "Strong border." },
|
||||
"400": { "$value": "#A39DB0", "$type": "color", "$description": "Disabled / mute-2 text." },
|
||||
"500": { "$value": "#8C869C", "$type": "color", "$description": "Muted meta text." },
|
||||
"600": { "$value": "#6B647A", "$type": "color", "$description": "Mute text." },
|
||||
"700": { "$value": "#4A4360", "$type": "color", "$description": "Soft ink — supporting copy." },
|
||||
"800": { "$value": "#3A2D5A", "$type": "color", "$description": "Secondary ink." },
|
||||
"900": { "$value": "#1A1530", "$type": "color", "$description": "Aliased to brand.ink." },
|
||||
"1000": { "$value": "#000000", "$type": "color" }
|
||||
},
|
||||
"semantic": {
|
||||
"success": { "$value": "#16A34A", "$type": "color" },
|
||||
"warning": { "$value": "#F59E0B", "$type": "color" },
|
||||
"danger": { "$value": "#DC2626", "$type": "color" },
|
||||
"info": { "$value": "#0EA5E9", "$type": "color" }
|
||||
"success": { "$value": "#2F7A5A", "$type": "color", "$description": "Muted green tuned for the warm canvas." },
|
||||
"success-soft": { "$value": "#E2F0E8", "$type": "color" },
|
||||
"warning": { "$value": "#C9892B", "$type": "color", "$description": "Aliased to accent.gold." },
|
||||
"warning-soft": { "$value": "#F5E9D2", "$type": "color" },
|
||||
"danger": { "$value": "#B0382F", "$type": "color" },
|
||||
"danger-soft": { "$value": "#F7E4E1", "$type": "color" },
|
||||
"info": { "$value": "#5C2D90", "$type": "color", "$description": "Re-uses primary-hover for informational signals." }
|
||||
},
|
||||
"scale": {
|
||||
"brand-50": { "$value": "#F3EDFB", "$type": "color" },
|
||||
"brand-100": { "$value": "#E6DAF7", "$type": "color" },
|
||||
"brand-200": { "$value": "#F1E9F8", "$type": "color", "$description": "Aliased to brand.primary-soft." },
|
||||
"brand-500": { "$value": "#6B35A7", "$type": "color", "$description": "Aliased to brand.primary." },
|
||||
"brand-600": { "$value": "#5D2C93", "$type": "color" },
|
||||
"brand-700": { "$value": "#52287F", "$type": "color" },
|
||||
"brand-800": { "$value": "#45216E", "$type": "color" }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
{
|
||||
"$description": "Ink-tinted shadow scale (rgb 26 21 48 = brand.ink). Matches the surveyadd / vault / void product family.",
|
||||
"elevation": {
|
||||
"0": { "shadow": "none" },
|
||||
"1": { "shadow": "0 1px 2px rgba(17,24,39,0.06)" },
|
||||
"2": { "shadow": "0 4px 12px rgba(17,24,39,0.10)" },
|
||||
"3": { "shadow": "0 16px 32px rgba(17,24,39,0.16)" },
|
||||
"4": { "shadow": "0 24px 48px rgba(17,24,39,0.20)" }
|
||||
"1": { "shadow": "0 1px 2px rgba(26,21,48,0.04)" },
|
||||
"2": { "shadow": "0 4px 12px -4px rgba(26,21,48,0.08)" },
|
||||
"3": { "shadow": "0 16px 40px -16px rgba(26,21,48,0.18)" },
|
||||
"4": { "shadow": "0 24px 80px -24px rgba(26,21,48,0.22)" },
|
||||
"focus-ring": { "shadow": "0 0 0 3px rgba(107,53,167,0.18)", "$description": "Primary focus halo. Use on any focusable element." }
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user