Using colour

Every colour comes from your design system. There is no picker, no hex field, and no way to end up with a colour that is nearly but not quite one of yours.

What a fill is

Fill asks one question — what is this filled with — and offers five answers:

Solid	a colour from your palette
Gradient	linear, radial or conic, with as many stops as you like
Pattern	stripes or checks, drawn from your palette
Image	a picture, with its framing
Video	a video behind the content

A dot marks the one the element is actually filled with, so the row says what the fill is as well as what you are looking at.

There is no Shader, and there will not be one: CSS has no equivalent short of a Houdini paint worklet, which only Chromium implements. A control that produced something two browsers ignore would break the one promise this app makes.

Pattern is a repeating gradient, not a picture — so it is made of your tokens, it costs nothing to download, and it changes when the palette changes. Stripes take an angle; both take two colours and a band size.

Where you set it

A colour is set where the thing it colours is set.

the fill	Fill › Colour
the words	Typography › Colour, with the size and the weight
the stroke	Style & depth › Stroke colour, with its width and style
a gradient’s stops	in the gradient’s own controls

It used to be one palette at the top of the rail with Fill / Text / Stroke tabs on it. That is a tidy idea and it put the stroke’s colour three panels away from its width, which is one thing in two places — and it put pictures and video inside something called Colour.

Each is a colour field: a swatch and the token’s name, which opens the whole picker when you click it. Nothing was lost in the move; the field carries all four tiers.

None removes it. Removing a stroke colour removes the stroke it created, and setting one creates a stroke to colour.

Where the colours come from

Inside any colour field:

Palette — your design system’s colours and their shades, plus white and black. This is what you reach for most.

A picture or a video instead of a colour is Fill › Media — a stroke or a run of text cannot take one. See Adding images.

Assignments — the semantic roles your system defines: the heading colour, the body background, the call-to-action colour. Reach for these when one fits. An element painted with the heading colour follows the theme when the theme changes; one painted with primary, two steps darker has a colour hardcoded into it and will not.

Transparency — the same colours at every step of opacity, for tints and washes.

Status — error, warning, success, info. These mean something specific, and they belong in a message rather than in a hero. They are kept apart so the colours you reach for are only the ones that are yours to design with.

Cutting through

Numbers knocked out of a bar so the photograph behind shows through them — what a drawing application calls Subtract.

CSS has no boolean operation, and the thing that makes the same picture is a blend. Cut out — on the hover bar, and under Appearance:

Solid	leave it filled, no hole
Light bar	a white bar, text cut out of it — for a dark picture behind
Dark bar	a black bar, text cut out of it — for a light picture behind

Select the words or select the bar — either works. The blend has to go on the bar, because that is the surface the words punch through, but “colour this black and cut it out” is how the effect is thought about and it is the words that are selected when you think it. Choosing it from a child says Cut out of Box, and puts it where it belongs.

The black and white are not a colour choice and cannot be one. They are the operands of an arithmetic: screen keeps white and lets black through, so a white bar stays a bar and black glyphs become holes. A dark grey bar does not knock out, it goes murky. The app writes both, and says so.

It cuts out everything inside the bar, because that is what a blend does. Numbers cut out but a label beside them left alone means the label needs its own box.

It also puts isolation: isolate on the section. Without it the blend reaches past the section to the page, and the same bar on the same photograph looks different depending on what happens to be underneath — which is the kind of thing you find out much later, by moving something.

Patterns

Fill › Pattern: stripes, checks, dots and a grid, drawn from your palette rather than from a file. In CSS a pattern is a repeating gradient, which means it is the same machinery as a gradient — tokens and all — rather than an image somebody has to make and ship.

Dots and a grid have a mark of their own inside the tile, so how big that mark is is separate from how far apart they are. Stripes and checks do not: their mark is the spacing.

For a pattern made from a drawing of your own, that is the artboard’s — see Drawing graphics.

Gradients

Fill › Gradient, on anything. A gradient is a fill — the natural background of a section or a box — not a trick played with a pseudo-element.

Shape is Linear, Radial or Conic. Direction is the eight arrows; radial and conic also ask where they start from.

Stops are a list, and each one is a token with an optional position. Add as many as you like; two is the fewest a gradient can be made of. Leave a position blank to space them evenly.

Applies to

One word, three mechanisms — you say where it goes and the app writes whichever CSS that needs:

Fill	background-image. A box, a section, a layer
Text	background-image + background-clip: text, and the words’ own colour set to transparent — which is how this is done
Stroke	border-image

Two of those have a cost, and the panel says so rather than letting you find it:

A gradient border squares the corners. border-image ignores border-radius, always, and no setting brings it back. That is CSS, not this app.

Gradient text has no graceful fallback. The words are painted with the background and their own colour is transparent, so anywhere background-clip fails they are invisible. It is supported everywhere now and written prefixed as well, but it is worth knowing what it is.

Over a picture

Put the gradient on a layer rather than on the element — open the layer, then Fill › Gradient. The panel is already pointed at it, so it is the same control doing the same thing to a different target, and the gradient lies over the element’s own picture instead of replacing it. See Element layers.

By hand, on the canvas

With Fill › Gradient open, the gradient’s own handles appear on the element: a line, a diamond at each end, and a round handle for every stop in between.

Drag an end to set the direction. The line pivots about the other end, the way dragging one end of a line does everywhere else, and Shift snaps it to eighths of a turn.

Drag a stop to move it along the line. Dragging one past another reorders them, and the reorder happens when you let go rather than under your hand.

What is worth knowing is what the drag is saying, because CSS has less freedom here than a drawing application does. A linear-gradient takes an angle, and its line always runs through the centre of the box — you cannot put the two ends wherever you like. But the gesture still maps exactly: where you drop an end is recorded as where that stop sits along the line. Drag across the middle third of a box and what you have said is “first stop at 33%, last at 66%”, which CSS holds precisely.

So dragging an end does two things at once, and both are the same information.

With the tool

Pick the Gradient tool (G) and drag across the element. That is the whole gesture: picking the tool opens Fill › Gradient so you can see what the drag did, and dragging on something selects it on the way past — no click first.

Where you start and finish the drag become where the first and last stops sit, the same bargain the handles make.

By hand: drag across a box. The direction of your drag is the direction of the gradient, snapping to eighths of a turn — an eighth is a decision and 37 degrees is a mistake.

The stops: with the gradient tool active, the Fill / Text / Stroke tabs become From and To. Pick which end you are setting, then click a colour on any tab. Fade to nothing makes that end transparent, which is what turns a gradient into an overlay rather than a covering.

Two per element. A gradient goes on a layer rather than on the element itself, which means it lies over a background image instead of replacing it, and the element’s own fill stays free. Upper and Lower in the tool panel choose which you are editing, and which sits in front. A dot marks a layer already in use.

Those are the same two layers the Element layers panel offers, so a gradient you draw here can be given a radius, an opacity or a size afterwards — and adding one to a layer you have already styled keeps what was there. See Element layers.

A gradient stop can be a colour of your own

Every stop offers the palette first, and a Custom tab beside it with the full picker — hue, saturation, lightness, opacity and the exact hex.

This is the one place in the app where a free colour is not treated as debt. Everywhere else a value that is not on the scale will not move when the scale is remapped, and that is worth knowing about. A gradient’s middle is not that: it exists to get from one token to another, it has no meaning of its own to name, and a design system that had to declare every intermediate would be one nobody could read.

The palette is still what opens first, because a token is still the right answer most of the time — Custom is one tab away rather than in front of every choice.