A color system can be created by first picking a suitable color palette to fit the design needs. Once a palette is selected, it needs to be transformed into various color scales to accommodate different design elements. Finally, these color scales are converted into styles and variables that can be integrated into the development process, particularly when using frameworks like Tailwind. This method provides a structured approach for effectively implementing colors in a design system while considering existing constraints.
I found a lot of tutorials on generating color styles, using a plugin or borrowing from an existing design system, but almost nothing that walks you through how to do it from scratch manually.
After a few failed attempts and creating far too many tiny color swatches, I thought I'd share my not-so-terrible final workflow.
The workflow consists of three key steps: how to pick a color palette from scratch, how to turn it into color scales, and how to convert those into styles and variables.
Collection
[
|
...
]