Design Systems

Design systems make components consistent across your product. A design system bundles color, typography, spacing, and shape tokens with a DESIGN.md spec describing the visual language.

Using a design system

• Pick a design system when creating a component — the AI generates directly in that visual language
• Or apply one to an existing component from the workspace toolbar: Quick apply regenerates design-tokens.css from the system's tokens, AI re-theme rewrites styling more deeply to match

Because every component keeps its styling in design-tokens.css, re-theming is non-destructive — layout and behavior stay untouched.

Creating your own

Manage design systems in Dashboard → Design Systems: create one from scratch, or import an existing style definition (creating your own requires Atheros AI Pass or Ultra). Public design systems can be browsed by everyone; yours stay private until you publish them.

Updating with AI

The design.md editor has an Update with AI field: describe one change — "make the palette warmer", "add a dark theme" — and the AI applies exactly that change, leaving everything you did not mention as written. Changes to the document are parsed back into the Overview tab automatically.