## Overview

Most teams begin with self-serve Design Systems:
[Rules](/content/docs/documentation/design-systems/self-serve/rules/index.html),
[Typography](/content/docs/documentation/get-started/fonts/index.html),
[Colors](/content/docs/documentation/design-systems/self-serve/colors/index.html), and
[Components](/content/docs/documentation/custom-components/using-components/index.html) that you
manage in Magic Patterns. You can bring components in from
[Figma](/content/docs/documentation/importing/import-from-figma/index.html), start from a screenshot,
or extend designs you already have.

If you’re an enterprise team, you can also [sync your real design system](/content/docs/documentation/design-systems/using-your-real-design-system/overview/index.html)
with Magic Patterns.

## Self-Serve Setup

Self-serve is the default for getting consistent output quickly. You pick a Design System when you start a design, and the AI applies your components automatically.

Put your tokens, rules, and components in a design system and the AI reuses
them as you iterate.

[**Getting Started** 
\nCreate a Design System and configure Rules, Typography, Colors, and\ncomponents.](/content/docs/documentation/design-systems/self-serve/overview/index.html)

[**Colors** 
\nVisually manage your brand color tokens with dark mode and references.](/content/docs/documentation/design-systems/self-serve/colors/index.html)

[**Rules** 
\nWrite effective styling rules with examples and naming tips.](/content/docs/documentation/design-systems/self-serve/rules/index.html)

[**Using Components** 
\nCreate, edit, and manage components in your Design System.](/content/docs/documentation/custom-components/using-components/index.html)

## Sync with your Real Design System

This option is for enterprise teams that want generated UI to match a real engineering handoff: the same React components and import paths your product ships with, not only visual parity. Magic Patterns has already partnered with many companies to set this up. See [customer case studies](/content/customers/index.html) for more examples.

> “With Magic Patterns, they’ve shortened their delivery cycle to 3 from 12 weeks, eliminated 3 days of meetings from every sprint, and started generating validated, interactive mockups 5x faster” - Ben Karnaghan, designer at Lendi

Onboarding is guided; the detailed reference is in the docs linked below.

| Requirement | Description |
| --- | --- |
| Hosted component library on NPM | Your React components are available as an installable package (including private registries with access you provide). |
| Storybook | Documentation for your components (for example Storybook) so the AI knows APIs, variants, and when to use each piece. |

[Read about using your real components](/content/docs/documentation/design-systems/using-your-real-design-system/overview/index.html)[Schedule a call to discuss setup](https://cal.com/mp-daniel/30min)