Scales
A scale is a set of steps your brand works from: light to dark versions of a colour, or a fixed set of spacing, corner or timing values. Scales are optional.
A scale gives an agent a fixed set of values to choose from. Without one, an agent picks its own spacing, corner size or timing each time, and the results vary. An agent is an AI tool that builds with your brand, such as Claude Code or Cursor.
Sidenote has two kinds of scale, in two places:
| Scale | Where | What it holds |
|---|---|---|
| Colour scales | Colors & fonts | Lighter and darker steps of one of your colours |
| Spacing, Radius and Motion | Design, on the Scales card | Lengths for spacing and corners, and durations and easing curves for motion |
Scales are optional. A brand with a handful of flat colours and no scales is complete as it is.
Build a colour scale
- In Colors & fonts, select one of your colours to open Edit color.
- Under Color scale, select Build a scale from this colour.
- Select Save changes.
Sidenote derives eleven steps from the colour, from light to dark. Your own colour stays exactly as it is and becomes one of the eleven, so anything already using it is unaffected.
Two settings are available before you save:
- How far the scale runs: Eleven rungs, 50 to 950, or Thirteen, out to pure white and black.
- Pin or Shift: Pin keeps your colour's exact value. Shift moves it to the standard value for its step.
Once your brand has a scale, a Color scales section appears under your colours. Select a scale to see every step. Your own colour is labelled "yours". Contrast against your background is shown for reference, and Sidenote doesn't change any colour because of it.
To remove a scale, open the colour it was built from, select Remove the scale, then Save changes. Your colour is kept.
Add a spacing, radius or motion scale
- In Design, find the Scales card.
- On the row you want, select Add a spacing scale, Add a radius scale or Add a motion scale.
- Sidenote fills in its usual steps as a starting point. Change the names and values to your brand's own.
- Select Save scale.
Nothing is saved until you select Save scale.
| Scale | A value looks like |
|---|---|
| Spacing | A length, such as 16px or 1rem |
| Radius | A length, such as 8px. Use 9999px for a fully rounded pill |
| Motion | A time, such as 200ms, or a curve, such as cubic-bezier(0.4, 0, 0.2, 1) |
Change a scale
- To add a step, select Add a step, enter a name and a value, then select Save.
- To change a step, select it, edit the value, then select Save.
- To remove a step, select it, then select Remove.
The Colour and Type rows on the Scales card show what you set in Colors & fonts. Change them there.
Related
- Colour aliases: name what your colours are for. Dark value suggestions come from your colour scales.
- Corners and radius: decide which radius step goes on sections, cards and buttons.
- Brand components: use your steps in a button, a card or another component.