Design & Styling
Customize your site's look with design tokens and themes.
What Are Design Tokens?
Design tokens are the building blocks of your site's visual identity — brand colors, typography, spacing, and border radius. They ensure consistency across every page and component on your site.
Setting Up Tokens
Ask your AI assistant to configure your brand:
"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 variations. Set up both themes and your site will automatically adapt to your visitors' system preferences.
Available MCP Tools
set_design_tokensget_design_tokens