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>
Kode Design Consultants — Design System
The official design system for Kode Design Consultants Ltd (KDC) — tokens, components, brand assets, and guidelines for building consistent product and brand experiences.
The single source of truth lives in
design.md, which encodes the design tokens (colors, typography, spacing, radii, components) in the google-labs-code/design.md format.
Brand at a glance
| Wordmark | kode set in Opificio Bold (72pt / 52pt) |
| Secondary line | design consultants in Manrope ExtraLight (20pt / 76pt) |
| Brand color | Kode purple #6B35A7 |
| Supporting | Black #000000, White #FFFFFF, Off-white #F5F4F0 |
| UI typeface | Manrope (200–800) |
Repository structure
KDCDesignSystem/
├── design.md # Canonical token + guidelines spec
├── brand/ # Logos, wordmarks, brand guidelines
├── tokens/ # Generated/exported design tokens
├── foundations/ # Color, type, spacing, motion, grid, breakpoints
├── assets/ # Fonts (Manrope + Opificio), icons, illustrations
├── components/ # Per-component specs and anatomy
├── themes/ # Light, dark, high-contrast theme overrides
├── templates/ # Web, mobile, email, print, presentation
├── docs/ # Getting started, principles, a11y, voice & tone
├── examples/ # Reference implementations
└── scripts/ # Token build / export scripts
Quick start
- Read
docs/getting-started/README.md. - Skim
design.mdfor the token vocabulary. - Pick your platform under
examples/.
Status
Version: beta. Tokens and components are still settling — expect breaking changes.