Neutral Gradients

About neutral gradients

Most of a product is not the accent colour. It is cards, panels, dividers, table rows, disabled states and loading skeletons, and all of those read better with a slight gradient than with a flat fill — the shift gives a surface an implied light source without drawing attention to itself.

The trick is that these are almost never pure grey. A neutral carrying a few points of your brand hue looks like part of the system, while true #808080 looks like unstyled default chrome. Build one from your own brand colour with the Tonal Gradient Generator and the whole interface quietly agrees with itself.