Paul Roberts
af2af23d14
- 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>
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/. Replace the placeholders there with the official source artwork before use.