Skip to main content
A design system is your brand, made machine-usable. It captures the decisions that make your product look like your product — color tokens, typography, spacing, and example components — so Design can generate on-brand results instead of generically pretty ones.

​
What a design system contains

A generated design system includes:
  • Tokens — the named values (colors, spacing, radii) everything else references
  • Colors — your palette, with roles (primary, surface, accent…)
  • Typography — families, sizes, and weights
  • Example components — a few built components (buttons, cards…) showing the system in use
  • Logos and brand assets, when you provide them
The system can also be expressed as a DESIGN.md file in your project — see the reference.

​
Where design systems come from

Two ways to create one:
  1. From scratch — prompt for one from the Replit home page, and answer a short questionnaire about your brand.
  2. From an existing design — extract a system from a mockup you already like (three-dot menu on the frame → extract).
You can also seed one from a source: a Figma URL, a website, code, reference images, or an existing DESIGN.md. Details in Create a design system.

​
When a design system pays off

  • You design more than once. The second design is where inconsistency starts; a system keeps generation N looking like generation 1.
  • A team designs together. Save the system to your workspace and everyone generates from the same brand.
  • You apply it to existing work. An existing artifact can be rebuilt under the system — see Apply a design system, including what the time/credits warning means.

​
Where they live

Design systems are saved to your workspace, selectable when you create a new artifact, and switchable per project.