Paul Roberts
af2af23d14
Lint / lint (push) Has been cancelled
- Brand palette: purple #6B35A7 (primary), #000000 (ink), #FFFFFF, #F5F4F0 (canvas) - Typography: Manrope (UI, 200-800) + Opificio Bold (wordmark/display); drop Inter - design.md: add wordmarkSecondary token, new display scale (Opificio 72/80) - foundations: refresh swatches and typography README to match guidelines - assets/fonts: replace Inter folder with Manrope; add Opificio cuts (Bold/Rounded/Regular) - fonts.css: register Manrope variable + Opificio cuts; keep Roboto Mono for code only - examples/web: render the kode wordmark lockup on the off-white canvas - brand-guidelines: real specs (lockup, palette, typography, logo variant rules) - README: add brand-at-a-glance, bump version to beta Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
41 lines
1.6 KiB
Markdown
41 lines
1.6 KiB
Markdown
# Brand Guidelines
|
|
|
|
## Wordmark
|
|
|
|
**Primary lockup** — `kode` set in **Opificio Bold**, 72pt size with 52pt spacing.
|
|
|
|
**Secondary lockup** — `kode` (Opificio Bold, 72pt / 52pt) above `design consultants` (Manrope ExtraLight, 20pt / 76pt spacing).
|
|
|
|
Use the secondary lockup wherever clarity about the legal name is required (legal documents, contracts, invoices, footers, first-mention contexts). Use the primary single-line `kode` wherever the brand is already established (favicons, app bar, signed emails, swag).
|
|
|
|
## Color palette
|
|
|
|
| Color | Hex | Use |
|
|
|-------|-----|-----|
|
|
| Kode purple | `#6B35A7` | Primary brand color, links, primary actions. |
|
|
| Black | `#000000` | Wordmark, high-emphasis text. |
|
|
| White | `#FFFFFF` | Cards, modals, contrast surface. |
|
|
| Off-white | `#F5F4F0` | Default page background. |
|
|
|
|
## Typography
|
|
|
|
| Use | Family |
|
|
|-----|--------|
|
|
| Wordmark / display | **Opificio Bold** (Rounded and Regular cuts available for editorial moments) |
|
|
| All UI (headings, body, labels) | **Manrope** — weights 200, 300, 400, 500, 600, 700, 800 |
|
|
| Code / tabular figures | Roboto Mono (system fallback) |
|
|
|
|
## Logo variants
|
|
|
|
The brand mark must always appear in one of:
|
|
|
|
- Solid Kode purple (`#6B35A7`) on white or off-white
|
|
- Solid black on white or off-white
|
|
- Outlined (white interior) on a Kode purple or photographic background
|
|
|
|
Never re-color, re-stretch, drop-shadow, or place the wordmark on busy or low-contrast imagery.
|
|
|
|
## Reference
|
|
|
|
The canonical asset board (kode wordmark, color blocks, typography ramps) lives in [`../logos-source/`](../logos-source/). Replace the placeholders there with the official source artwork before use.
|