L
L
Learn
Search…
Tokens
Create tokens by translating design system elements and styles into a common language between designers and developers.

What is a token?

Tokens are the style properties for a design system — these tokens (or key/value pairs) are used for building your design system in Supernova. They are simple representations of "design decisions", that can be easily consumed by the codebases and projects that use your design system.
All tokens have a name and a value, and an optional description. Tokens in Supernova can have different values depending on the type of token.
Tokens that have accompanying style definitions in your design editor can be imported (color, gradient, shadow, typography), all other tokens must be created manually.

Types of tokens

The following token types can be created in Supernova:
Token type
Description
Token value(s)
Color
a color
HEX RGB or HSB
a typography style
font, size, line-height ...
Font
a font
font-family and font-weight
Gradient
a gradient
linear or radial
Border
a border
color, width and style
Shadow
a shadow
color, x, y, blur, and spread
Radius
a numeric corner value
n
Measure
a numeric value
n
String
a string value
Lorem ipsum...
Other
generic token
See Other tokens

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).
Token name
Token value
Token type
primary-background
rgb(234, 234, 234)
color
accent-button-hover
rgba(159, 159, 245, 0.75)
color
brand-accent
#9F9FF5
color
Color tokens can be imported directly from your design file

Typography tokens

Typography tokens contain the information for an entire font style. It is a bit more complex than other tokens, but it can be imported directly from a 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
Token name
Token value
Token type
branding-bold
bold 12px/14px 'SF Pro'
typography
caption-body
font-family: Helvetica, weight: 200,
size: 10px,
line-height: 12px,
paragraph-spacing: 40
paragraph-indent: 0,
letter-spacing: 0,
case: uppercase,
decoration: none
typography
Typography tokens can be imported directly from your design file

Font tokens

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 token referencing.
Token name
Token value
Token type
default-system-font
SF Pro
font

Gradient tokens

A gradient token defines a gradient within your design system.
Token name
Token value
Token type
overlay-gradient
radial-gradient(#f69d3c, #3f87a6)
gradient
Gradient tokens can be imported directly from your design file

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.
Token name
Token value
Token type
accent-border-color
2px solid blue
border

Shadow tokens

Shadow tokens 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.
Token name
Token value
Token type
tile-shadow-light
2px 2px 2px 1px rgba(0, 0, 0, 0.2)
shadow
Shadow tokens can be imported directly from your design file

Radius tokens

A radius token is used to define a radius in your design system. The value of a radius token must be a number.
Token name
Token value (px)
Token type
tile-corner-lg
10
radius

Measure tokens

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:
Token name
Token value (ms)
Token type
duration-500
250
measure
Measure tokens can also be used as reference tokens, similar to color tokens, wherever a number value is used. For example, a radius token could use a measure token as the value. See token referencing for more information.

String tokens

String tokens are used for UI labels or can be assigned to component properties.
Token name
Token value (string)
Token type
name-input-label
Full name
string

Other tokens

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.
Token name
Token value (string)
Token type
animation-timing-function
cubic-bezier(0.1, -0.6, 0.2, 0)
other
These generic tokens differ from string tokens, which should be used for UI labels or can be assigned to component properties.
Last modified 2mo ago