Building scalable color variable foundations for UI

Design Tokens and CSS Variables are the foundation of any scalable design system. Design Tokens can describe color, spacing, and effects such as radius and elevation. They are used when elements are configured for development. Tokens add layers of abstraction that makes it possible to set theming and make it easier to apply changes across a system. Additionally, CSS variables introduces a dynamic runtime layer making it easier for users to apply theming changes in the app instead of during compilation.

Token Structure

Design tokens are only as useful as their naming conventions. Can a design or engineer intuit the role the token plays in the system? I've found it valuable to add information such as related system, and concept (color, radius, type, etc,) palette, and tonals for a global tokens.

Token Naming

When creating token names, once you are working past primitive values, it is important not to get too specific with the token name. In this case, we are opting to use "primary" as the token name rather than something like "blue." This is useful because the primary color may later change, but the token can stay the same.

Global Tokens

Once primitives are established and their global tokens defined, there will b a range of tonals to accomodate any components configuration needs. These global tokens serve as the first layer of abstraction.

Alias Tokens

A layer of abstraction over global tokens is the alias tokens. Alias tokens help organize our tokens down further. From Alias tokens, theming can be supported. Light and Dark mode are made possible through CSS variables. Light and Dark mode alias tokens can be specified.

Component Specific Tokens

Component specific tokens are technically unnecessary, but can be useful especially for designers. The tokens add a layer of customization that allows designers and engineers to change an element's styling as needed without affecting other elements across the system.

An element as simple as a button can be configured with a number of design tokens. In the instance below, background color, text color, and border radius are all set with component specific design tokens.

The various attributes of buttons can be configured to utilize different design tokens. Things like background color, text color, elevation, and border radius can be set to show slight changes in the elements that make them more interactive or intuitive to use.

Since theming was defined at the alias token level, light mode and dark mode are now supported for our button. The component specific tokens stay the same, while the alias tokens' values can be switched.