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

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.

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).

Yeah, I think this is the general direction that I'm gonna propose, and likely using color-mix for the actual definitions 💅