Types of tokens

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

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

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

Gradient

A gradient token defines a gradient within your design system.

Example

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

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

Blur

Blur tokens have a type (layer or background), and a size (px).

Example

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

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

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.

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