Tokens
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 a different value depending on the type of token.
The following token types can be created in Supernova:
Token Type | Description | Token Value(s) |
Font | a font |
|
Color | a color |
|
Gradient | a gradient |
|
Border | a border |
|
Shadow | a shadow |
|
Radius | a numeric corner value |
|
Measure | a numeric value |
|
Typography | a typography style |
|
Text | the text value of a layer |
|
Tokens are created from the styles you are already using in your designs that you import from your design editor of choice.
Further reading → Create Design Tokens
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 |
|
| 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
