Colors and Typography

Overview

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

Powered by Tailwind CSS
Onlook uses Tailwind CSS to generate clean, production-ready code. Visual changes create Tailwind classes automatically - everything translates 1:1 to code with no abstractions or black boxes. Developers can work directly with standard Tailwind.

Managing Brand Colors

Define your brand's color palette in one place, then use it consistently across your entire application.

Accessing Brand Colors

Opening the Brand Colors panel:

1. Click the Brand panel in the left sidebar

2. Click Manage Brand Colors

3. 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

Adding Brand Colors

Creating a color group:

1. Click Add a new group

2. Name your color group (e.g., "Primary", "Secondary", "Accent")

3. Enter to add the new color group

Adding color shades:

1. Click on the [+] icon inside of a color group

2. Use the color picker to choose your color

3. 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)

What Happens Behind the Scenes
When you add brand colors, Onlook automatically updates your tailwind.config.js file with the color definitions. This makes your colors available in all style controls and in code via Tailwind classes.

Using Brand Colors

Once defined, your brand colors are available everywhere:

In visual controls:

1. Select any element on the canvas

2. Open use the style bar to edit the element styles

3. Click a color control (background, text, border)

4. Your brand colors appear in the color dropdown

In AI Chat:

Style this button with my primary brand color

The AI automatically uses your defined brand colors.

In code:

<div className="bg-primary-500 text-white">

  Uses your primary brand color

</div>

Color Best Practices

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

Managing Typography

Control all fonts in your project from one central location.

Accessing Site Fonts

Opening the Site Fonts panel:

1. Click the Brand panel in the left sidebar

2. Click Manage Site Fonts

3. The Site Fonts panel opens

What you'll see:

• Currently configured fonts

• Add font options (Google Fonts or custom upload)

• Font assignments (default/standard)

Adding Fonts

Using Google Fonts:

1. Click Add Font

2. Search for a font by name

3. Select the font you want

4. Choose font weights to include (Regular, Light, Bold, Etc.)

5. Click Add

Uploading custom fonts:

1. Click Upload a custom font

2. Select font files (.woff, .woff2, .ttf)

3. 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

Font Configuration in Code
Onlook configures fonts in your project automatically, adding them to your Tailwind theme and importing them properly for optimal performance.

Using Site Fonts

In visual controls:

1. Select a typography on the canvas

2. Open the Style panel → Typography section

3. Font Family dropdown shows your configured fonts

4. Select the font to apply

In AI Chat:

Style this heading with our default font

The AI uses your assigned fonts automatically.

Frequently Asked Questions

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.