Your brand color has one hex value. A design system needs about nine: a light tint for hover backgrounds, a dark shade for pressed states, something in between for borders. The obvious way to generate them is to nudge the RGB channels up and down. It looks fine until you put the swatches side by side and notice the light end has gone grey and the dark end has gone muddy.
Here's why that happens, and how to build a scale that actually stays on-hue.
Why lightening in RGB goes grey
Take a saturated blue and lighten it the naive way — push every channel toward 255:
const lighten = (r, g, b, amount) => [
