Last updated
Was this helpful?
Last updated
Was this helpful?
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 that the type determines what Values are acceptable.
Tokens Studio (TS) supports 24 unique Token Types.
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
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.
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 fontWeightare 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.
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.
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.
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.
✓
Can be a Property of border, shadow
color
color
color
✓
Composite
typography
typography
typography
✓
Property of typography
fontFamilies and fontFamily
fontFamily
fontFamily
✓
Property of typography
fontWeights and fontWeight
fontWeight
fontWeight
✓
Property of typography
fontSizes and fontSize
fontSize
fontSize
✓
Property of typography
lineHeights and lineHeight
lineHeight
NA
✓
Property of typography
letterSpacing
dimension
dimension
X
Property of typography (in TS, not DTCG)
paragraphSpacing
dimension
dimension
X
Property of typography (in TS, not DTCG)
textCase
textCase
NA
X
Property of typography (in TS, not DTCG)
textDecoration
textDecoration
NA
✓
Can be a Property of border, shadow, typography
dimension
dimension
dimension
✓
number
number
number
✓
Composite
border
border
border
✓
Composite
boxShadow
shadow
shadow
X
borderRadius
dimension
dimension
X
borderWidth
dimension
dimension
X
spacing
dimension
dimension
X
sizing
dimension
dimension
X
asset
asset
NA
X
boolean
boolean
NA
X
text
content
NA
X
other
other
NA
X
opacity
opacity
NA
X
composition
each type in the composition is added individually
NA
Mentioned in this doc:
None yet!
Before you jump into the technical docs for each Token Type, you may want to review the that will help strengthen your knowledge.
Official Token Types are listed in the
Tokens Studio will continue to support unofficial Token Types for now. We've already built a conversion into our SD-transforms script; .
→
SD-Transforms -
Style Dictionary -
Design Tokens Community Group -
Design Tokens Community Group -
Tokens Studio Plugin GitHub -
Tokens Studio Plugin GitHub -
Remove composition tokens
Expand Token Types -
🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our , , or send us an email support@tokens.studio
💡 Something to share?
coloras the Token Type.
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.
💌 Visit to contribute or subscribe to updates.
Select the Token Type card below to jump to its guide.
→ Read the Token Values with References guide for more details
Engineers typically transform Tokens used in code with , which is tool-agnostic. Tokens coming from Tokens Studio require an additional step: , an npm package that prepares Tokens for Style Dictionary.
