A frontend developer pinged me on Slack last Thursday. He was trying to style a custom dropdown component for our new dashboard. He just needed the active state border colour. It should have been a ten-second job. Instead he was completely stuck. He was writing a complex helper function to traverse a deeply nested JSON object. Our token pipeline had spit out a massive file. It looked something like this.

{ "color" : { "brand" : { "primary" : { "500" : { "value" : "#0052CC" , "type" : "color" } } } } }

Enter fullscreen mode

Exit fullscreen mode

He had to import this JSON file into his React component. Then he had to map the keys manually. Then he had to pass it down via a styled component prop. It took him twenty minutes just to colour a simple border. This happens every single day in frontend teams. We have convinced ourselves that design tokens must be abstract JSON files. We think we need complex build tools just to get colours onto a screen.…