Themes, Fonts, and Libraries: Building Design Systems the AI Actually Follows
MagicPath Team
Team
The biggest frustration with AI-generated designs? They look different every time. Without constraints, each generation starts from zero — inventing new colors, new spacing, new font combinations. Themes in MagicPath solve this completely. Once you define your visual language, the AI follows it for every generation.
What a theme includes
A MagicPath theme is a structured set of design tokens that the AI uses as constraints:
Color Palette
Primary, secondary, accent colors and their variants. Supports both light and dark mode with separate palettes. The AI picks from your palette — no more random off-brand colors.
Typography
Font families, sizes, weights, and line heights. You can use Google Fonts or upload your own custom fonts (WOFF2). The AI will use your specified typography for every text element.
Effects
Shadows, borders, border radius, and other visual effects. Define whether your brand uses sharp corners or fully rounded, subtle shadows or dramatic ones.
Design Rules
Spacing preferences, layout patterns, and style guidelines that shape the overall feel — from tight technical interfaces to spacious editorial layouts.
Three ways to create a theme
You don't have to define every token manually. MagicPath gives you three paths:
From scratch
Click the Themes button in the canvas toolbar, select "Create new theme," and manually define your colors, fonts, and effects. You can also import a Tailwind-compatible CSS file to bootstrap the theme from existing design tokens.
From any URL
Paste any website URL and MagicPath extracts its color palette, typography, and spacing automatically. This is the fastest way to match the style of an existing product, competitor, or inspiration site.
From a Figma import
After importing a Figma frame, you can generate a theme directly from it. MagicPath extracts the design tokens from the import — your Figma design becomes the source of truth for all future generations.
Link to Theme
Using themes in practice
Once saved, a theme is available from any chat conversation. Select it from the themes dropdown, and every AI generation or edit will respect your visual constraints.
The real power shows when you create something with a theme applied, then swap to a different theme in edit mode. All the colors, typography, and effects update instantly — letting you preview how the same design looks across different brand identities.
Custom fonts in themes
Fonts are what make a brand feel unmistakably yours. MagicPath supports custom font uploads — bring your own WOFF2 files, register them in Settings → Assets, and then use them in any theme's Typography section.
Custom Fonts in MagicPath
Themes + Libraries = full design system
Themes handle the visual tokens. Libraries handle the component patterns. Together, they form a complete design system that the AI uses to generate consistent, on-brand designs.
Create a library of reusable components (buttons, cards, navigation, etc.), apply a theme to them, and every new design the AI generates will use your components with your visual style. No more slop.
Pro tip: Create different themes for different clients or projects. A "Brand A" theme and "Brand B" theme let you switch visual identities instantly while keeping the same component library.
Without a theme, every generation starts from zero. With one, the AI already knows your visual language — so iterations are faster, more consistent, and closer to what you actually want.