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 is currently in Beta. You can find it in your Design System’s sidebar.
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.

​
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

​
What’s Next?

Rules

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

Using Custom Fonts

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