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
@@ -1,8 +1,35 @@
|
||||
# Foundations · Colors
|
||||
|
||||
Reference documentation for the **colors** foundation. The canonical token values
|
||||
live in [`../../design.md`](../../design.md) and the machine-readable export
|
||||
in [`../../tokens/`](../../tokens/).
|
||||
Canonical values live in [`../../design.md`](../../design.md) and [`../../tokens/colors.json`](../../tokens/colors.json). This page is the human-facing rationale.
|
||||
|
||||
This page is for human-facing rationale: when to use which token, examples,
|
||||
and platform notes.
|
||||
## 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
|
||||
|
||||
1. **Brand** — `brand.primary` and its four variants (`primaryHover`, `primaryPressed`, `primaryLight`, `primarySoft`), `brand.ink`, `brand.canvas`.
|
||||
2. **Accent** — `accent.gold` (product emphasis) and `accent.mint` (marketing).
|
||||
3. **Neutral** — a 13-step ink-tinted ramp (`neutral.0` → `neutral.1000`). Aliases: `100` ≡ `canvas`, `900` ≡ `ink`.
|
||||
4. **Semantic** — `success` `#2F7A5A`, `warning` `#C9892B`, `danger` `#B0382F`, `info` `#5C2D90`. Each has a `*Soft` tint for backgrounds.
|
||||
5. **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.
|
||||
|
||||
@@ -4,24 +4,60 @@
|
||||
|
||||
| Token | Hex | Use |
|
||||
|-------|-----|-----|
|
||||
| `brand.primary` | `#6B35A7` | Kode purple — primary brand color, links, primary actions. |
|
||||
| `brand.ink` | `#000000` | Wordmark, high-emphasis text. |
|
||||
| `neutral.0` | `#FFFFFF` | Pure white — cards, modals, top-bar. |
|
||||
| `brand.canvas` | `#F5F4F0` | Brand off-white — default page background. |
|
||||
| `brand.primary` | `#6B35A7` | Kode purple — primary brand colour, links, primary actions. |
|
||||
| `brand.primaryHover` | `#5C2D90` | Hover state on `brand.primary` surfaces. |
|
||||
| `brand.primaryPressed`| `#45216E` | Pressed / deepest variant. |
|
||||
| `brand.primaryLight` | `#8456C2` | Gradient end, dark-mode primary. |
|
||||
| `brand.primarySoft` | `#F1E9F8` | Tinted surface for chips, callouts, focus halos. |
|
||||
| `brand.ink` | `#1A1530` | Brand ink — high-emphasis text. **Not** pure black. |
|
||||
| `brand.canvas` | `#F7F4ED` | Warm off-white — default page surface. |
|
||||
| `brand.canvasCool` | `#F7F6FB` | Cool off-white — marketing dashboard only. |
|
||||
| `neutral.0` | `#FFFFFF` | Pure white — cards, modals, top-bar. |
|
||||
|
||||
## Primary state ramp
|
||||
## Accent
|
||||
|
||||
| Token | Hex |
|
||||
|-------|-----|
|
||||
| `brand.primary` | `#6B35A7` |
|
||||
| `brand.primaryHover` | `#582A8D` |
|
||||
| `brand.primaryPressed` | `#45216E` |
|
||||
| Token | Hex | Use |
|
||||
|-------|-----|-----|
|
||||
| `accent.gold` | `#C9892B` | Product emphasis CTA (one per surface). |
|
||||
| `accent.goldStrong` | `#A86F1F` | Pressed / dark text on gold-soft. |
|
||||
| `accent.goldSoft` | `#F5E9D2` | Background for accent chips and warning pills. |
|
||||
| `accent.mint` | `#46C194` | Marketing accent — workspace dashboard only. |
|
||||
|
||||
## Neutral ramp (purple-tinted)
|
||||
|
||||
| Token | Hex | Role |
|
||||
|-------|-----|------|
|
||||
| `neutral.0` | `#FFFFFF` | Pure surface |
|
||||
| `neutral.50` | `#FBF8F1` | Inset / secondary surface |
|
||||
| `neutral.100` | `#F7F4ED` | = `brand.canvas` |
|
||||
| `neutral.150` | `#ECE9F3` | Cool subtle line |
|
||||
| `neutral.200` | `#E6E0D2` | Hairline border |
|
||||
| `neutral.300` | `#D4CCB8` | Strong border |
|
||||
| `neutral.400` | `#A39DB0` | Disabled / placeholder |
|
||||
| `neutral.500` | `#8C869C` | Muted meta text |
|
||||
| `neutral.600` | `#6B647A` | Mute text |
|
||||
| `neutral.700` | `#4A4360` | Soft ink |
|
||||
| `neutral.800` | `#3A2D5A` | Secondary ink |
|
||||
| `neutral.900` | `#1A1530` | = `brand.ink` |
|
||||
| `neutral.1000` | `#000000` | Pure black (sparingly) |
|
||||
|
||||
## Semantic
|
||||
|
||||
| Token | Hex | Soft tint |
|
||||
|-------|-----|-----------|
|
||||
| `semantic.success` | `#2F7A5A` | `#E2F0E8` |
|
||||
| `semantic.warning` | `#C9892B` | `#F5E9D2` |
|
||||
| `semantic.danger` | `#B0382F` | `#F7E4E1` |
|
||||
| `semantic.info` | `#5C2D90` | `#F1E9F8` |
|
||||
|
||||
## Brand-scale (Tailwind compatibility)
|
||||
|
||||
| Token | Hex |
|
||||
|-------|-----|
|
||||
| `semantic.success` | `#16A34A` |
|
||||
| `semantic.warning` | `#F59E0B` |
|
||||
| `semantic.danger` | `#DC2626` |
|
||||
| `semantic.info` | `#0EA5E9` |
|
||||
| `scale.brand-50` | `#F3EDFB` |
|
||||
| `scale.brand-100` | `#E6DAF7` |
|
||||
| `scale.brand-200` | `#F1E9F8` |
|
||||
| `scale.brand-500` | `#6B35A7` (= `brand.primary`) |
|
||||
| `scale.brand-600` | `#5D2C93` |
|
||||
| `scale.brand-700` | `#52287F` |
|
||||
| `scale.brand-800` | `#45216E` |
|
||||
|
||||
Reference in New Issue
Block a user