The styling panel

Click an element, and the styling panel offers controls for the rule that styles it. Changing one writes one declaration into your stylesheet.

The groups

Eight, in the order a block actually gets built:

Size — width, max width, height, min height. Layout — display, direction, wrap, place, gap. Surface — the background. Spacing — padding and margin. Type — size, weight, leading, tracking, alignment, transform, colour. Border & Depth — radius, border width and style, border colour, shadow, opacity. Motion — transition. Position — position, inset, stack order, overflow.

Position is last on purpose. In a layout built out of normal flow it is the rare answer, and it no longer sits where the eye lands first.

It offers your tokens

Where a control takes a length, a colour or a font size, it offers the tokens your project defines before it offers you a number.

That is the point of having a globals.css: a spacing value picked from --space-* stays correct when the scale changes, and one typed as 24px does not. See Connecting the design system.

The dot

A small blue dot beside a label means the rule sets that property.

Click the dot to remove the declaration. That includes padding and margin, which otherwise had no reset short of finding remove at the foot of a dropdown you had to open to find it.

The one exception is the dot on a ::before or ::after layer, which stays an indicator and is not a button. Losing a whole pseudo-element to a stray click is a different order of loss from clearing one declaration.

Backgrounds

Surface holds one control, and it takes a colour, a gradient or an image.

+ Add a background image or gradient starts it.

An image comes from Assets…, so the path is one FEWD knows is right — or you type or paste an address, which is what a CDN, a Sanity URL or anything copied out of a browser needs. Both are offered, on the element’s own background and on each ::before / ::after layer.

Colours and gradient stops come from your project’s own ramps — nobody should have to go and look up their own brand colour.

Further layers stack in the same declaration, newest on top.

Beneath that sit the element’s two overlays, labelled as what they are: ::before and ::after. This is a developer’s tool, so they are named rather than dressed up. Each takes its own background plus size and repeat.

An overlay is how you put a wash over a photograph. Layering a gradient over an image in the same declaration is the other thing, and both are available because CSS has both.

What it does to your file

It replaces one declaration and regenerates nothing. A declaration remembers the span its value occupies, and setting it replaces that span. Comments, blank lines, property order and your own spacing cannot move, because nothing rebuilds them.

It says what it expects, and is refused when it is wrong. Every write carries the value the panel was showing. If the file on disk no longer says that — a dev server wrote it, a colleague’s commit landed, you edited it in the pane — the write is refused rather than applied over the top. The file is re-read immediately before writing, so that window is as small as it can be made.

You will occasionally meet that refusal. It is doing its job.

What it removes

Only what it would otherwise stop showing you.

You can delete anything you can see. What you cannot recover is what went silently, so the default is to keep — and a value that is merely unusual stays. background-size survives a change from an image to a gradient, because it still does something and the panel still shows it.

The exception is state the interface will not admit to: a background-color left underneath a gradient that the control now reports as a gradient. A value in your rule that nothing on screen will own up to is worse than clutter.

What it will not do

• Move a rule
• Create a rule that does not exist
• Edit a rule it cannot pin down to one place unambiguously
• Touch a template

A rule it cannot place is shown locked, with the reason, and the file one click away for the coding pane to handle.

Where it sits

By default, a tab beside the Inspector.

Preferences → Styling in its own panel gives it a column of its own, with its own side and its own width. Worth doing: tabbed, you cannot watch the tree you are selecting in and the controls you are changing at the same time, and that is most of what building a component is.