Custom properties

Extend design tokens and components with custom data.

Extend the definition of tokens in your design system, allowing more possibilities for managing your tokens, and for working with them in code.


What are custom token properties?

Custom token properties are extra layers of information about the tokens in your design system, such as statuses, code names, boolean values and links to documentation or other external sources.

These custom properties can be used to:

  • Manage and analyze tokens
  • Export tokens to various code platforms
  • Send additional parameters to code exporters (eg. to use for conditional rendering)
  • Display in Supernova documentation

Examples of custom token properties

There are many ways that you can use custom properties. Here are a few examples of how others use custom properties to extend or enrich their design tokens.

Name

Type

Description

Internal token

Boolean

Used for tokens that are not supposed to be exported as variables to code. These tokens are created only for easier management of a token set.
For example, you can have tokens in Measures for referencing purposes, but they are not meant to be used in final code components.

CTI structure

Text

Used for generating variable names based on CTI structure (Category / Type / Item) as defined in Style Dictionary or any other token naming schema (eg. Mineral UI).

Deprecated

Boolean

Used if the token is not supposed to be used anymore in new components, but still needs to exist in the codebase before it's removed completely.

Themeable

Boolean

If the token is themeable or not (eg. Salesforce Lightning).

Group

Text

Used for structuring design tokens into groups, so it can be used by exporters for generating Sass maps (like in this article by Cristiano Rastelli).

iOS/Android/Web Platform

Boolean(s)

Used to define which tokens are supposed to be generated for a specific platform and which to ignore (e.g. tokens for responsive breakpoints only for web, nothing else).


Types of custom properties

The following types of custom properties can be created for a token.

Property type

Description

Text

A common text value.

Number

A numeric value.

Boolean

A true or false value.

Select

A selection with one or more options.

Code

A string or code value.

URL

A link to an external URL.

Documentation link

A link to a page on your documentation site.

Default properties

Some properties are shown in token detail by default.

Property Name

Description

Required?

Name

The name of the token.

Yes

Value

The default value of the token.

Yes

Description

Description of what the property should be used for.

Yes

Last edited

When the token was last edited.

Yes

Token set

Name of a set if a token belongs to one (for example, Core)

No