CocoKits Design System

Token Architecture

A complete guide to CocoKits' three-tier design token system — from raw color primitives to semantic roles to component-level tokens. Learn how Figma and code stay in sync automatically.

Start Reading → Architecture Overview
Open in Figma CocoKits Token Architecture — Interactive diagrams & variables panel ↗ Download Markdown COCOKITS_TOKEN_ARCHITECTURE.md: Full specification for offline use ↓
3
Architecture tiers
7+
Color families
6+
Color roles per family
42+
Semantic color tokens
100+
Components supported

Getting Started

💡
01
Why Design Tokens?
Understand why a single source of truth for design values is essential for scalable systems.
📖
02
Glossary
Definitions for every term used across the architecture — collections, modes, aliases, and more.
🧩
03
Problems Solved
Six concrete problems this architecture solves — from multi-brand support to dark mode.

Architecture

🏗️
04
Architecture Overview
The complete three-tier architecture diagram and the Golden Rule that governs token flow.
◆
05
Tier 1 — Primitives
Raw values: color palette, spacing scale, typography scale, and border radius.
◆
06
Tier 2 — Semantic
Brand palettes, semantic color roles, typography tokens, and spacing abstractions.
◆
07
Tier 3 — Components
Size, Structure, and the shared Color collection. The key innovation: 6 tokens, all components.

Color System

🎨
08
Color System In Depth
The 7 color families, 6 color roles, structural vs family colors, and how Type × Color stay independent.

Reference

📋
09
Collections & Modes
Complete index of every Figma variable collection with its modes and token examples.
🔗
10
Token Chain Example
Trace a single value from raw hex all the way through 4 tiers to a rendered button background.
🔲
11
Component Examples
Detailed breakdowns of Button, Toggle, Checkbox, and Tab — how each uses the token system.

Guides

🖌️
12
For Designers
Figma workflow: setting up components, binding variables, mode switching, and variant properties.
💻
13
For Developers
CSS custom property architecture, class naming conventions, token generator output, and extending the system.
❓
14
FAQ
Answers to the most common questions about the token system design decisions.