Skip to main content

​
Contents of a design system

A generated design system includes:
  • Tokens — named values (colors, spacing, radii) the rest of the system references
  • Colors — the palette with roles (primary, surface, accent…)
  • Typography — families, sizes, weights
  • Example components — 2–3 built components showing the system in use
  • Logos and brand assets — included when you provide them clearly
The APEX X1 Design System rendered as a living style guide in focus mode, with a sidebar of colors, fonts, layout, and components, the core palette, the type scale, and example components

​
How it’s stored

A generated system lives in your project as a living style guide: tokens in tokens.json feed the CSS variables (e.g. src/index.css) that your components consume. DESIGN.md is the document representation — readable by you, usable by Agent.

​
Using DESIGN.md as a source

An existing DESIGN.md can seed a new design system: point at it when creating one, alongside other sources like a Figma URL, a website, code, or reference images.