Onlook's brand styling system combines visual controls with a centralized brand management panel, making it easy to maintain design consistency.
Key features:
Brand Colors - Define your color palette once, use everywhere
Typography - Manage fonts from Google Fonts or custom uploads
Visual Controls - Style elements without writing code
Tailwind-powered - Clean, production-ready code automatically generated
Real-time sync - Changes reflect instantly on canvas and in code
Define your brand's color palette in one place, then use it consistently across your entire application.
Opening the Brand Colors panel:
Click the Brand panel in the left sidebar
Click Manage Brand Colors
The Brand Colors panel opens
What you'll see:
Color Groups (Primary, Secondary, Accent, etc.)
Shades for each color (50-900 scale)
Add/edit/delete controls
Color picker for each shade
Creating a color group:
Click Add a new group
Name your color group (e.g., "Primary", "Secondary", "Accent")
Enter to add the new color group
Adding color shades:
Click on the [+] icon inside of a color group
Use the color picker to choose your color
Repeat for each shade you need
Recommended shades:
50 - Lightest (backgrounds, hover states)
100-400 - Light shades (subtle backgrounds)
500 - Main brand color (primary use)
600-800 - Dark shades (hover states, emphasis)
900 - Darkest (text, maximum contrast)
tailwind.config.js file with the color definitions. This makes your colors available in all style controls and in code via Tailwind classes.Once defined, your brand colors are available everywhere:
In visual controls:
Select any element on the canvas
Open use the style bar to edit the element styles
Click a color control (background, text, border)
Your brand colors appear in the color dropdown
In AI Chat:
Style this button with my primary brand colorThe AI automatically uses your defined brand colors.
In code:
<div className="bg-primary-500 text-white">
Uses your primary brand color
</div>Naming strategies:
Primary - Main brand color (buttons, links, key elements)
Secondary - Supporting brand color (accents, secondary actions)
Accent - Highlight color (call-to-actions, important elements)
Neutral - Grays for text and backgrounds
Creating shades:
Use color palette generators to create consistent shade scales:
UI Colors (uicolors.app)
Tailwind Shades (tailwindshades.com)
Or ask AI Chat: "Generate shades for my primary color #3b82f1"
Accessibility:
Ensure sufficient contrast for readability:
Normal text: 4.5:1 contrast ratio minimum
Large text: 3:1 contrast ratio minimum
Test with browser DevTools or contrast checkers
Control all fonts in your project from one central location.
Opening the Site Fonts panel:
Click the Brand panel in the left sidebar
Click Manage Site Fonts
The Site Fonts panel opens
What you'll see:
Currently configured fonts
Add font options (Google Fonts or custom upload)
Font assignments (default/standard)
Using Google Fonts:
Click Add Font
Search for a font by name
Select the font you want
Choose font weights to include (Regular, Light, Bold, Etc.)
Click Add
Uploading custom fonts:
Click Upload a custom font
Select font files (.woff, .woff2, .ttf)
Click Upload
Assigning fonts:
Once fonts are added, you can define which font family should be used as default.
- Headings - Used for h1, h2, h3, etc.
- Body - Used for paragraphs and general text
- Monospace - Used for code blocks
In visual controls:
Select a typography on the canvas
Open the Style panel → Typography section
Font Family dropdown shows your configured fonts
Select the font to apply
In AI Chat:
Style this heading with our default fontThe AI uses your assigned fonts automatically.
Do I need to know Tailwind CSS to use Onlook?
No. Visual controls handle everything automatically. Understanding Tailwind helps when working directly in code, but it's not required.
Can I use custom CSS alongside Onlook's styling?
Yes. You can add custom CSS in the code editor, but it's recommended to use visual controls and brand colors for consistency.
How many brand colors should I define?
Start with 2-3 main colors (Primary, Secondary, Accent) with 9 shades each (50-900). You can always add more later.
What if I don't need all 9 shades?
Define only the shades you need. At minimum, define 500 (main color), 600 (hover), and maybe 50 (light background).
Can I change brand colors after I've used them?
Yes! Update colors in the Brand Colors panel and all elements using those colors update automatically.
What fonts work best for web?
Sans-serif fonts (Inter, Open Sans, Roboto) are most readable for body text. Pair with a display font for headings if desired.
How do I make my design accessible?
Ensure sufficient color contrast (4.5:1 for text), use minimum 16px font size for body text, and test with browser accessibility tools.
Why use the Brand panel instead of setting colors directly?
Brand colors ensure consistency, make updates easier (change once, update everywhere), and create a cohesive design system.
Can I export my brand colors and fonts?
Yes. Your brand configuration is in tailwind.config.js which you can copy to other projects or share with your team.