Skip to main content
Our Design Systems feature makes Magic Patterns fundamentally different from other AI vibe coding tools. A Design System is your team’s single source of truth for styling and components. It ensures every design follows the same visual rules and uses the same building blocks.

​
What’s Inside a Design System

ConceptPurpose
RulesDefault styling rules (spacing, visual style, brand voice) applied to every design
TypographyManage font groups: upload custom fonts, Google Fonts, or font URLs
ColorsVisually manage your brand color tokens, with dark mode and token references
ComponentsBrowse and manage reusable UI building blocks used across your designs
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.
2

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 is applied to the context of all designs.
3

Set up Typography

Go to Typography to manage your font groups. Upload custom fonts, choose from Google Fonts, or paste font URLs to keep typography consistent across your designs.
Typography in Design Systems
4

Define your Colors

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

Add Components

Create or import reusable components. The AI will use them automatically when generating designs.
You can add many components at once by clicking “Add Component” and letting each one run in parallel, so you don’t have to wait for one to finish before starting the next component.

​
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
  • Use components from your Design System when appropriate
You can also reference specific components with @: 
Create a pricing page using @PricingCard and @CTAButton

​
Controlling Access

  1. Open your Design System
  2. Click Share → Invite Workspace
Teammates can then use the Design System, browse components, and add new ones (based on permissions).

​
Learn More

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.

Import from Figma

Bring your existing Figma designs and components into Magic Patterns.

Typography

Manage font groups: upload custom fonts, Google Fonts, or font URLs.