BIG
Design

What are design tokens?

BIG linden / Support Docs / What are design tokens?
Last edit: January 20, 2023
(7 days ago)

Design

What are design tokens?

Q:

In a recent call, a designer kept mentioning the “design tokens”. We’re not clear on what these are, could you please provide some information about this new concept for our team?

Issue

The client would like to learn about Design Tokens.

Possible solution

What are “Design Tokens”?

Design Tokens are a set of discrete elements of style used to create consistent visual design across platforms.

We talk a lot about design systems and design tokens.

Design tokens typically consist of palettes such as typography, spacing units, color and other components that designers use to ensure uniformity in their creations.

“The Design System’s visual design is based on consistent palettes of typography, spacing units, color, and other discrete elements of style we call design tokens.”

US WEB DESIGN SYSTEM, part of the Digital.gov team

By limiting the range available for each element and providing only specifically chosen options within those parameters, communication between designer and developer becomes easier while also increasing efficiency.

“Design system tokens are the style values of UI elements such as color, typography, spacing, shadows, etc., that are used across products and capable of being converted to a format for any platform (web, mobile, desktop). Tokens are building blocks of the design system—think of them as sub atoms, the smallest pieces of style values that allow designers to create styles for a product.”

Adobe design team, read more on xd.adobe.com

This system results in distinct sets like hues ranging from white through black with five curated selections along the way rather than all possibilities offered by RGB color space or unlimited font size variations.

Additional reading

None at this time.

More articles about Design

More articles related to .

Capabilities related to Design: