Frontend

Maybe hot take, but I really don't see the point of having ~10 shades per color in a design system.

Do we need more than foreground/background/hover variants for every single color? I can see the case for more grays, maybe. Curious what y'all think.

Now that we have color-mix(), we really only need to define one or two base accent colors then derive any variants we need dynamically.

Staff Eng at Iron Fish 🐟 • Building BlockSocks 🧦 • Denver, CO 📍

Now that we have color-mix(), we really only need to define one or two base accent colors then derive any variants we need dynamically.

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix

/frontend dev・founder/decentralized data wrangler /blockhead・UI/UX abstractionist・DeFi/web3 builder・dropout・24・prev /dydx, ritual.net・x.com/darryl__yeo

Agreed, better to define just enough colors to meet minimum semantic/accessibility needs – a different hue for every distinct meaning (default/accented/success/error) multiplied by one shade variant for each interactive state (default/hover/active) multiplied by the number of themes you want to support (light/dark).

I love that this is available natively, but IMO it doesn't answer the question of how many shades per color to use. I.e. it's a great way to create shades, but IMO it's still a good practice to limit their number to a consistent set.

Was about to say that. I use a helper that generates a color-mix combination. That is useful for any customizable setup. Also if you mix “transparent” at any percentage you are dithering that color