Types of tokens

Tokens come in many different types, and each one can be used to build out and enrich your design system. These are the types used in Supernova.

Color tokens

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 tokens

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 Figma.

Required values:

• font-family, font-weight, font-size, and line-height

Optional values:

• text-case, text-decoration, letter-spacing, paragraph-spacing, and paragraph-indent

Shadow tokens

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

Border tokens

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

Gradient tokens

A gradient token defines a gradient within your design system.

Example

Blur tokens

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

Example

Dimension tokens

Dimension 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 -> Defines 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

Options 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.

Example

String tokens

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