Article

In our previous posts in this series, we’ve talked about the benefits of design systems and how important it is to have a clear adoption strategy. Now in our third post, we’ll dig a little deeper into implementation and look at how design tokens can be used to provide flexibility to your design system, while at the same time ensuring consistency across all teams, platforms, and channels.

What are Design Tokens?

If you’ve been following our journal posts over the years, you’ll know that we’re proponents of composable, headless technology. But for an organization to get the most out of the composable technology they’ve invested in, they need to embrace a composable approach to design. That’s where design tokens come in. 

Design tokens are standardized, reusable design variables such as colors, typography, spacing, and component properties. They’re stored in a structured format—JavaScript Object Notation, (JSON,) being the most common—but they’re also platform-agnostic, making them flexible and able to adapt to ongoing changes to your tech stack. 

Design tokens come in three levels of complexity:

• Primitive tokens, the most basic, create a palette that reflects brand identity. For example, the tokens that define a brand’s primary and secondary colors are primitive.

• Semantic tokens define the role and application of primitive tokens. For example, you might have a variety of primitive tokens for different brand colors. A semantic token could then be created to define which of these colors could be used for text, backgrounds, or other applications.  

• Component tokens build on semantic and primitive tokens to clearly define the parameters of specific components like buttons, cards, or modals. 

Making Life Simpler

When it comes to design, there’s always a three-way balancing act between marketing teams, designers, and developers. Designers want to protect the brand’s visual identity and maintain control over the look and feel of digital properties. Marketing teams want to be able to move quickly, experiment with different ideas, and have some control over how things look. Developers want to maximize efficiency and focus on business-critical tasks. Design tokens, as part of a larger design system, help all three parties. Imagine that you have a button. Its attributes–corner radius, padding, color, hover state, etc–have been clearly defined by a designer and hard-coded by a developer. If someone in marketing wants to use a different variation of that button, they need the designer to provide input and a developer to make the changes. Obviously, this slows the process down and creates a disincentive for experimentation. 

Imagine the same scenario, but your organization has invested in developing a robust design system that utilizes design tokens. Now, marketers have more flexibility because there are pre-defined variables they can choose from, giving them a modicum of control. Those variables, however, aren’t chosen at random; they’re picked by the design team to ensure that whatever marketing does, it stays within brand governance. And, once the design tokens have been wired up, designers can tweak variables without needing further development time and resources. 

With design tokens, marketing teams can build pages using a visual editor like Contentful Studio, experiment with different designs and color schemes, and deploy them, all while staying within brand guidelines and without taxing development resources. 

Powering Automation

Another big benefit of using design tokens is that they allow for increased automation. The larger an organization's digital presence the harder it can be to consistently make changes across all platforms. Automating this process with design tokens can help ensure consistency while drastically reducing the amount of developer time involved. 

One way this can be done is by integrating design tokens into Continuous Integration/Continuous Deployment (CI/CD) pipelines. A CI/CD pipeline can include automated scripts or tools–such as Style Dictionary–that convert design tokens into platform-specific formats like CSS variables, XML, or others. 

For example, let's say your organization wants to update the color scheme for dark mode on its app and website. Rather than having to manually update a multitude of different variables across various platforms, you can instead update the design token repository to reflect new dark-mode values. Your CI/CD pipeline can then automatically convert those tokens into the correct format and write the necessary code. What once was a big, time-consuming undertaking is now relatively quick and easy. 

Tech Stack Considerations

Design tokens are platform-agnostic, but you still need the right tech stack to take advantage of them. We’re advocates of embracing fully headless, composable architecture, but we also understand that not every organization can make that leap all at once. At the minimum, however, you will need a modern CMS like those offered by Contentful, Uniform, or Builder to be able to truly take advantage of the benefits design tokens offer. 

What these CMSs provide, and what the industry as a whole is moving towards, are visual editing experiences that allow marketing teams to design, personalize, and experiment without heavy reliance on design and development teams. By underpinning these with design tokens, so that governance is baked into the visual editor, marketers can make changes to their hearts content while ensuring there are guardrails in place to prevent them straying from brand guidelines. 

As we said in our first post, design systems allow product teams to focus their creative energy on addressing new challenges rather than rehashing old ones, minimizing inefficiencies, and staying competitive in a digital industry with increasing speed-to-market demands. Design tokens go one step further, creating a composable design framework that ensures your design system is always being correctly implemented. 

Interested in learning how we can help you develop a design system or incorporate design tokens into your digital presence? Let's chat!