> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design systems, explained

> A design system captures your tokens, colors, typography, and components so every design you generate stays on brand.

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](/design/design-md).

## 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](/design/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](/design/apply-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.