KDC Design System

The official design system for KDC — tokens, components, brand assets, and guidelines for building consistent KDC 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.

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, icons, illustrations, images, patterns
├── 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.
2. Skim design.md for the token vocabulary.
3. Pick your platform under examples/.

Status

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

Contributing

See docs/contributing/README.md.