Color

A color token defines a color used in your design system. It can be defined as a HEX, RGB, or HSB value with an optional opacity. These tokens are be used wherever you want to apply a color in your design system — for example, as a property of a component — and can also be used as a part of other token definitions (see token referencing).
A color token value is the color itself, regardless of format, so multiple formats can be used and displayed in your design system for different purposes (i.e. HEX and RGB).
Example
Key |
Value |
---|---|
blue-50 |
#4589FF |
Import from Figma.
Import from Tokens Studio.
Typography

Typography tokens contain the information for an entire font style. They are a bit more complex than other tokens, but they can be imported directly from your design editor.
Required values:
- font-family, font-weight, size, and line-height
Optional values (if these values are not specified, the default will be used):
- paragraph-spacing, paragraph-indent, letter-spacing, case (transform), and decoration
Import from Figma.
Import from Tokens Studio.
Font

A font token defines a font family in your design system, with no other design attributes. To learn how it can be used as a part of typography tokens, see Creating token Aliases.
Example
Key |
Value |
---|---|
default-system-font |
SF Pro |
Import from Tokens Studio.
Gradient

A gradient token defines a gradient within your design system.
Example
Key |
Value |
---|---|
overlay-gradient |
radial-gradient(#f69d3c, #3f87a6) |
Import from Figma.
Import from Tokens Studio.
Border

A border token defines a border within your design system. The values required are color, width and style. The color value can optionally refer to a color token, see token referencing for more information.
Example
Key |
Value |
---|---|
accent-border-color |
2px solid blue |
Import from Tokens Studio.
Shadow

Shadow tokens have a type (inner or drop) and can consist of color, x, y, blur, and spread. The color value can optionally refer to a color token, see token referencing for more information.
Example
Key |
Value |
---|---|
tile-shadow-light |
2px 2px 2px 1px rgba(0, 0, 0, 0.2) |
Import from Figma.
Import from Tokens Studio.
Blur

Blur tokens have a type (layer or background), and a size (px).
Example
Key |
Value |
---|---|
blur-background-dark |
Layer blur, 8px |
Import from Figma.
Radius

A radius token is used to define a radius in your design system. The value of a radius token must be a number.
Example
Key |
Value (px) |
---|---|
tile-corner-lg |
10 |
Import from Tokens Studio.
Dimension

Dimension (previously called Measure) tokens are used to define a measurement to be included in your design system. They have no set format (other than a numeric value) and can be used to specify for spacing, size, animation times, etc.
Types of dimension tokens include:
- Border radius -> Defines the border radius or multiple border radii.
- Border width -> Defines the border width of a layer.
- Duration -> Defines a set duration (of an interaction, animation, etc.)
- Font size -> Defines the size of a font.
- Generic dimension -> A generic token that can be used to define other values and groups.
- Letter spacing -> Defines the spacing between letters.
- Line height -> Defines the amount of space between lines in a block of text.
- Opacity -> Defines the percentage of transparency applied to an object on the UI.
- Paragraph spacing ->
- Size -> Defines the size on an object on the UI.
- Space -> Defines horizontal and vertical spacing.
- Z-index -> Defines an item's position in the stacking order.
Example
Key |
Value (ms) |
---|---|
duration-500 |
250 |
Import from Tokens Studio, except Duration and Z index tokens.
Options tokens
String tokens are used for UI labels or can be assigned to component properties.
Types of option tokens include:
- Text decoration -> Defines decoration applied to text, like underline or strikethrough.
- Text case-> Defines the case in which text is displayed, like upper or camel case.
- Visibility -> Defines whether an object is visible or hidden.
Import from Tokens Studio.
String

String tokens are used for UI labels or can be assigned to component properties.
Types of string tokens include:
- Font family -> Defines a font family.
- Font weight -> Defines the weight or weights of a particular font, for example, semi bold.
- Generic string -> Can be used to define other values or groups if desired.
- Product copy -> Defines a string of product copy.
Example
Key |
Value |
---|---|
name-input-label |
Full name |
Import from Tokens Studio.