Tokens

Create tokens by translating design system elements and styles into a common language between designers and developers.

What is a token?

Design tokens are the style properties for a design system — these tokens (or key/value pairs) are used for building your design system in Supernova. Design tokens 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 have different values depending on the type of token.

The following token types can be created in Supernova:

Token Type

Description

Token Value(s)

Color

a color

HEX RGB or HSB

Typography

a typography style

font, size, line-height, case +

Font

a font

font-family and font-weight

Gradient

a gradient

linear or radial

Border

a border

color, width and position

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

any value

Importing tokens

Certain types of tokens are created from the styles you are already using in your designs. You can import these tokens from your design editor of choice.

Further reading → Create Design Tokens

What is a Developer Token?

A developer token is a custom type of token whose value might be used in code, but does not directly translate into the types of styles used in design editors. These tokens will be included in your design system data and can be integrated alongside design tokens.

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

Token Name

Token Value

Token Type

duration-500

250ms

Measure

This allows all tokens used in your codebase to be represented in the design system data and kept up to date.

Further reading → Create Developer Tokens