# 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`](./design.md), which encodes the design tokens (colors, typography, spacing, radii, components) in the [google-labs-code/design.md](https://github.com/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

1. Read [`docs/getting-started/README.md`](./docs/getting-started/README.md).
2. Skim [`design.md`](./design.md) for the token vocabulary.
3. Pick your platform under [`examples/`](./examples/).

## Status

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

## Contributing

See [`docs/contributing/README.md`](./docs/contributing/README.md).