The style panel

The Style tab (S) edits CSS. Not a parallel styling system, not inline styles by default — the declarations it writes go into a stylesheet or a <style> block you choose, in a form you would have written yourself.

Sections

Properties are grouped and ordered the same way every time, whatever order they appear in the file:

Section	Holds
Flex/Grid Child	flex, grid-area, align-self, order — what applies because of the parent
Layout	display, flex and grid containers, gap, templates
Size	width, height, min/max, overflow, aspect-ratio, object fit
Spacing	margin and padding, edited as a box
Position	position, insets, z-index
Typography	Font, size, line height, spacing, colour, alignment, decoration
Backgrounds	Colours, gradients, images — as layers
Borders	Width, style, colour, radius per corner
Effects	Opacity, shadows, filters, transforms, transitions, clip paths
Custom properties	Anything else, kept in source order

Grouping is render-only: it never reorders declarations in your file.

The spacing box

Padding and margin are dragged, not typed. Shift while dragging changes all four sides, ⌥ changes the side and its opposite, and ⌥-clicking a value removes it.

Number fields elsewhere behave the same way: drag the label, or use ↑/↓ — Shift for steps of 10, ⌥ for 0.1.

Where the CSS goes

The Add custom styles in control at the top picks the source an edit is written to. It lists:

• every stylesheet in the project
• every component carrying a <style is:global> block
• the <style> block of the page or component you have open

Pick the one that owns this concern. A design-token change belongs in the stylesheet that holds tokens; a one-off belongs in the component.

Values can be variables

Any value field accepts a var(). A referenced variable shows as a purple chip you can click to swap or type around, and the colour box opens the same picker the Variables panel uses. Values resolve through the chain, so you see the colour, not the name of a name.