WORK STORY / 03
Consolidate scattered color values into an executable Design Token System
Context
The project had accumulated many hard-coded colors scattered across components and styles, with multiple values representing the same visual meaning. This not only made design changes difficult to synchronize; it also made it easy for AI or engineers to copy existing implementations into new screens, allowing color debt to keep spreading.
My Decision & Action
I audited every color source in the project, consolidated reusable colors into Design Tokens, and generated and managed them consistently through a custom Build Plugin. I then connected the rules to a lint gate that directly blocked new hard-coded hex, rgb, hsl, and named colors, requiring new code to use official tokens.
Outcome
Hard-coded color values fell from 2,047 to 213, a reduction of about 90%, while Design Tokens expanded from 47 to 190. Color changed from an implementation detail scattered throughout the code into design infrastructure with a single source that could be searched, verified, and continuously protected by tooling.
Reflection
The truly difficult part of a design system is not creating tokens, but preventing the system from degrading again. Whenever a rule can be determined unambiguously by a machine, tooling should stop violations before they enter the codebase.