typeof.eth 🔵 on Warpcast

Content pfp

0 reply

0 recast

0 reaction

typeof.eth 🔵 pfp

typeof.eth 🔵

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.

9 replies

1 recast

9 reactions

Darryl Yeo 🛠️ pfp

Darryl Yeo 🛠️

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

2 replies

0 recast

3 reactions

alex pfp

@alexgrover.eth

I’m with you, a few semantic variants is the way to go. Having 10 options to choose from will just make things inconsistent

0 reply

0 recast

2 reactions

gilbert pfp

Color is so extremely contextual that more than one shade is necessary to get consistent looks across different contexts. This is a case where 1 + 1 does not equal 2

1 reply

0 recast

1 reaction

Alex Bruno pfp

It could depend on your treatment of color. High-contrast style can get away w/ fewer variants. Opacity could go a long way in creating the illusion of shades (e.g. Warpcast). Sometimes inverting colors won't always work for dark mode, so you might need separate values for that

1 reply

0 recast

1 reaction

beach 🃏🐸 pfp

I hope no one is arguing with you. I think even 2 shades of the same color would make ADA compliance a headache for anyone downstream working on implementation

1 reply

0 recast

1 reaction

Grins pfp

My go to template is: Primary (lighter) + Highlight Secondary (darker) + Shadow

0 reply

0 recast

1 reaction

the Blair witch pfp

the Blair witch

+1 not having multiple shades. Internally calculate hover/pressed/theme shades but you only need to expose one shade per palette color.

0 reply

0 recast

1 reaction

Nicolaus pfp

In my experience it’s better to build the colors in as you need them. Scale with the design environment. A neutral scale is important for utility, but for all else, start with your base color palette. Add in a couple tints and shades to start. Intentionally add more shades for specific component states. Standardize.

0 reply

0 recast

0 reaction