If you’ve worked on design systems at all, more than likely you’ve heard of design tokens. If you haven’t heard of design tokens, they are the essence of what makes your system feel unique, often stored as variables in some sort of tech-agnostic format like JSON.

Even this site uses a form of design tokens in the way of CSS custom properties.

What you don’t often hear about are tokens outside the realm of visual style; fonts, colors, and brand. However, by pushing your tokens just a bit further, you may be able to get some of your team’s core UX principles standardized universally. Let’s talk about uncommon design tokens.

Motion

We’ll start a bit more obvious. Animation timing, types, easing methods, and paths are all aspects of motion that could be targeted for tokens. Your system may have default speeds for motion (slow, default, fast), and a custom scale for incrementing motion between those states. For example, if your base motion speed is 1 second, you may have a scale that increases or decreases your speeds dynamically by 1.5, thereby making your fast speed .5 seconds, and your slow speed at 2 seconds.

In terms of personality, easing may reinforce your brand or detract from it. Is your brand serious? Smooth easing may be a large part of your strategy. Is it for kids? Elastic-type animations may be more your speed. In any case, setting your default easing as a token makes it dead-simple to change anywhere. Same with paths. Does moving in a straight line from point A to point B always make sense, or are there times you may want a piece of UI to swing out gracefully? Set to a token in either case.

Finally, motion types for opening items, moving between screens, and so on are another excellent candidate for tokens. Do they crossfade? Reveal? Wipe? Rotate like a cube? Slide in and out like cards? Put your common methods as tokens.

Layout

Moving into the realm of the less obvious, let’s talk about layout. Why not be able to manage your content density in a single place or use a density scale to create your defaults?

Layout tokens for where your primary action placement ends up may also be another great candidate. As you may or may not know, Windows and Mac both have a series of primary and secondary actions. However, where each OS places those actions is very different. Why not use a token to set that order universally? Or why not do the same sort of thing with the primary navigation location?

As for readability and accessibility, why not set a token for maximum readability width? Something like 60ch may be just the right thing to help you pass accessibility standards.

Design

Consider setting tokens for perspective. What does your UI’s lowest depth look like? It’s middle ground? It’s foreground? Both Android and iOS use perspective management, but they handle it very differently (shadows versus blur and opacity).

And while you’re at it, why not set a light-direction token for managing shadow angle, gradient angle, and border-color management?

General UX Principles

Let’s standardize on known UX standards. People hating waiting for content to load. Why not set a design token for maximum wait time or server timeouts or set a maximum delay or animation time based on Doherty’s Threshold?

Or an initial set of list items shown of entries based on Miller’s Law?

Or perhaps your organization has its own internal UX rules?
Turn ‘em into tokens!

User Preferences

And finally, when it comes to user preferences, why not set tokens for managing media weight that affects dimensions, DPI, or audio type when a user prefers-reduced-data?

Finally, don’t forget to set fallbacks for your motion tokens when a user sets prefers-reduced-motion, perspective tokens for prefers-reduced-transparency, or color tokens for prefers-contrast, forced-colors, or prefers-color-scheme.

Conclusion

Design tokens are one of the most powerful tools in your utility belt as a designer. Think outside the box and get creative!