Visual styling in Onlook lets you design directly on the canvas using an intuitive toolbar that appears when you select elements. Every adjustment you make generates clean, production-ready code automatically.
Key features:
Visual toolbar - All styling controls in one place
Instant feedback - See changes in real-time
Brand integration - Access your brand colors and fonts directly
No code required - Point, click, and style
Production-ready - Generates clean Tailwind classes
The styling toolbar appears automatically when you select an element.
How to access:
Click any element on the canvas
The visual styling toolbar appears at the top of the screen
All styling controls are immediately available
What you'll see:
A horizontal toolbar with all styling options in order:
Background Color
Image Fill
Border
Border Radius
Display Type
Padding
Margin
Font Family
Font Weight
Font Size
Text Color
Text Alignment
Advanced Typography
Layer Opacity
More Options (width, height)
Quick access:
Click different elements to style them
Toolbar updates to show current element's styles
Changes apply instantly to the canvas
Control the background color of any element.
How it works:
Select an element
Click the Background Color control in the toolbar
Color picker opens with:
- Brand Colors at the top (your defined colors from Brand panel)
- Color selector (hue and saturation)
- Hex input field
- Opacity slider
- Recent colors
Quick actions:
Click a brand color for instant application
Type hex codes directly (#3b82f6)
Adjust opacity with the slider (0-100%)
Common uses:
Set section backgrounds
Style cards and containers
Create visual hierarchy
Highlight important elements
Use images as backgrounds for elements.
How it works:
Select an element (typically a container or section)
Click the Image Fill control in the toolbar
Choose an image source:
- Select from your uploaded assets in the Image panel
Image options:
Once an image is applied, you can control:
Size - Cover, contain, auto
Position - Center, top, bottom, left, right
Repeat - No repeat, repeat, repeat-x, repeat-y
Common uses:
Hero section backgrounds
Card backgrounds
Decorative elements
Full-page backgrounds
Add and customize borders around elements.
How it works:
Select an element
Click the Border control in the toolbar
Border options appear:
- Width - 0, 1, 2, 4, 8 pixels
- Style - Solid, dashed, dotted
- Color - Full color picker (includes brand colors)
- Sides - All, top, right, bottom, left individually
Quick border styles:
Click width preset for instant application
Choose color from brand colors for consistency
Apply to all sides or individual sides
Common uses:
Card outlines
Button borders
Input field styling
Section dividers
Round the corners of elements.
How it works:
Select an element
Click the Border Radius control in the toolbar and set the radius
Individual corners:
Click the corner selector to adjust individual corners independently.
Common uses:
Rounded buttons
Card containers
Image containers
Pills and badges
Control how elements are laid out.
How it works:
Select an element
Click the Display Type control in the toolbar
Choose display mode:
- Flex - Flexible box layout (most common)
- Grid - CSS Grid layout
- None - Hide element
Flex options:
When Flex is selected, additional controls appear:
Direction - Row, column, row-reverse, column-reverse
Justify - Start, center, end, between, around, evenly
Align - Start, center, end, stretch, baseline
Wrap - No wrap, wrap, wrap-reverse
Gap - Space between flex items
Grid options:
When Grid is selected:
- Gap - Space between grid items
Common uses:
Flex - Navigation bars, card layouts, button groups
Grid - Image galleries, product grids, dashboards
None - Hide elements conditionally
Control the space inside an element (between content and border).
How it works:
Select an element
Click the Padding control in the toolbar
Visual padding diagram appears showing all four sides
Adjust padding:
- Adjust all sides together
- Click individual sides (top, right, bottom, left)
- Enter custom values
Common uses:
Button padding (makes them larger and easier to click)
Card padding (space between content and edges)
Section padding (breathing room)
Container padding (prevent content from touching edges)
Padding best practices:
Use consistent values (4, 8, 12, 16, 24, 32)
More padding = more importance
Mobile: Larger padding for touch targets
Desktop: Adjust padding for visual balance
Control the space outside an element (between element and neighbors).
How it works:
Select an element
Click the Margin control in the toolbar
Visual margin diagram appears showing all four sides
Adjust margin:
- Adjust all sides together
- Click individual sides (top, right, bottom, left)
- Enter custom values
Common uses:
Space between sections
Space between elements in a list
Center elements horizontally (margin: auto)
Create visual separation
Margin vs Padding:
Padding - Space inside element (part of clickable area)
Margin - Space outside element (not clickable)
Choose which font to use for text elements.
How it works:
Select a text element (heading, paragraph, etc.)
Click the Font Family control in the toolbar
Dropdown shows available fonts:
- Your configured site fonts from the Brand panel
Quick selection:
Click to apply instantly
Font updates on canvas immediately
Consistent with your brand fonts
Control how bold or light text appears.
How it works:
Select a text element
Click the Font Weight control in the toolbar
Choose from available weights:
- Thin - 100 (very light)
- Extra Light - 200
- Light - 300
- Normal - 400 (default body text)
- Medium - 500
- Semibold - 600 (subheadings)
- Bold - 700 (headings, emphasis)
- Extra Bold - 800
- Black - 900 (maximum weight)
Available weights depend on your font:
Not all fonts support all weights. Only weights included when you configured the font will appear.
Common uses:
Headings - Semibold (600) or Bold (700)
Body text - Normal (400)
Emphasis - Semibold (600) or Bold (700)
Subtle text - Light (300)
Labels - Medium (500) or Semibold (600)
Control the size of text.
How it works:
Select a text element
Click the Font Size control in the toolbar
Choose from preset sizes or enter custom value:
- xs - Extra small (12px)
- sm - Small (14px)
- base - Default (16px)
- lg - Large (18px)
- xl - Extra large (20px)
- 2xl - 24px
- 3xl - 30px
- 4xl - 36px
- 5xl - 48px
- 6xl - 60px
- 7xl - 72px
- 8xl - 96px
Common uses:
h1 - 4xl to 6xl (36-60px)
h2 - 3xl to 4xl (30-36px)
h3 - 2xl to 3xl (24-30px)
Body - base to lg (16-18px)
Small text - sm (14px)
Captions - xs (12px)
Control the color of text.
How it works:
Select a text element
Click the Text Color control in the toolbar
Color picker opens with:
- Brand Colors at the top (your defined colors)
- Custom Color selector with a hex input field
Common uses:
Body text (dark gray or black)
Headings (darker for emphasis)
Links (primary brand color)
Subtle text (lighter gray, lower opacity)
Emphasized text (accent color)
Text color best practices:
Ensure sufficient contrast with background (4.5:1 minimum)
Use brand colors for consistency
Dark text on light backgrounds (or vice versa)
Lower opacity for less important text
Control how text aligns within its container.
How it works:
Select a text element
Click the Text Alignment control in the toolbar
Choose alignment:
- Left - Default, left-aligned
- Center - Centered
- Right - Right-aligned
- Justify - Stretched to fill width
Common uses:
Left - Body text, paragraphs (most readable)
Center - Headings, hero sections, call-to-actions
Right - Dates, metadata, navigation items
Justify - Newspaper-style layouts (use sparingly)
Access additional text styling options.
How it works:
Select a text element
Click the Advanced Typography control in the toolbar
Additional typography controls appear:
Line Height:
Control spacing between lines of text.
None - Tight (1.0)
Tight - 1.25
Snug - 1.375
Normal - 1.5 (default for body)
Relaxed - 1.625 (comfortable reading)
Loose - 2.0
Letter Spacing:
Control spacing between characters.
Tighter - -0.05em
Tight - -0.025em
Normal - 0 (default)
Wide - 0.025em
Wider - 0.05em
Widest - 0.1em
Text Transform:
Change text capitalization.
None - Normal case
Uppercase - ALL CAPS
Lowercase - all lowercase
Capitalize - Title Case
Text Decoration:
Add visual decoration to text.
None - No decoration (default)
Underline - Underlined text
Line Through - Strikethrough text
Text Color Opacity:
Fine-tune text color transparency independently from the color itself.
Common uses:
Line height (relaxed) - Long-form reading
Line height (tight) - Headings for impact
Letter spacing (wide) - Uppercase text, small labels
Uppercase - Labels, buttons, navigation
Underline - Links (though often removed in modern design)
Lower opacity - Subtle text, captions
Control the transparency of entire elements.
How it works:
Select any element
Click the Layer Opacity control in the toolbar
Adjust opacity:
- Slider from 0% (invisible) to 100% (fully opaque)
- Numeric input for precise values
- See changes in real-time on canvas
Opacity tips:
100% - Normal, fully visible
80-90% - Slightly subdued
50-70% - Subtle, secondary elements
20-40% - Very subtle, background elements
0% - Hidden (consider using display: none instead)
Access additional sizing controls.
How it works:
Select an element
Click the More Options control (three dots) in the toolbar
Additional controls appear:
Width:
Control element width.
Height:
Control element height.
Use brand colors:
Select from brand colors (top of picker)
Avoid arbitrary colors
Maintain visual consistency
Use standard spacing:
Stick to preset values (4, 8, 12, 16, 24, 32)
Creates visual rhythm
Easier to maintain
Typography hierarchy:
Establish clear size differences
h1 > h2 > h3 > body > small
Use consistent font weights
Component reuse:
Style once, reuse everywhere
Create components from styled elements
Update component to update all instances
Visual feedback:
Watch the canvas as you adjust
Use undo (Cmd/Ctrl + Z) freely
Experiment with confidence
Issue: Visual styling toolbar doesn't appear when selecting elements
Solutions:
Ensure element is actually selected (click directly on it)
Try clicking away and selecting again
Refresh the page
Issue: Adjustments in toolbar don't reflect on canvas
Solutions:
Check that correct element is selected
Verify breakpoint is correct
Look for conflicting styles
Refresh canvas
Check browser console for errors
Issue: Brand colors don't appear in color pickers
Solutions:
Configure brand colors in Brand panel first
Refresh page after adding brand colors
Verify colors are saved properly
Do I need to know CSS to use visual styling?
No. The visual toolbar handles everything. Understanding CSS helps when working in code, but it's not required.
What if I make a mistake?
Use Cmd/Ctrl + Z to undo changes. You can undo multiple steps. Every AI chat message also creates a restore point.
Can I see the code generated from visual changes?
Yes. Check the Code Editor panel to see generated Tailwind classes. Double-click an element to jump to its code.
Why use visual styling instead of code?
Visual styling is faster for layout and design work. You see changes instantly and don't need to remember class names. Use code for complex logic.
Can I style with AI instead?
Yes. You can style elements using AI Chat. Select an element and ask: "Style this button with my primary color and medium padding."
Can I create custom spacing values?
Yes. While the toolbar shows presets, you can enter custom values in the input fields for exact control.
What's the difference between padding and margin?
Padding is space inside an element (between content and border). Margin is space outside an element (between element and neighbors).
