Foundations

Themes.

One system, many faces. Every theme is built on the same foundation underneath, so your product feels intentional from day one and stays coherent as it grows.

How themes work

Each theme is defined through design tokens that control color, typography, spacing, radius, elevation, density, border treatment, surface behavior, motion, and component states.

Because themes are token-driven, both people and agents can read them. The components, states, patterns, and templates stay the same; only the visual expression changes. A theme changes the product's posture without breaking the system underneath.

Using themes with AI agents

Every theme is a starting point, not a fixed skin. Each one is a complete, considered look you can plug in as-is when you start from scratch, or use as a base and reshape to match your own brand.

Each theme is a different starting point:

• Ink: sharp, dense, precise.
• Lapis: dense, with rounded surfaces and subtle depth.
• Amber: more spacious layouts with a softer rhythm.

Pick the one closest to where you want to land, then make it yours: remap the palette to your brand colors, retune the type and spacing, and the whole system moves with it. Themes are tokens, not screenshots, so a change in one place flows everywhere.

However you start and however you shape it, your agent reads the result as part of the build context, so AI-generated screens stay on-system instead of drifting into generic UI.