The brief was one line: make it feel calm. We did what everyone does first and went to the palette. Lower the saturation, drop the contrast, push everything towards a mid grey. It looked calm in the file and dead on a screen at nine in the morning.
What we actually changed
The version that worked keeps the indigo at full strength. What changed is the field: dot size stays flat while the spacing grows on a curve. Your eye reads a field that is settling rather than one that is fading, and settling is the thing that feels calm.
Fading reads as loss. Settling reads as arrival. Same colours, opposite feeling.
The numbers
Spacing runs from 6px to 34px across sixteen steps, following a curve rather than a straight line. Dot diameter holds at 4px throughout. Drop the dots by eight per cent on dark backgrounds and the two versions read identically; leave them and the dark one shouts.
Where it breaks
Below about 320px the curve runs out of room and the whole thing collapses into texture. We ship a two-step version for small screens instead of squeezing the sixteen.
It also breaks when anything moves. A single animated element in the field pulls every eye to it and the calm goes immediately. If you need motion, move the whole field or nothing.
What to take from this
- Reach for rhythm before you reach for the palette.
- Test the dark version at the size people actually use, not at 200% zoom.
- If one thing moves, everything is loud.
The source file is in Type & Lettering, and the comparison sheets are printed at A3 for Thursday's critique if you want to mark them up.
The eight per cent number matches what we found, which is either reassuring or suspicious.
Printed the comparison. At A3 the curve is obvious; on screen I had to look twice.
Bringing the dark version on Thursday so we can argue about the 8%.