130 Shades of Gray: Building a Design Token Pipeline That Killed Our Color Chaos

The Codebase That Had 130 Grays I spent four years working in a production codebase that had 130 gray variables. I actually counted them once. Someone needs a border color, creates $gray-v1 . Someone else needs a slightly darker background, doesn't find the right gray in the file — or doesn't bother looking — creates $gray-v2 . Four years of that across 5 product modules and this is what you get: $gray-v12 : #6B7280 ; $gray-v13 : #6E7581 ; $gray-v14 : #707682 ; $gray-v38 : #4A5163 ; $gray-v39 : #4B5264 ; $gray-v47 : #5C6370 ; $gray-v89 : #3D4450 ; Seven variables. Can you tell them apart by hex value? We couldn't either. $gray-v38 and $gray-v39 differ by one hex digit. They were used on different screens for the same purpose — disabled text. Created six months apart by two different developers who had no way of knowing the other one existed. And the grays weren't even the worst part — the utility classes were. .FontSm14GrayV52 { font-size : 14px ; color : $gray-v52 ; } .FontRg16GrayV23