How to lay something out and style it. Everything here lives in the DESIGN tab of the style panel, applies per element, and can be varied per interaction state, per variant and per screen.
Element types themselves — what you can place and how the tree works — are covered in Canvas and elements. This page is about styling what you placed.
Width and height each take one of seven modes: Fixed (px), Relative (%), Fill, Fit Content, Max Content, Viewport (vw/vh) and Auto — plus independent min/max on both axes, and an aspect ratio (fixed, calculated, or auto).
Two of the modes deserve precision:
Fill means "take the leftover space in my flex parent" — it is a flex instruction, not a width, so the picker only offers it when the parent's direction runs along that axis.
Fit Content emits min-content: the element hugs its content as tightly as the content can wrap. Long labels wrap sooner than you might expect.
An element's Display picks the layout system: flex row, flex column, grid, plus the ordinary block/inline/table modes and contents.
Flex containers get direction, justify, align, wrap, and gap — one value or separate row/column gaps. Children get their own say: align-self, justify-self, order, flex basis and shrink.
Grid containers take a fixed column count or auto-fill, per-track sizing (px, %, 1fr, or auto), separate row and column gaps, and content/item alignment; a child can span columns and rows. Two limits to know: tracks are uniform — every column shares one size, so 1fr 2fr 1fr is not expressible — and a fixed row count flips the flow to columns so the row count is honored.
The editor also guards the common layout traps: switching a parent from row to column rewrites the children's Fill so the stack does not collapse, and switching an element from relative to absolute converts its Fill sizes to fixed ones.
Relative is the default and means "laid out by my parent". Absolute, Fixed and Sticky take offsets from any edge; pin two opposite edges and the size along that axis is derived for you.
Stacking order is tree order — later siblings paint on top. To bring something forward, move it in the element tree; there is no bring-to-front command.
Fill is a list, not a color. An element's background stacks any number of layers, reorderable, each one of five types: solid, linear gradient, radial gradient, a design-system color token, or an image.
Linear gradients run at any angle, with unlimited stops. Click the gradient bar to insert a stop where you clicked — its color is interpolated from its neighbors — then drag or type positions.
Radial gradients add an explicit ellipse size and a center anchor.
Image fills take any raster the browser accepts (or an inline SVG), uploaded or pasted straight from the clipboard, with position anchors, repeat modes and sizing (cover, contain, or explicit).
A token can be a gradient. Point a fill at a design-system color, and since a color token can itself hold a gradient, a brand gradient re-themes like any other token.
Fills animate between interaction states. CSS cannot interpolate a background-image, so the export registers each gradient stop as a typed @property custom property and animates those — a gradient-to-gradient hover cross-fades, and a solid cross-fades into a gradient. (The first four layers and twelve stops per gradient participate; beyond that a fill still renders but snaps. In browsers without @property, it snaps too.)
Gradient text is the Text option under background clip — the one clip option to use.
Borders are solid, dotted or dashed, per-side or all at once, with a literal color or a token. Radius sets one value or four corners independently, each a number or a design-system radius token.
Shadows — a list of box-shadows, each with offset, blur, spread, color and alpha, including inner shadows (inset). Shadow colors can be tokens.
Filter — nine functions, stackable in any order: blur, brightness, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia.
Backdrop filter — the same nine functions applied to what is behind the element: frosted glass is backdrop blur plus a translucent fill.
Opacity — 0–100, per element, per state.
Effects are added with a single element selected. And two absences to plan around: there are no blend modes, and box-shadow does not transition between states (filter does).
Type reaches a design through font templates — design-system tokens that set family, weight, style and size together (see Design system). Alongside the template, text takes color, line height, letter and word spacing, alignment, indent, decoration, wrapping (white-space, word-break) and overflow.
To style one word differently, select it and it becomes a String — a span inside the text block that takes its own styles.
Above the style sections sits the state switch: Default, Hover, Focus, Active. Pick a state and edit — those values now belong to that state's layer, and they export as real CSS pseudo-classes, no JavaScript involved.
Transitions make the change move: each of 31 transitionable properties takes its own duration, delay and easing — seven named curves or a custom cubic-bezier. This is the tool for hover and state polish; timelines are the tool for sequences.
Two composition tricks the panel supports:
A variant can carry its own hover — outline's hover differs from the default hover, in one component.
Ancestor-state styling — style a child only while its parent is hovered. Exports as the compound selector you would have written by hand: .parent:hover > .child.
Those three states are the whole list — there is no disabled or pressed pseudo-state. A disabled look is a variant you declare, driven by a property or condition (see Add logic).
The painterly surfaces are elements, not fills — right-click the canvas and choose Add Mesh Gradient or Add Shader. Both are normal styled boxes (size, position, filters and transitions all apply) and both export as live WebGL, not baked images.
A mesh gradient is a grid of color points you sculpt on canvas: drag points, drag each point's four bezier handles (Alt breaks the mirrored pair), marquee-select and transform groups. Colors blend in OKLab by default — even, un-muddy midpoints. Twelve stackable GPU effects sit on top: grain, chromatic aberration, halftone, watercolor, VHS, progressive blur, glass refraction and more. A mesh can also loop its own frame animation with no timeline involved.
A shader is a parameter-driven animated gradient in two families — radial and grain, seven grain shapes, a handful of presets — animating itself via its speed parameter. It is parameters, not programming: there is no custom GLSL.
Both need WebGL2, and a page full of them will hit the browser's context budget (roughly sixteen) — spectacular in a hero, expensive as a texture everywhere.
Responsive screens — everything above, varied per width.
Animate — motion beyond state transitions.
Design system — where the tokens these controls bind to are defined.