Gradients

Build a gradient from colours already in your palette and use it as an emphasis colour. Gradients are optional, and most brands have none.

A gradient is a blend between two or more of your brand's colours. If your brand uses one where another brand would use a flat colour, you can build it in Sidenote so that an agent uses the same one every time. An agent is an AI tool that builds with your brand, such as Claude Code or Cursor.

Gradients are optional. If your brand doesn't use them, skip this section.

You'll find them in your brand under Colors & fonts, in the Gradients section.

Add a gradient

Select Add a gradient.
Under NAME, finish the name after color.gradient. using lower case letters, numbers and hyphens, for example color.gradient.roast.
Under STOPS, pick a colour for each stop and set its position between 0% and 100%. A gradient needs at least two stops. Select + Add a stop for more. With more than two, each stop has a Remove.
Check the PREVIEW.
Select Add gradient.

Each stop points at one of your colours. If you later change that colour, the gradient changes with it.

A gradient holds its colours and their positions. It doesn't hold a direction, so the same gradient can run at whatever angle each design needs.

Read the contrast line

Text placed on a gradient crosses all of its colours, so Sidenote measures contrast at the stop where text is hardest to read. The preview shows the result under "What can be read on it, measured at its worst stop", for example:

Inverse text 6.0 · Body 1.6, and 1.8 at the other end

Here Inverse text is readable across the whole gradient. Body is hard to read at both ends. The thresholds are the same as for colour aliases: 4.5 for body text, and 3 for large text and edges.

A low number never stops you saving.

Use a gradient as an emphasis colour

A gradient can be one of the colours on your Emphasis alias, alongside flat colours.

Change or delete a gradient

Select Change on a gradient to edit its stops, then select Save gradient. Its name can't be changed once it is saved.

Select Delete to remove it. If an alias or a component points at the gradient, Sidenote lists what points at it and deletes nothing. Point those at something else first, then delete.

If a gradient shows "One of its stops names a colour this brand no longer has", select Change and pick a colour for that stop.