D
D
Developers
Search…
Design Tokens
A design token is an underlying object that is a base for the following object types:

Token Structure

Design tokens carry one piece of atomic information (such as color) either as a raw value or as a reference to other tokens (for example, a token defining primary-cta might be inherited by many color tokens that have a different semantic purpose, such as button-main). This allows you to change one color and propagate the change to all colors that share the reference.
Each token always defines the base information such as name, description, or type. Extra to that, each token also carries its value inside value property:
1
{
2
"id": string
3
"name": string
4
"description": string
5
"tokenType": TokenType
6
"origin": {
7
"source": "Supernova" | "Figma" | "Sketch",
8
"id": string | null,
9
"name": string | null,
10
} | null
11
"value": TokenValue
12
}
Copied!
The TokenValue differs based on what type of token it is. For example, the full definition for Color Token will look like this:
1
{
2
"id": "abcd-efgh-ijkl"
3
"name": "Base 00"
4
"description": "Primary brand black color"
5
"tokenType": "Color"
6
"origin": {
7
"source": "Figma",
8
"id": "lkji-hgfe-dcba",
9
"name": "Base 00",
10
}
11
"value": {
12
"hex": "000000FF"
13
"r": 0,
14
"g": 0,
15
"b": 0,
16
"a": 255
17
}
18
}
Copied!

Token aliases and referencing

In order to avoid duplication, Supernova introduces the concept of referencing and aliases - shared values that are defined once but then referenced throughout the design system.
If a token reference is used, the token payload will give you that information as well. This is useful if you really want to export the entire chain as it was defined, not just the raw values.
1
{
2
"id": "abcd-efgh-ijkl"
3
"name": "Base 00"
4
"description": "Primary brand black color"
5
"tokenType": "Color"
6
"origin": {
7
"source": "Figma",
8
"id": "lkji-hgfe-dcba",
9
"name": "Base 00",
10
}
11
"value": {
12
"hex": "000000FF"
13
"r": 0,
14
"g": 0,
15
"b": 0,
16
"a": 255,
17
"referencedToken": {
18
"id": "xyzw-efgh-caed",
19
"name": "Base Referencing 00"
20
...
21
}
22
}
23
}
Copied!
All tokens are automatically resolved for your convenience, but each property always contains referencedToken property so you know when the value comes from a reference. You don't have to worry about circular references, as Supernova prevents the creation of them.
When the token was defined as value without reference, referencedToken will be null.

Token Types

Many functions will ask you for token type. Following is the reference list of all token types available:
    Color - for color tokens
    Font - for font tokens
    Gradient - for shadow tokens
    Shadow - for shadow tokens
    Border - for border tokens
    Radius - for radius tokens
    Measure - for measure tokens
    Typography - for typography tokens
    Text - for text tokens
You can use this type to know what type of token was retrieved or as a filter in certain functions, such as:
1
{[ const tokens = @ds.tokensByType("Color") /]}
Copied!
This will fetch only tokens of type Color, and ignore everything else.
Last modified 6mo ago