Getting Started

AI-First Design System

A design system built for interfaces where AI generates, streams, and renders content in real time. Every token is chosen for chat UIs, artifact cards, streaming text, and prompt-driven workflows.

This is not a general-purpose UI kit. It is a focused set of design decisions for building AI products — where readability under streaming, semantic color roles, and dark-mode fidelity matter more than visual novelty.

How to read this

Prompt Guides

Every token in this system includes a Prompt Guide — structured guidance on when to use it, when not to, and how it behaves in AI interface contexts. Think of it as the instruction you would give to an AI building a UI with these tokens: specific, opinionated, and grounded in the design rationale.

Explore

Colors8

Semantic color palette with light and dark mode tokens.

Typography9

Type scale, weights, and font family specifications.

Spacing9

Spacing scale and layout rhythm guidelines.

Components18

Interactive UI components with live previews and code.

Guidelines5

Design principles, writing guidelines, and tone of voice.

Accessibility

Color contrast, focus states, ARIA patterns, and motion.

Principles

Semantic over literal

Tokens describe intent, not appearance. 'surface' not 'gray-100'. This lets the system adapt across themes without rewriting components.

Readable at speed

AI-generated text streams fast. Every typographic choice optimizes for scanning and sustained reading — not decoration.

Dark-mode native

Not an afterthought. Every token has a dark mode value designed with equal care. AI tools are often used in low-light environments.

Minimal contrast hierarchy

Five text colors from foreground to tertiary. Just enough to create hierarchy, few enough to stay consistent across every component.