Building a Design System From Scratch: Lessons From My First Attempt
My first design system was a mess of inconsistent tokens and unused components. Here is from rebuilding it properly. My first attempt at a design system was a Figma file with forty two colors, eighteen button variants, and zero documentation. It was technically a system in that things were collected in one place, but no one could use it without asking me questions. The second attempt was better but over engineered, with a token naming scheme so complex that developers needed a glossary to understand it. The third attempt, the one I still use and maintain, is the one I want to talk about. It works because it is small, well documented, and treats consistency as a process rather than a deliverable. Start With the Smallest Possible Token Set The mistake I made in my first system was trying to anticipate every need. I created color tokens for primary, secondary, tertiary, quaternary, success, warning, error, info, and twelve shades of each. The result was a color palette with over a hundred tokens that no one could memorize. Developers picked colors by scrolling through the list and choosing whichever looked about right. More guides are on the Spark Blog.