Files

T

Lint / lint (push) Has been cancelled

Details

feat(brand): adopt official Kode brand guidelines

- 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>

2026-04-29 19:24:52 +00:00

2.0 KiB

Raw Blame History

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.md for the token vocabulary.
Pick your platform under examples/.

Status

Version: beta. Tokens and components are still settling — expect breaking changes.

Contributing

See docs/contributing/README.md.

2.0 KiB Raw Blame History Unescape Escape