Working on the canvas

The canvas is a browser rendering your actual stylesheet. What you see is not an approximation of the result — it is the result.

Selecting

Click anything to select it. Double-click text to edit it in place, at the size and colour it will really be. Right-click for the values you reach for most, without going to a panel.

The selected element gets a name badge above it and eight handles around it.

Moving

Drag the name badge. A full-width block has no obvious place to take hold of, so the badge is the grip.

The element leaves the flow and follows your cursor while a placeholder holds its slot, and the things around it genuinely part to show where it will land. That gap is real — it is the browser reflowing, not an indicator drawn over a frozen layout.

Dragging never writes a position. It moves the element in the document, which is why the result is still a web page.

Resizing

The eight handles move the edge you grabbed.

• Right and bottom change the size.
• Left and top cannot move a left or top edge by resizing — the layout owns that — so they move it with margin. Pulling the top edge upwards is a negative top margin, which is exactly what you meant.
• Corners on text size the type. See Working with type.

While you drag, the element follows your hand exactly and a badge shows what it will settle to. The snap happens when you let go, not on every frame.

The tools

The two rails

Left is the element and its structure: what you can add, the Layers tree, the selected Element, and your components.

Right is the design interface — an accordion of Element layers, Fill, Size, Layout, Placement, Spacing, Stroke, Appearance and Typography. One is open at a time; a rail of nine expanded panels is a rail nobody reads, and the scrolling was the point of collapsing them.

Stroke holds the whole of a stroke — colour, width and style — rather than two of those in one place and the third somewhere else. Appearance is what is true of the element as a whole: corners, shadow, opacity, depth, blend and movement.

What you opened is remembered, and remembered as a preference rather than a position. Selecting a box after a heading takes Typography away and the first panel opens instead — selecting the heading again brings Typography back, because what you asked for was not forgotten, it was just not available.

Layers reads as names. A row is a thumbnail and a name — Hero, Content, Life is Style — the way a graphics application draws one, not a tag and a class. A section is a group and its name is the component’s name, which is why naming it hero or header when you create it is worth doing: that name is what you will be reading for the rest of the project. The styling tag is still there, as the row’s tooltip and as the first thing in Element.

The thumbnail shows what is actually rendered — a picture, the photograph behind a section even when it is on a layer, or the element’s fill.

Page, or Window

Two ways to look at the same design, on the bar above the canvas.

Page is the default and the one to design in. The frame is as tall as its content, so the whole page is in front of you and nothing is ever scrolled out of reach.

Viewport makes the frame a real browser window — a width and a height — and the page scrolls inside it. Use it when the design depends on there being a viewport:

• 100vh and its relatives
• anything that sticks as you scroll
• a background Held still, which is measured against the window

In Page view there is no viewport: the frame’s window is the whole document, so a held-still background is fixed to something that never moves and the effect is invisible. The CSS is right and the browser is honouring it — there is just nothing for it to hold still against. Switch to Window and it works.

Fit fits the width in Page view, and both edges in Viewport view, because a window with one edge off-screen is not a window.

The hover bar at the foot of the canvas is for editing what is selected. Hover an icon and its values open above it; click one to apply it. What appears depends on what is selected — a heading is offered the type scale, a box its layout and padding, a picture its crop and blend — and it always agrees with the right-hand panel, because both read the same declaration. Adding elements is the icon bar at the top of the left rail.

Move	V	Select, drag, resize
Corner	C	Drag a corner to round it
Spacing	S	Eight handles: inner four pad, outer four margin
Gradient	G	Drag across a box to set the direction

Everything to the right of the divider is contextual: what appears depends on what is selected. A heading is offered the whole of typography — size, typeface, weight, leading, tracking, slant, caps, underline and alignment — plus its colour; a box is offered its layout and its fill. A category already carrying a value shows a dot.

Every token in a popover shows what it actually comes out as at the canvas’s current width. A fluid scale is a clamp() of three numbers in two units, and no designer can read one of those as a size — so the size is measured, not parsed, and it moves as you drag the width scrubber.

Modifiers

One convention, used everywhere a value has sides:

⇧ click	Add to the selection, or take it out — siblings only
⌘G / ⇧⌘G	Group the selection in a div, or take it apart
Drag	That edge, or that corner, on its own
⌥	The opposing pair — or the diagonal, on a corner
⌘	All four
⇧⌘	Leave the scale and set the exact number

The same four everywhere a value has sides: spacing, corners, borders. None of them has to be learnt twice. | ⌥ Option + drag | That edge and the one opposite — block or inline | | ⌘ Command + drag | All four |

Styling tags

Under the layers panel, an element shows the tags it carries — its own name, and any component the design system has given it. The highlighted one is what styling is written to. Click another to style that instead.

Most elements have one and never need a second. Two situations call for one:

Two things share styling. Duplicate a box and both copies carry the same tag, so styling one styles both — correctly, since they are the same thing. When that is not what you want, the panel says so and offers Style this one separately.

It asks what to call the new one, with the shared name already filled in and the cursor after it, so you type what makes this one different: hero__box--feature, card--wide. Name it for what it is rather than where it happens to sit — --feature outlasts a layout, --left does not survive the first time the design changes. The original is untouched either way.

One thing needs two. A card that shares its shape with every card but has its own colour carries both tags, and you switch between them to say which you are changing.

+ adds one, × removes one, and an element always keeps at least one — with none there would be nothing for its styling to attach to.

The ? beside the label explains all of this in the app, and lets you switch the wording between styling tag and class. They are the same thing: one word is what it does, the other is what a developer calls it.

Undo

⌘Z and ⌘⇧Z, or the buttons beside Save.

Typing a heading is one step rather than thirty — changes in quick succession fold together — but anything that ends deliberately, like letting go of a drag, is its own step. Opening a project starts a fresh history.

The left rail

Layers has a fixed height, so selecting a different kind of thing does not move the row you were aiming at. Drag the bar underneath it to change that height, and double-click the bar to put it back. The Element panel below scrolls if what it has to show is taller than the space.

Lean and Tip

Under Appearance. Lean slants an element; Tip turns it in space — to the left, to the right, away or towards.

Tip is real perspective, and it is real here in a way it can never be on the artboard: CSS has a projective transform where SVG has only affine ones, so the near edge is genuinely larger rather than the shape merely being slanted. The depth is written alongside it, because a 3D rotation without perspective is just a flat squash.

Both write the same transform property and each keeps the other’s half of it, so tipping something does not undo its lean.

Every edge resizes

All eight handles change the size, including the left and top ones. Pulling the left edge leftwards widens the box, exactly as pulling the right edge rightwards does — the handle changes the size and nothing else.

Where the box then sits is the layout’s business, and margins have their own tool: Spacing (S), where the outer edges are the margins. The left and top handles used to push a margin instead of resizing, which was both the surprising answer and a second way to do what Spacing already does.

Boxes that would otherwise vanish

A box with nothing in it is nought pixels tall, so deleting the last thing inside one used to make the box disappear — and with it any way to select it, size it, or put something back. An emptied box keeps a floor instead: the smallest spacing token that is actually big enough to grab, as a min-height.

A floor rather than a size, so the box grows past it the moment anything goes in and you never have to take it off again.

Borders

Border on the bar picks up the border tool and puts a grip on each edge. Drag one outwards to thicken that side — ⌘ for all four, ⌥ for that edge and the one opposite. There is no scale behind border widths, deliberately, so the hint says the number in pixels rather than a token name.