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>
55 lines
2.9 KiB
Markdown
55 lines
2.9 KiB
Markdown
# 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 `bodyM` with `line-height: 1.5` for 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.
|