Overview
Design system reference
This site is the compact reference for the shared UI system. It explains what is approved, how it is structured in code, and how ideas move from the lab into production-safe building blocks.
Purpose
The system exists to keep design work legible for engineers. Tokens, primitives, and page patterns are documented here in the same place they become approved. If a piece is missing from this site, it should not be treated as stable production UI yet.
Workflow
| Stage | What happens | Output |
|---|---|---|
| Explore | Variants, motion studies, and layout experiments are tried in the lab. | Candidate directions |
| Extract | The stable part of the idea moves into shared packages. | Reusable token or primitive |
| Document | Usage rules, examples, and constraints are written here. | Approved reference |
| Ship | Only documented shared pieces move into the main website. | Production-safe UI |
Consuming the system
Engineers should read this site as a contract between design intent and implementation. Tokens live in packages/tokens. Shared primitives live in packages/ui. The docs pages explain when to use a pattern, not only what it looks like.
- Use shared tokens instead of hardcoded values.
- Use shared primitives before inventing local one-off UI.
- Promote good lab experiments before copying them into product code.
- Keep new interactions quiet unless the docs explicitly call for more emphasis.
Release shape
The current release is intentionally narrow. Foundations document the visual grammar. Components document the approved pieces. Patterns show how those pieces combine into real document pages, index views, and article-like layouts.
| Page | Focus | When to read it |
|---|---|---|
| Foundations | Color, type, spacing, motion, and text behavior | Before changing the visual grammar |
| Components | Approved building blocks and interaction rules | Before building a new reusable primitive |
| Patterns | Page-level composition guidance | Before assembling full screens or templates |
Need to inspect rough ideas first? Open the lab workspace and only promote what survives real comparison.