Color ramp for design

[arrocke]

Andrew provided us with this design concept that we can use to build color ranges for use in tailwind.

We'll also need to add a neutral color range for text and borders as well as colors for errors and warnings.

[arrocke]

Here is an example color set for tailwind colors from the color palette Andrew sent me. The starred colors are the brand colors. I also took the default red (for errors) and stone (for text and borders) colors from the tailwind color set. @Pertempto Let me know if you have any feedback on this, otherwise I'll start working on building out the site design system using these colors. We can always add a new color swatch in the future if needed.

[Pertempto]

I like it!

[Pertempto]

For the palette names in Tailwind, can we avoid using the color names, and instead use semantic names? I find it much more useful to use bg-primary-500 than bg-blue-500.

[arrocke]

We've explored color systems like this at work, and I've found that I'm not a huge fan of primary, secondary, etc labels because I've found that often you still end up needing to think about the color behind the label to make a decision. For what it's worth, the official tailwind recommendation is to not alias color names.

Can you say more about what kind of problems using a semantic label solves?