Token Types in Tokens Studio
The type
is the anatomic part of a Design Token that defines the category of design property the decision belongs to, or when it can be applied.
You might recall from our Intro to Design Tokens Guide that the type
determines what Values are acceptable.

color
as the Token Type.Tokens Studio (TS) supports 24 unique Token Types.
Before you jump into the technical docs for each Token Type, you may want to review the common terms and concepts below that will help strengthen your knowledge.
Select the Token Type card below to jump to its guide.

Border Width
Unofficial Token converted to a Dimension Token.

Sizing
Unofficial Token converted to a Dimension Token.

Spacing
Unofficial Token converted to a Dimension Token.
Common Terms
These terms are not the only way to describe Token Types; they are the labels the Tokens Studio team uses for simplicity across our documentation.
If your team uses different descriptive terms, that's totally okay!
Official
Official Token Types are listed in the W3C Design Tokens Community Group (DTCG) Specifications for Design Tokens
For example, Dimension Token is an official type.
Unofficial
Unofficial Token Types were created by Tokens Studio before the W3C DTCG Specs defined an alternate Token Type.
For example, Border Width Token is an unofficial type defined by the spec as a Dimension Token.
Tokens Studio will continue to support unofficial Token Types for now. We've already built a conversion into our SD-transforms script; more details are below ↓.
Composite
When elements are styled by composing many related design decisions together, they are combined into a Composite Token Type.
For example, a Typography Token is composed of 9 independent text-related properties.
Property
Each design decision that is a part of the Composite Token is referred to as a property of their respective Composite Token in our guides.
For example, fontFamily
and fontWeight
are unofficial Tokens we created to independently define the properties that Compose a typography
Token.
They may be included in the DTCG Specifications in the future, in which case they would be official property Tokens.
Compatible
A Token Type with properties that is compatible with another Token Type.
For example, the dimension
Token Type is compatible with fontSize
when referenced within a typography
Composite Token.
Compatible Token Types are visible by default when defining Token Values which reference another Token in the plugin. This becomes important when creating and maintaining Tokens in the plugin.
→ Read the Token Values with References guide for more details
Token Values with ReferencesWorking with Token Types
In the Plugin, you select which Type of Token you'd like to create using a no-code interface. Under the hood, Tokens Studio will write the Token as properly formatted JSON files so they can be used in code.

You might recall that Design Tokens are platform agnostic, written in a common language so they can shared across different tools and technologies.
This means that engineers working with Design Tokens have to transform them from JSON files into whatever specific programming needs they have before they can work with them.

Transforming Tokens
Engineers typically transform Tokens used in code with Style Dictionary, which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: @Tokens-studio/sd-transforms, an npm package that prepares Tokens for Style Dictionary.
Some Tokens we create in Tokens Studio (TS) have subtle differences in how the Token type
is written compared to the DTCG specifications. In the case of unofficial Token Types, which don't exist in the DTCG spec, we have to transform the TS Type into something Style Dictionary is prepared to work with.
The SD-Transforms package's preprocessor will transform the TS Token Type to the Style Dictionary Type, as described in the table below.
→ SD-Transforms Read-Me Doc, Using the preprocessor
Available Token Types
Each Token Type has unique properties and specifications, which are documented in detail. Select the common name of the Token Type in the table below to access its docs.
Resources
Mentioned in this doc:
SD-Transforms - Read Me
Style Dictionary - https://styledictionary.com/
Design Tokens Community Group - W3C Draft
Design Tokens Community Group - 8.0 Token Types
Community resources:
None yet!
💡 Something to share? Submit it here!
Known issues and bugs
Tokens Studio Plugin GitHub - Open issues for Transforming Token Types
Tokens Studio Plugin GitHub - Open issues for Token Type Support
Remove composition tokens #2800
🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our community Slack, submit it on our feedback tool, or send us an email [email protected]
Requests, roadmap and changelog
Expand Token Types - Feature request
💌 Visit https://feedback.tokens.studio/ to contribute or subscribe to updates.

Last updated
Was this helpful?