Design & Styling
Themes

Themes

Create and apply custom themes to ensure consistent styling across all your designs.

Creator Feature

Using predefined themes is available to everyone. Creating and using custom themes is available on Creator plans and up.

MagicPath themes interface
Create and manage custom themes for your designs

What are Themes?

Themes are pre-configured style sets that ensure visual consistency across all your components and designs. Each theme includes color palettes, typography settings, visual effects, and design rules that guide the AI when creating or editing your designs.

Creating a Theme:

  1. Click the Themes button in the canvas toolbar
  2. Select "Create new theme" to start from scratch
  3. Define manually or import a Tailwind-compatible CSS using the import button
  4. Save your theme for reuse across any project

What's included in a Theme:

  • •Color palette: Primary, secondary, accent colors and their variants
  • •Typography: Font families, sizes, weights, and line heights
  • •Effects: Shadows, borders, border radius, and other visual effects
  • •Design rules: Spacing, layout preferences, and style guidelines

Using Themes:

Once saved, each theme can be accessed from any chat conversation when creating or editing a component or design. Simply select your theme from the dropdown, and the AI will apply your custom styling automatically.

Selecting and applying a theme in the chat interface
Select your theme from the dropdown to apply it to any design

Pro tip:

Create different themes for different projects or clients. For example, create a "Brand A" theme and "Brand B" theme to quickly switch between different brand guidelines when working on various projects.

Once something is created using a theme, you can simply swap into edit mode to quickly preview style changes by switching between different themes.

Swapping themes in edit mode
Quickly preview different themes by swapping in edit mode

Using Custom Fonts in Themes

You can now use your own custom fonts when creating themes. Upload your brand fonts and use them in the Typography section to ensure your designs always match your brand guidelines.

Add custom fonts in theme typography settings
Add your custom fonts in the Typography section when creating a theme

Link to Theme

You can now generate Themes/Design Systems directly from your Figma import or any link.

Simply paste the link and MagicPath will extract color palette, typography, and effects so you can use them to generate or edit your designs.

Link to Theme

Generate themes from any website, Figma import, or existing design

Works with:

  • •Any website URL - paste a link and extract its design system
  • •Figma imports on your canvas - generate a theme from imported frames
  • •Any existing design - use designs on your canvas as style references
Next Custom Fonts