Design & Styling
Match your brand in one prompt — set colors, fonts, spacing, and themes across every page automatically.
What Are Design Tokens?
Design tokens define your site's visual identity — brand colors, typography, spacing, and corner radius. Set them once and every page and component on your site stays consistent automatically.
Setting Your Brand Style
Describe your brand and your AI applies it across the entire site:
"Set my brand colors to blue and white with a modern feel."
"Use Inter font for headings and system font for body text."
"Make my site use rounded corners and generous spacing."
Available Tokens
Colors
Primary, secondary, accent, background, and text colors. Supports hex, RGB, and HSL values.
Typography
Font family, sizes, weights, and line heights for headings, body, and UI text.
Spacing
Consistent spacing scale for margins, padding, and gaps between elements.
Border Radius
Corner rounding for buttons, cards, and containers — from sharp to fully rounded.
Themes
Design tokens support light and dark mode. Set up both and your site automatically adapts to each visitor's system preference — no extra work required.
Available MCP Tools
set_design_tokensget_design_tokens