Exploring Style Dictionary with Cursor
When timelines don’t align and your engineering team is juggling other priorities, it’s easy to get stuck waiting for bandwidth. I found myself in exactly that spot. With our initial design token structure in place, and the theming model mapped out in Figma, I was anxious to test if the architecture would hold up once transformed through Style Dictionary, across modes, brands, and output formats.
Rather than wait for resources to free up, I decided to explore it myself.
Thinking in Triangular Numbers
I am intrigued by alternatives to 4px spacing in design systems. It’s a move that resonates with a lot of us who are tired of arbitrary number sequences.
But while Fibonacci’s got style, I’ve been diving into something a little less wild: triangular numbers.
Routing Tokens Across Modes
As design systems scale to support multiple brands, surfaces, and themes, our token and variable architecture needs to account for more than just light and dark. We often need multiple layers of context, such as inverse surfaces, accessibility contrast, marketing versus product UI, or brand-specific rules. This is where I apply a method I call routing across modes.