> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Getting Started
> Set up your design system in Magic Patterns
A Design System is your team's single source of truth for styling and components. Our Design Systems feature is what makes Magic Patterns fundamentally different from other AI tools.
Once you have your design system set up, it ensures every design follows the same visual rules and uses
the same building blocks.
You can build a Design System from scratch in the dashboard, or seed it from tools you already use by [importing](/documentation/design-systems/importing/overview) from GitHub, an NPM package, Figma, or your website.
## What's Inside a Design System
| Concept | Purpose |
| ---------------------- | ---------------------------------------------------------------------------------- |
| **Components** | Browse and manage reusable UI building blocks used across your designs |
| **Typography & Icons** | Manage font groups and icon sets used across your designs |
| **Colors** | Visually manage your brand color tokens, with dark mode and token references |
| **Rules** | Default styling rules (spacing, visual style, brand voice) applied to every design |
| **Skills** | Reusable instructions the AI activates when a task matches their description |
| **Access & Settings** | Manage sharing, permissions, and other Design System configuration |
## Getting Started
From your dashboard, click **Design Systems** → **Create a design system**. You can also go directly to [magicpatterns.com/design-systems](https://www.magicpatterns.com/design-systems).
Already have a design system? Link [GitHub](/documentation/design-systems/importing/github), an [NPM package](/documentation/design-systems/importing/npm-package), [Figma](/documentation/design-systems/importing/figma), or your website to seed components, colors, and tokens. See the [importing overview](/documentation/design-systems/importing/overview).
Define your spacing, visual style, and brand guidelines. This acts as a default prompt for all designs. For those familiar with other AI tools, you can think of this as "default prompts" or "skills" that are applied to the context of all designs.
Go to **Typography** to manage font groups (custom fonts, Google Fonts, or font URLs) and **Icons** to pick an icon library or upload your own.
Open the Colors page to set up your brand palette with colors like Primary, Secondary, Accent, and more.
Create or import reusable components. The AI will use them automatically when generating designs.
You can add or refine many components at once from the same chat. For example:
*"Add a Button, Card, and Modal that all share a 12px border radius."*
## Editing your Design System
Once your Design System is set up, you keep evolving it from one place: a single chat that lives with the Design System. The chat is available on every tab (Components, Typography, Colors, etc.) and operates on the **whole** Design System.
You can edit one component, several at once, or make universal updates like changing a color token or tightening the spacing scale system-wide. Versioning and publishing also happen at the Design System level.
Learn how to chat with your Design System to add, edit, version, and publish
components.
## How to Use It
When creating a new design, select your Design System from the dropdown. The AI will automatically:
* Apply your Rules
* Use your color tokens from the Colors page
* Use your Typography font groups and icons
* Use components from your Design System when appropriate
You don't have to pick it every time. The dropdown remembers your last-used
Design System and pre-selects it on every new design. Once you create a design
with a Design System other than Base, that one becomes your default and is
applied automatically on the next new design (and the one after that).
You can also reference specific components with `@`:
```
Create a pricing page using @PricingCard and @CTAButton
```
## Controlling Access
1. Open your Design System
2. Click **Access & Settings** in the left sidebar
3. In the **Access & Permissions** section, enter one or more emails (comma-separated) and click **Invite**
By default, anyone in your workspace can access the Design System with **Can write** permissions. You can adjust each teammate's role from the **Who has access** list.
Teammates can then use the Design System, browse components, and add new ones (based on permissions).
## Learn More
Bring an existing design system in from GitHub, NPM, Figma, or your website.
Visually manage your brand color tokens with dark mode and references.
Write effective styling rules with examples and naming tips.
Create, edit, and manage components in your Design System.
Switch a design from one Design System to another.
Manage font groups and icons in your Design System.
## Video Guide
This topic is covered in our video lesson [Design Systems](/documentation/guide/design-systems).
You can build a Design System from scratch in the dashboard, or seed it from tools you already use by [importing](/documentation/design-systems/importing/overview) from GitHub, an NPM package, Figma, or your website.
## What's Inside a Design System
| Concept | Purpose |
| ---------------------- | ---------------------------------------------------------------------------------- |
| **Components** | Browse and manage reusable UI building blocks used across your designs |
| **Typography & Icons** | Manage font groups and icon sets used across your designs |
| **Colors** | Visually manage your brand color tokens, with dark mode and token references |
| **Rules** | Default styling rules (spacing, visual style, brand voice) applied to every design |
| **Skills** | Reusable instructions the AI activates when a task matches their description |
| **Access & Settings** | Manage sharing, permissions, and other Design System configuration |
## Getting Started
## Learn More