Design tokens and assets
Learn more about the most common types of design decisions you can define and use across your UIs. Consider those design tokens and assets as the fuel of your Design API.
What are design tokens and assets?
Design tokens
Design tokens are names used to express design decisions in your organization's design language. Those names are meant to be used and understood by humans like you and us. Design decisions can be a color, a typeface, a border-radius, an icon, a font size, a gradient, or even an animation duration.
"Design tokens are a language for communicating intent between disparate parts of a system."
Ethan Marcotte, Design-ish systems ↗︎
If you're familiar with the Atomic Design taxonomy, design tokens are what atoms are made of.
Example of a button component composed of many design tokens:
As you can see, design tokens can represent many types of design decisions.
Resources
Article
Introduction to design tokens, by Louis Chenais ↗︎
Learn about what design tokens are and how they can help you scale your branding with confidence.
Design Assets
Assets are all the design decisions that can be stored within a file. Specify supports the following asset types:
- Fonts aka "font files" your text styles are inherently using (
.otf,.ttf,.woff,.woff2) - Vector images for icons or illustrations (
.svgand.pdf) - Bitmaps for "basic images" (
.png,.jpeg,.webp,.avif...)
Design tokens
I this section, we introduce the most common type of design tokens and how you can benefit from them.
Template
Figma Template: Design tokens and assets ↗︎
This Figma template helps you index your design tokens and assets compatible with Specify.
Color
Colors have meaning and support the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements in your UI. Among all your design token types, color is surely one of the most important ones.
"Color themes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another."
Resources
Text Style
Text styles or typography helps your UI be usable. They create balance, hierarchy and structure for your content. Some say that "Web is 95% typography". To push this even further let's say UI are 95% typography. In other words, pay a great deal of attention to typography.
A text style is composed of several child design decisions that could be considered as single design tokens like:
- a line-height
- a font size
- a letter spacing
- a font name
Text styles are considered as composite design tokens because they are composed of several design tokens.
"Good typography often goes unnoticed because it just makes sense. Elements of good typography include consistency, hierarchy, and alignment."
Resources
Measurement
Measurement or dimension design tokens help you define the size values. You can define from those values different design decisions like a spacing scale, internal or external margins...
"Consistent spacing creates visual balance that makes the user interface (UI) easier for merchants to scan. Apply consistent spacing to improve the quality of the UI."
Visual harmony will naturally emerge after structuring a spacing scale and a typography scale that are complementary.
Duration
Represents the length of time in milliseconds an animation or animation cycle takes to complete, such as 200 milliseconds. The type property must be set to the string "duration".
Shadow
Shadows help you communicate components elevation in your UIs. Popular variations and names include box-shadow, drop shadow, and many more.
Use shadows to bring the content closer to users.
Shadow tokens help with communicating component elevation along z-axis.
Blur
Blur is particularly useful when you stack multiple objects on top of each other. The highest most levitating object also has a shadow with the highest blur value.
Offset
The x and y offset of your shadow depend on where you put the light source within your UI design. Depending on the height of your light source, the offset can increase and decrease. Generally, a light source that is more "on top" of your UI elements means a smaller offset. The offset is a Measurement design token.
Color
In nature, shadows aren't black. They darken the shadow surface. It means that the color of your shadows shouldn't be black and would follow the colors of the other elements in your design system.
Resources
Border
A border is a line surrounding a UI element. According to your target platform capabilities, you can define the border to go inside (inner border), outside (outer border), or between them (center).
Border styles
The border can be customized to have different widths and can be a dashed or dotted line. We can also fill it with both a color and a gradient.
Gradient
A gradient is the gradual blending from one color to another. It enables the designer to almost create a new color. It makes objects stand out by adding a new dimension to the design and adding realism to the object. In simple terms, gradients add depth.
We're seeing gradients more and more — including in branding, illustration, typography and UI. Gradients make more colors available because they create more color tones. Gradients are eye-catching and memorable because they're colorful and playful and make for visuals we're not used to seeing.
Resources
What about other types of design tokens?
We previously listed all the main types of design tokens. We could have included other types like opacity, breakpoint or even depth (z-axis stack position) but we didn't feel it was needed to be honest. The most important thing to remember is that design tokens are at the heart of every component used in your UIs.
Define and structure them with care and the rest will follow.
Assets
Fonts
Fonts are files containing typefaces used by your text styles.
At Specify, we use two typefaces: Inter and Fira Code.
We have the following fonts:
- FiraCode-Medium
- Inter-Bold
- Inter-Medium
- Inter-Regular
- Inter-SemiBold
Vectors
By "vectors" we mean vector images (e.g., SVG and PDF files). You can use them for 2 main purposes: iconography and illustration. In the following section we will only focus on icons.
Icons act a visual aids to help users complete tasks. We advise you to have an harmonic set of icons you can use to draw attention to specific actions.
Icons are visual representations of commands, devices, directories, or common actions. Icons should be used in a purposeful manner to maximize comprehension and reduce cognitive load when you need to call attention to a particular action, command, or section. Use them infrequently — if you're questioning an icon's use, it probably doesn't need to be used at all.
When to use icons
Icons are powerful visual helpers and should be used with care. Overuse quickly results in user interfaces that are visually overwhelming or distracting.
Icons are commonly used:
- In primary navigation
- In page headers and section titles
- In banners to bring attention to a specific theme, such as an announcement or an error
- Inline with text to add clarity
- To direct attention to something the merchant can take action on
Resources
Bitmaps
Bitmaps are raster images you can use in many contexts. They're basically any image you can display in a UI that is a .png, .jpeg, .webp, .avif...
Resources
Summary
Amost done! You just learned more about the most common types of design decisions you can define and use across your UIs. Consider design tokens and assets as the fuel of your Design API.
Now, let's see how we can collect, store, and distribute them across your design system.
Template
Figma Template: Design tokens and assets ↗︎
This Figma template helps you index your design tokens and assets compatible with Specify.