Nicholas Kloss — UX Designer

What are tokens?

Tokens are visual sub-atoms of a design system, containing UI data such as colors, border width, elevation and more.

The key benefit of design tokens? They facilitate cross-disciplinary collaboration. Tokens ensure every element of the same type is consistent across the entire design network.

How do tokens help?

• Provide and maintain consistency across all products and platforms.

• Increase efficiency by referencing common patterns and usages, simplifying hand-off and develpment process.

• Centralize changes and updates in one place, improving flexibility and automation.

• Design tokens can become readable, intentional, and traceable decisions within a design system used by many products.

Problems & Challenges

• Inconsistent brand experience across platforms.

• Integration of Optum brand under UHC umbrella creates complexity with component changes.

• All values are hardcoded, making it difficult to implement changes.

• Too much time working out simple communication across various channels and teams.

Based on research...

After conducting an exploration and mapping, the team decided to break down tokens into three tiers:

Core tier
Semantic tier
Component tier

Core Tokens

These are the base elements of the design. Within this tier are housed raw values

Semantic Tokens

Because Core tokens don't necessarily bridge the gap between naming and use, Semantic tokens are the most valuable. They provide designers with knowledge of which option to apply in a particular context.

Component Tokens

These are specific representations, often derived from an alias, used to evolve design elements.

Naming tokens

Naming tokens is one of the most crucial part of the process. Every token must have a unique name specific to it's type.

Effective token names enhance and sustain a team’s shared understanding of visual style through design, code, and other interdisciplinary handoffs.

The team approached our naming convention with a customized variation based on Nathan Curtis' token naming.

We also kept in mind the following principles:

Be descript: Use specific and informative names, reflecting the tokens purpose and value.

Use context: Include context about the token's usage, like the component it applies or its role in the design system.

Be brief: Use brief and memorable names — avoid too long or complicated.

Be consistent: Use the same naming scheme throughout the design system — this involves employing comparable tokens with the same prefixes, separators, and word order.

Future think: Consider how the token names will scale as the design system expands — avoid using names specific to a project or component, if possible.

How it works

1. Identifying Elements

After we created naming conventions and got team approval, I started working on token documentation in Figma.

We then synced with a design system developer who created design system packages — including compiled tokens, code snippets, and docs.

When building out components, our team utilized some steps to ensure tokens were being applied correctly. The first step is identifying a components elements and how it behaves.

How it works

2. Look for options

After identifying the element and it's interactivity, we look at what options are available. For that, we look at each bucket:

Interactive - This is the main bucket for all interactive elements. It houses "Standards" and "Concepts".

Standards - The go-to bucket for any new designs and components.

Concepts - The bucket representing isolated decisions accounting for a specific component.

How it works

3. Select Option

Select the option best fitting the component and it's behavior.

Depending on the complexity of the component, we understood the complexity of the token would be as well.

Abyss Design System Tokens

Integrating a token strategy into UHC's Abyss design system, ensuring brand consistency and streamlining development changes.

Role

Year

Tools

Spectrum, Adobe’s Design System says...

"Design tokens are design decisions, represented as data, that ensure systematically unified and cohesive product experiences."

What are tokens?

How do tokens help?

• Provide and maintain consistency across all products and platforms.

• Increase efficiency by referencing common patterns and usages, simplifying hand-off and develpment process.

• Centralize changes and updates in one place, improving flexibility and automation.

• Design tokens can become readable, intentional, and traceable decisions within a design system used by many products.

Problems & Challenges

• Inconsistent brand experience across platforms.

• Integration of Optum brand under UHC umbrella creates complexity with component changes.

• All values are hardcoded, making it difficult to implement changes.

• Too much time working out simple communication across various channels and teams.

Based on research...

Core Tokens

Semantic Tokens

Component Tokens

Naming tokens

Be descript: Use specific and informative names, reflecting the tokens purpose and value.

Use context: Include context about the token's usage, like the component it applies or its role in the design system.

Be brief: Use brief and memorable names — avoid too long or complicated.

Be consistent: Use the same naming scheme throughout the design system — this involves employing comparable tokens with the same prefixes, separators, and word order.

Future think: Consider how the token names will scale as the design system expands — avoid using names specific to a project or component, if possible.

How it works

1. Identifying Elements

How it works

2. Look for options

How it works

3. Select Option

What we achieved with the token system...

• Streamlined the delivery process between design and development.

• Saved massive time, avoiding manual changes.

• Reduced errors and increased design automation.

• Aligned brand styles across all platforms.

Previous

Next