Types of tokens

Learn about the types of tokens used for building your design system in Supernova.

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

null

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


Typography tokens

null

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

null

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)


Border tokens

null

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


Gradient tokens

null

A gradient token defines a gradient within your design system.

Example

Key

Value

overlay-gradient

radial-gradient(#f69d3c, #3f87a6)


Blur tokens

null

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

Example

Key

Value

blur-background-dark

Layer blur, 8px


Dimension tokens

null

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

Token type

Key

Value (ms)

Duration

duration-500

250


 

Options tokens

null

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

Token type

Key

Value

Text decoration

 

Strikethrough


String tokens

null

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

Token type

Key

Value

Generic string

name-input-label

Full name