Design

The Style panel

Every control in the Style panel: the breakpoint bar, Typography, Spacing, Background and Border, and how values show where they come from.

The Style panel changes how the selected element looks. Select an element on the canvas, then click Style in the left icon rail. If nothing is selected, the panel says Click an element on the canvas to edit its styles.

The panel is locked while the AI is working. If you select something in your site's header or footer, a notice reminds you that changes affect every page, for example Editing the site Header — changes affect every page.

The panel has five parts: Breakpoint, Typography, Spacing, Background and Border. Click a section's title to collapse or expand it.

Breakpoint

Websites change layout at certain screen widths, called breakpoints. The breakpoint bar chooses which screen size your changes apply to.

Icon	Name	Applies from	Typical devices
Phone	Phone	0px and up	Mobile phones
Phone on its side	Landscape phone	640px and up	Landscape phones, small tablets
Tablet	Tablet	768px and up	Tablets
Laptop	Laptop	1024px and up	Low-resolution laptops, large tablets
Monitor	Desktop	1280px and up	Laptops, monitors
Large monitor	Large monitor	1536px and up	High-resolution laptops, monitors

A setting applies at the size you pick and every larger size, unless a larger size sets its own value. That's why the sizes to the right of your choice are highlighted too. Phone is the base: a value set there applies everywhere.

The panel title shows the size you're editing (for example 768px+) and the canvas's current width.

See all breakpoints (the icon at the left of the bar) shows every value the element has at every size. Click + Breakpoint to add a value for another size, or the × next to a size to remove its values.
Highlight controls that have breakpoint overrides (the highlighter button) outlines every control whose value changes at some screen size.
This won't change what you see: a small warning icon on a control means the value you're editing isn't the one showing on the canvas, because the canvas is at a different width. The tooltip explains, for example This setting applies up to 767px, but your canvas is 1280px. Click Switch to the … breakpoint to edit the value that's showing.

See Responsive design for a walkthrough.

How values show where they come from

Set on this element: the value is shown in normal text with an × in front. Click the × to clear it at this breakpoint.
Not set: the value is grayed out. It's what the element shows anyway, inherited from a parent element, a smaller breakpoint or your page defaults.
Colors show the color's name from your tokens, with a swatch.

Typography

Control	What it sets
Font	One of your font slots. See Fonts.
Size	Text size. Type a number, or pick a standard size from X-small to 9X-large.
Color	Text color. Opens the color picker.
Weight	Thin, Extra light, Light, Normal, Medium, Semibold, Bold, Extra bold or Black. Only weights your font includes look different.
Emphasis	Italic, Underline, Strikethrough. The ⊘ button forces emphasis off, for example to remove a link's underline. Its menu lets you strip only underline and strikethrough.
Align	Align left, Align center, Align right, Justify.
Case	Uppercase, Lowercase, Capitalize, Normal.
Leading	Line height. Type a number or pick a standard value.
Tracking	Letter spacing. Type a number or pick a standard value.

The color picker

Every color control opens the same picker:

Scale rows: each color scale's shades. Click one to use it.
swatches: your single colors. Click + (New color — pick or paste any value) to make a new one. Pick it with the L (lightness), C (how vivid), H (hue) and A (opacity) sliders, or type a value in hex, rgb, hsl or oklch, then click Save swatch. The new color is added to your tokens.
opacity: makes the chosen color partly transparent.

The current color has a solid outline. An inherited color has a dashed outline.

Spacing

A diagram shows the element's margin (space outside it) and padding (space inside it), with a value on each side. Click a value to pick a new one from the spacing scale or type your own. Margins can also be Auto or negative. The center button in the margin area centers the element horizontally.

Background

Control	What it does
Color	Solid background color.
+ Gradient	Adds a gradient. Choose Linear, Radial or Conic. Set the direction with the arrows or switch to an angle dial. Set the From and To colors, and click + Middle for a third. Radial gradients also have a shape and a size (Closest side, Closest corner, Farthest side, Farthest corner or Custom). The trash button (Remove gradient) removes it.
+ Image	Picks a background image from your image library. Then set Size (Cover, Contain, Auto), Repeat (No repeat, Repeat, Repeat X, Repeat Y) and Attachment (Scroll, Fixed, Local). Use Replace image… to change it and Remove image to remove it.
+ Overlay	On a background image, adds a color overlay from Start to End, to make text on top easier to read.
Blend	How the overlay mixes with the image, such as Multiply, Screen or Overlay.

A background color and a gradient or image can be used together.

If the AI made a gradient the panel can't break into these controls, you see This is a custom gradient — use the AI panel to modify it. (or Custom overlay — use the AI panel to modify the gradient.).

Border

Control	What it sets
Width	Border thickness.
Style	Solid, Dashed, Dotted, Double or None.
Color	Border color. Set a thickness first.
Radius	How rounded the corners are.

Click Per side to set width and color for each side, and radius for each corner, separately (Sides and Corners).

What isn't here

Sizing, position, shadows, opacity, hover states and some other settings aren't in the Style panel. See What the Style panel doesn't cover yet. Flex and grid layout, lists, tables and form fields have their own layout tools on the canvas.