Types of tokens

The types of tokens used for building your design system in Supernova

To learn more about importing tokens from Figma, go to Figma 101.

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

Color tokens can be imported directly from your Figma design system file
A note on multi-layer fills — currently, multi-layer fills imported into Supernova are flattened into a single color / gradient token

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
Typography tokens can be imported directly from your Figma design system file

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

Example:

  • Token name: default-system-font
  • Token value: SF Pro
Font tokens cannot be imported and must be manually created in Supernova

Gradient

A gradient token defines a gradient within your design system.

Example:

  • Token name: overlay-gradient
  • Token value: radial-gradient(#f69d3c, #3f87a6)
Gradient tokens can be imported directly from your Figma design system file
A note on multi-layer fills — currently, multi-layer fills imported into Supernova are flattened into a single color / gradient token

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:

  • Token name: accent-border-color
  • Token value: 2px solid blue
Border tokens cannot be imported and must be manually created in Supernova

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:

  • Token name: tile-shadow-light
  • Token value: 2px 2px 2px 1px rgba(0, 0, 0, 0.2)
Shadow tokens can be imported directly from your Figma design system file

Blur

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

Example:

  • Token name: blur-background-dark
  • Token value: Layer blur, 8px
Blur tokens cannot be imported and must be manually created in Supernova

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:

  • Token name: tile-corner-lg
  • Token value (px): 10
Radius tokens cannot be imported and must be manually created in Supernova

Measure

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.

For example, a developer could create a measure token to define a specific animation transition time.

Example:

  • Token name: duration-500
  • Token value (ms): 250
Measure tokens cannot be imported and must be manually created in Supernova

 

String

String tokens are used for UI labels or can be assigned to component properties.

Example:

  • Token name: name-input-label
  • Token value: Full name
String tokens cannot be imported and must be manually created in Supernova

Other

Other tokens, or "generic tokens" are a custom type of token whose value might be used in code by developers, but does not directly translate into a design editor style attribute, and differs from the rest of the pre-defined token types.

It is a semantically named string that can be used for any purpose, but is primarily meant to be used programmatically. These tokens are created manually with Supernova, and are not imported from your design editor (i.e a Figma file). For example, the value of a generic token could be a snippet of JSON or CSS, or any other value you want to assign.

Example:

  • Token name: animation-timing-function
  • Token value: cubic-bezier(0.1, -0.6, 0.2, 0)

These generic tokens differ from string tokens, which should be used for UI labels or can be assigned to component properties.

Other tokens cannot be imported and must be manually created in Supernova