Skip to main content
The Colors page lets you define your color palette inside your Design System: your primary, secondary, accent, and any other colors your brand uses. Once defined, these colors are available across the platform in generated code and in the Visual Edit color picker. This keeps your styling consistent without having to re-specify colors every time.
Colors page in a Design System
To add a color, click + Add and give it a name. Click any color swatch to open the color picker, or type a hex value directly.

​
Why set up colors?

​
Consistent AI Generation

When you generate a design or component with a Design System that has colors set up, the AI will use your palette in the generated code. This means your colors end up in every new design without having to specify them in every prompt.

​
Visual Edit

When you select an element in Visual Edit, the color picker shows a “Design System” section with your defined colors. This lets you apply colors from your palette directly to any element.
Design System colors in the Visual Edit color picker

​
Importing Colors

You can bulk-import color tokens into your Design System from a .csv file or a Figma .json variable export. This is the fastest way to bring an existing palette into Magic Patterns without manually adding each color.
Design System Color Import Flow
You can upload multiple files at once. For example, upload a light-mode and a dark-mode export and Magic Patterns will let you assign each group to the correct mode during review.

​
Importing from CSV

Your CSV file should have two columns: a token name and a color value. The first row can be a header or you can start with data directly. Accepted header names for the name column: name, key, token, variable. Accepted header names for the value column: value, color, hex, code. Color values can be hex (#FF0000), rgb (rgb(255, 0, 0)), or hsl (hsl(0, 100%, 50%)). 
token,hex
color.blue.10,#DDF3FC
color.blue.20,#BBE7F9
color.blue.30,#98DBF7
color.gray.10,#F2F2F2
color.gray.20,#EBEBEB
Dotted or hyphenated names like color.blue.10 or background-primary are automatically converted to readable labels (e.g. “Color Blue 10”, “Background Primary”) during import.

​
Importing from Figma Variables

Follow these steps to export your color variables from Figma as a JSON file that Magic Patterns can read.
1

Open the Variables Panel

In Figma, go to View > Panels > Toggle Variables to open the variables panel.
Figma Variables Panel
2

Export a Collection

Right-click on the collection you want to export and select Export modes. This will export all variables in that collection.
Figma Export Modes
3

Unzip Multi-Mode Exports

If your collection has multiple modes (e.g. Light and Dark), Figma will download a .zip file. Unzip it to find separate .json files for each mode, so that you can upload them all into the color import flow.

​
Importing into your Design System

Once you have your files ready:
1

Tap on 'Import from File'

Go to your Design System’s Colors page and click the Import from File button. You can find it in the empty state or next to the Add button in the color table.
2

Upload your files

Drag and drop your .csv or .json files, or click to browse. You can upload up to 7 files at once.
3

Review and assign modes

Magic Patterns parses your files into color groups. For each group you can toggle it on or off and assign it to Light or Dark mode.
4

Import

Click Import to add the colors to your Design System. If you already have colors defined, you will be asked to confirm before they are replaced.
Importing colors replaces all existing color tokens in your Design System. Make sure you are ready before confirming.

​
What’s Next?

Rules

Define spacing, visual rules, and brand guidelines for the AI.

Typography

Manage font groups in your Design System’s Typography section.