Color — simplicity vs aesthetics

It’s been a struggle for me to find a color system that is both simple and easy to use and also allows sufficient room for aesthetic exploration and refinement.

• Ex: Tailwind has a positively massive color palette, but that kind of thing isn’t a good idea on a team. Nobody will know how to implement it

• Easily switching between light & dark modes

  • I don’t want to have to individually style my dark mode components. I wan’t my light mode colors to map 1:1 with my dark mode colors. To me at least, this means you kind of have to have a role-based system where color combinations are known

• Example

  • If you just have a range of numbered grays, you run into two main problems:

  • Teammates will use different grays at different times. It’s even difficult to stay internally consistent when working on a project over a long period of time

  • At least in my experience, it’s hard to switch into dark mode and maintain the relative contrast differences that make your UI work. There’s something fundamentally different about how contrast appears when you’re in dark mode that makes this trickier that it seems on the surface

• Aesthetics

  • I always see these “tone on tone” interfaces that look amazing, but then I go look at their color palette, and it looks like Tailwind. This is a problem for the reasons stated above

• Other color systems

  • I like the fundamental idea of Material 3’s system where colors come in “sets” that are intended to be used with each other. This limits the scope of the contrast agreement” problem stated earlier. On the whole though, I find it too complicated to easily understand and use. I’ve studied it multiple times, and still don’t get it. Even my simplified version has proved hard to grasp by other designers who’ve been provided with the Tarka design system (Anne, Framework)