Paul Roberts
6593bdf689
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>
Foundations · Typography
KDS uses two brand typefaces.
| Family | Use | Weights |
|---|---|---|
| Opificio | Wordmark and display moments only. | Bold (700) — canonical. Rounded and Regular cuts available for editorial. |
| Manrope (variable) | All UI typography — headings, body, labels, captions. | 200 ExtraLight, 300 Light, 400 Regular, 500 Medium, 600 SemiBold, 700 Bold, 800 ExtraBold |
| Roboto Mono (non-brand) | Code, tabular figures, identifiers. | 400, 500 |
Manrope is loaded as a variable font via @fontsource-variable/manrope (product apps) or next/font/google (Next.js apps). Use the Variable build wherever possible — it lets us interpolate weight without shipping multiple files.
Wordmark lockup
kode in Opificio Bold (72pt) above design consultants in Manrope ExtraLight (20pt, +4% letter-spacing).
Type scale (UI)
| Token | Family | Size | Weight | Line height | Use |
|---|---|---|---|---|---|
display |
Opificio | 72px | 700 | 80px | Hero / wordmark only |
wordmarkSecondary |
Manrope | 20px | 200 | 28px | Wordmark second line |
headingXL |
Manrope | 32px | 700 | 40px | Page hero |
headingL |
Manrope | 24px | 600 | 32px | Section heading |
headingM |
Manrope | 20px | 600 | 28px | Subsection / card title |
headingS |
Manrope | 16px | 600 | 24px | Group label |
bodyL |
Manrope | 18px | 400 | 28px | Lead paragraph |
bodyM (default) |
Manrope | 16px | 400 | 24px | Body copy |
bodyS |
Manrope | 14px | 400 | 20px | Secondary / helper |
caption |
Manrope | 12px | 500 | 16px | Labels, badges, meta |
mono |
Roboto Mono | 14px | 400 | 20px | Code, identifiers |
OpenType features
Product apps enable font-feature-settings: "ss01", "cv11" on Manrope. These swap the default a and adjust the 1 / l for clearer numeric reading on the warm canvas. Keep them on by default — they are part of the brand voice.
For numerics use font-variant-numeric: tabular-nums (utility class .tnum) so columns don't jitter.
Display weight
.font-display class is Manrope 800 with letter-spacing: -0.02em. Use for hero headlines where Opificio would be too much.
Web font delivery
- Self-host Manrope from
/assets/fonts/manrope/and preload 400 + 600 in the document head. - Opificio is licensed; self-host from
/assets/fonts/opificio/. Don't expose source files publicly. - Fallback stack:
'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif.
Do / Don't
- ✅ Default body to
bodyMwithline-height: 1.5for readability. - ✅ Use Opificio for the wordmark and nowhere else.
- ❌ Don't mix Manrope with Geist / Inter / Outfit. The legacy apps that do so are drift to be migrated.
- ❌ Don't justify text. Don't underline anything that isn't a link.