Token blocks

Display design tokens in your documentation.

Token blocks are dynamic content blocks populated with data from your design system. There are currently three types of token blocks to choose from: Design tokens, color ramps, and accessibility color grid.

Design tokens - menu

Add a design tokens block

Design tokens - empty

To add a design tokens block to your documentation:

  1. Select Design tokens from the block menu.
  2. In the block's property panel to the right, click Change selection to select the tokens you want to display in the block.
  3. Select the token type first.
  4. You can then choose to add either a token group, or individual tokens (you can't add both). Search and select the tokens you'd like to use for the block in the selection dialog. The tokens will be shown in the same order in your published documentation.
  5. Click Save selection.
Design tokens - selection

In the property panel to the right of the screen, you can do the following:

  • Change the token in the block by clicking Change selection.
  • Choose a layout to display 1 or 2 swatches of tokens.
  • Apply themes to tokens swatches to override their value. See Displaying theme tokens for more.
  • Select which token properties you want to display in the block in the Token properties section.
Design tokens - property panel

Examples

Semantic / Error
#b6403b
error.color
#b6403b
error.icon
#ef8674
error.border
#f8d7d3
error.background
Semantic / Warning
#8b4f1f
warning.color
#ba7506
warning.icon
#fad961
warning.border
#fbeed1
warning.background
Semantic / Success
#2d6944
success.color
#3c884d
success.icon
#8fda75
success.border
#ddf3d9
success.background
Semantic / Info
#6b62cc
info.color
#5a52b4
info.icon
#9e95ec
info.border
#eaeaf8
info.background
Semantic / Opportunity
#a43b5b
opportunity.color
#a43b5b
opportunity.icon
#ee7fad
opportunity.border
#f7dcea
opportunity.background
Semantic / Text
#ffffff
text.inverse
#545e5f
text.subtext
#293333
text.headline
#384141
text.body
Semantic / Primary
#58c1b2
primary.activeBackground
#6addc6
primary.hoverBackground
#1b3e3e
primary.hoverColor
#97e7d5
primary.background
#2a6461
primary.color
#dfe1e1
cta.primary.activeBackground
#2a6461
primary.border
#c9cccc
hoverInnactiveBackground
Semantic / Error
#b6403b
error.color
#b6403b
error.icon
#ef8674
error.border
#f8d7d3
error.background
Semantic / Warning
#8b4f1f
warning.color
#ba7506
warning.icon
#fad961
warning.border
#fbeed1
warning.background
Semantic / Success
#2d6944
success.color
#3c884d
success.icon
#8fda75
success.border
#ddf3d9
success.background
Semantic / Info
#6b62cc
info.color
#5a52b4
info.icon
#9e95ec
info.border
#eaeaf8
info.background
Semantic / Opportunity
#a43b5b
opportunity.color
#a43b5b
opportunity.icon
#ee7fad
opportunity.border
#f7dcea
opportunity.background
Semantic / Text
#ffffff
text.inverse
#545e5f
text.subtext
#293333
text.headline
#384141
text.body
Semantic / Primary
#58c1b2
primary.activeBackground
#6addc6
primary.hoverBackground
#1b3e3e
primary.hoverColor
#97e7d5
primary.background
#2a6461
primary.color
#dfe1e1
cta.primary.activeBackground
#2a6461
primary.border
#c9cccc
hoverInnactiveBackground
Ag
Inter regular 14px/20px
Token #1
Ag
Inter regular 14px/20px
Token #2
Ag
Inter 400 57px/64px
H1
Ag
Inter 400 43px/50px
H2
Ag
Inter 400 32px/40px
H3
Ag
Inter 400 24px/32px
H4
Ag
Inter 400 21px/29px
H5
Ag
Inter 400 24px/32px
Large Lead
Ag
Inter 400 21px/29px
Medium Lead
Ag
Inter 400 21px/29px
Button Label
Ag
Inter 400 18px/26px
Paragraph
Ag
Inter 400 16px/24px
Small Paragraph
Ag
Inter 400 12px/24px
Tiny Paragraph
Ag
Tinos Bold 16px/24px, underline
headline-underlined
Ag
Tinor Regular 12px/16px, strikethrough
headline-strikethrough
Heading
Ag
Inter 600 36px/44px
Heading 1
Ag
Inter 600 28px/36px
Heading 2
Ag
Inter 600 18px/28px
Heading 3
Body
Ag
Inter 400 16px/24px
Body 1
Ag
Inter 500 14px/20px
Body 2
Ag
Inter 400 12px/16px
Body 3
Ag
Token #1
Ag
Token #2
Ag
H1
Ag
H2
Ag
H3
Ag
H4
Ag
H5
Ag
Large Lead
Ag
Medium Lead
Ag
Button Label
Ag
Paragraph
Ag
Small Paragraph
Ag
Tiny Paragraph
Ag
headline-underlined
Ag
headline-strikethrough
Heading
Ag
Heading 1
Ag
Heading 2
Ag
Heading 3
Body
Ag
Body 1
Ag
Body 2
Ag
Body 3