Skip to main content

Documentation Index

Fetch the complete documentation index at: https://magicpatterns.mintlify.dev/docs/llms.txt

Use this file to discover all available pages before exploring further.

This guide covers self-serve Design System setup: Rules, Typography, Colors, and components you manage in the Magic Patterns dashboard (not syncing a real component package from your codebase). 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
ComponentsBrowse and manage reusable UI building blocks used across your designs
TypographyManage font groups: upload custom fonts, Google Fonts, or font URLs
ColorsVisually manage your brand color tokens, with dark mode and token references
RulesDefault styling rules (spacing, visual style, brand voice) applied to every design
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

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 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
  • 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 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

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.

​
Video Guide

This topic is covered in our video lesson Design Systems.