Tokens can be used in Appcues' new themes feature. To learn more about themes in general, see New Themes and advanced styling.

What is a design token?

Design tokens are a standard syntax for documenting individual design decisions like colors and fonts. Companies use design tokens as a standard part of their larger design systems and brand guidelines. A design token is generally a name paired with a value: brand-primary = #5C45FF. 

Design tools like Figma have made design tokens a standard way to define and stay consistent with brand styles.

Tokens can be added to your Appcues themes so your designers can clearly document granular styles that may be included in Appcues Experiences. These styles can then optionally be given Design Controls, if you need to ensure that your team members using the theme cannot stray from acceptable brand guidelines.

Two token types are supported:

• Color — used by color and fill pickers, and by Component variant styles
• Font family — used by font family pickers

Add tokens to a Theme

1. Within the Appcues Builder, click the gear icon on the top panel and then Edit theme. 

2. Click the Design Tokens tab.
3. Select Color or Font family from the Types list on the left.
    

4. Click Add token.
5. Enter a token name and value. For colors, use a hex code like #5C45FF. For fonts, use a font stack like Lato, sans-serif. To point one token at another, wrap the other token's name in braces: {brand.primary}.
    

6. Repeat for each token, then click Save.

Fonts referenced by a font family token must already be loaded by your application. A token sets the font family name; it doesn't download the font. If your site loads a font through Google Fonts, Adobe Fonts, or a self-hosted @font-face, a token pointing at that family works.

Import tokens from a JSON file

If your design system already exports tokens, skip the manual entry.

1. On the Design Tokens tab, select the token type you're importing.
2. Click Import.
3. Select a JSON file that follows the Design Tokens Format Module spec. Figma and most design systems can export this format.
4. Confirm the imported tokens appear in the list, then click Save.

Import only brings in tokens matching the type you selected, so a file containing both colors and fonts needs one import per type. Nested groups in the file are preserved using dot notation.

Use tokens while building

Once a Theme has tokens, they show up wherever that Theme's experiences are styled:

• Color and fill pickers show your color tokens as selectable swatches. The list is searchable.
• Font family dropdowns list your font tokens.
• Component variants in the theme editor can reference tokens the same way, using {token.name}.

A block styled with a token keeps following that token. Edit the token's value and save the theme, and every experience using it picks up the new value, including experiences already published.

Lock down brand guidelines using Design Controls

The Design Controls tab decides how prominent tokens are, and whether any custom styling outside of the tokens are allowed allowed. 

Included

Emphasized

Exclusive

Design Controls apply to web experiences only. Mobile experiences ignore them.

Even when Exclusive is set, colors can still be overridden using Advanced Styles.