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

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

Color tokens can be imported from styles in a Figma file, the Figma Variables Sync plugin, Tokens Studio, or created manually.

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.

To preserve variable references and ensure correct theming, re-import typography tokens after setting up Figma variables in Supernova using our plugin.

Required values:

font-family, font-weight/style, font-size, and line-height

Optional values:

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

Typography tokens can be imported from styles in a Figma file, Tokens Studio, or created manually.

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

Key	Value
tile-shadow-light	2px 2px 2px 1px rgba(0, 0, 0, 0.2)

Shadow tokens can be imported from styles in a Figma file, Tokens Studio, or created manually.

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

Key	Value
accent-border-color	2px solid blue

Border tokens can be imported from Tokens Studio, or created manually.

Gradient tokens

A gradient token defines a gradient within your design system.

Example

Key	Value
overlay-gradient	radial-gradient(#f69d3c, #3f87a6)

Gradient tokens can be imported from styles in a Figma file or Tokens Studio.

Blur tokens

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

Example

Key	Value
blur-background-dark	Layer blur, 8px

Blur tokens can be imported from styles in a Figma file or created manually.

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

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

Dimension tokens (excluding Duration tokens) can be imported from the Figma Variables Sync plugin, Tokens Studio, or created manually.

Options tokens

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

Types of option tokens

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	Strikethrough

Options tokens can be imported from Tokens Studio or created manually.

String tokens

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

Types of string tokens

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

String tokens (excluding Product copy tokens) can be imported from the Figma Variables Sync plugin, Tokens Studio, or created manually.