Dynamic Design Tokens

While building Arcade, we're discovering so much about design tokens that go against conventional understanding.

One of our newest revelations is that tokens aren't static. What does that mean? Today, most people would simplify design tokens by describing them as a key-value pair. A name and a value. However, we created a way for a single design token to have multiple values.

Before digging in to that concept, we need to address the idea that design token = key-value pair. To me, this is wrong. Instead, we've been thinking of a design token as a big object of instructions that include how to transform the token, the context of the decisions behind it, various meta information, and more.

This big object of instructions is the design token. Those CSS, SASS, iOS, whatever variables that get outputted are exactly that: an output of a design token. Not a design token itself. In short, design tokens only exist in a pre-processed state at the source of truth.

So within this big object of instructions, we can now specify a field for dynamic values. This means that the value of a token can change depending on certain circumstances, like what platform we're rendering. Dynamic values gives huge amounts of power in enabling tokens to support multiple platforms.

For example if we render CSS, we can use sizes in rems or px units. If we export to Android however, we can use values in dp, sp, or whatever we see fit.

This puts so much control in the hands of a designer or developer. There's no implicit transformation happening if you don't want it to. Everything can be explicit if you need it to be. No more arbitrary units that might not fit your needs.

It's worth noting that this is only possible with a custom engine. If Arcade relied on Style Dictionary or Theo for our transforming, we'd be very limited with what kind of operations and optimizations we can perform.

The more we work on Arcade, the more we understand the depth of what a design token is. Each day it becomes more and more of a living entity that changes over time.

Most of all though, we're excited to see how people might use these concepts in a way we never imagined. For us, it's all about empowering the designer and developer.