Skip to main content
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 from GitHub, an NPM package, Figma, or your website.

​
What’s Inside a Design System

ConceptPurpose
ComponentsBrowse and manage reusable UI building blocks used across your designs
Typography & IconsManage font groups and icon sets used across your designs
ColorsVisually manage your brand color tokens, with dark mode and token references
RulesDefault styling rules (spacing, visual style, brand voice) applied to every design
SkillsReusable instructions the AI activates when a task matches their description
Access & SettingsManage sharing, permissions, and other Design System configuration

​
Getting Started

1

Create a Design System

From your dashboard, click Design Systems → Create a design system. You can also go directly to magicpatterns.com/design-systems.
2

Import your existing sources (optional)

Already have a design system? Link GitHub, an NPM package, Figma, or your website to seed components, colors, and tokens. See the importing overview.
3

Add your Rules

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.
4

Set up Typography and Icons

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.
Typography in Design Systems
5

Define your Colors

Open the Colors page to set up your brand palette with colors like Primary, Secondary, Accent, and more.
6

Add Components

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.

Editing components and your Design System

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

Importing your Design System

Bring an existing design system in from GitHub, NPM, Figma, or your website.

Colors

Visually manage your brand color tokens with dark mode and references.

Rules

Write effective styling rules with examples and naming tips.

Using Components

Create, edit, and manage components in your Design System.

Converting Design Systems

Switch a design from one Design System to another.

Typography and Icons

Manage font groups and icons in your Design System.

​
Video Guide

This topic is covered in our video lesson Design Systems.