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.
