Token blocks

Display design tokens in your documentation.

Color ramps - menu

Add a color ramps block

Color ramps - empty

To add a color ramp block to your documentation:

  1. Select Color ramps from the block menu.
  2. Choose Select tokens to select the tokens you want to display in the block. Alternatively, click Change selection in the block property panel to the right.
  3. You can then choose to add either a color token group or individual color tokens. 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.
  4. Click Save selection.
Color ramp - selection

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

  • Change the number of columns using the slider.
  • 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 swatch to override their value.

See Displaying theme tokens for more.

Color ramps - property panel

Example

Palette / Blue
Blue 1100
#082036
Blue 1000
#18395d
Blue 900
#245685
Blue 800
#306ca5
Blue 700
#3a79bd
Blue 600
#4587cd
Blue 500
#5196dd
Blue 400
#6aacef
Blue 300
#aad2f4
Blue 200
#cde3f7
Blue 100
#e0f1fe
Blue 0
#ecf8fe
Palette / Orange
Orange 1100
#2a140f
Orange 1000
#581d09
Orange 900
#8a341a
Orange 800
#bf5c29
Orange 700
#de763a
Orange 600
#e68246
Orange 500
#ee8e53
Orange 400
#f2a069
Orange 300
#f4b388
Orange 200
#f6c7a9
Orange 100
#f7ddce
Orange 0
#fceee4
Palette / Purple
Purple 1100
#1d1e36
Purple 1000
#2b2667
Purple 900
#453e96
Purple 800
#5a52b4
Purple 700
#6b62cc
Purple 600
#7d73e2
Purple 500
#8d84ed
Purple 400
#9e95ec
Purple 300
#c0c2f3
Purple 200
#d8d8f6
Purple 100
#eaeaf8
Purple 0
#f2f2f8
Palette / Magenta
Magenta 1100
#271a2c
Magenta 1000
#3f1a4e
Magenta 900
#642a73
Magenta 800
#854091
Magenta 700
#a04da3
Magenta 600
#b659b4
Magenta 500
#cc6bd5
Magenta 400
#e38aef
Magenta 300
#e3b1ee
Magenta 200
#ecc7f4
Magenta 100
#f5e4fa
Magenta 0
#fcf0fe
Palette / Pink
Pink 1100
#281821
Pink 1000
#4f1930
Pink 900
#872647
Pink 800
#a43b5b
Pink 700
#be4466
Pink 600
#cf517c
Pink 500
#de638b
Pink 400
#ee7fad
Pink 300
#f19bc0
Pink 200
#f4b8d4
Pink 100
#f7dcea
Pink 0
#fbeaf2
Palette / Red
Red 1100
#281212
Red 1000
#641c18
Red 900
#8d2d28
Red 800
#b6403b
Red 700
#ca4b45
Red 600
#dc584a
Red 500
#e56a5b
Red 400
#ef8674
Red 300
#f1a193
Red 200
#f4bbb3
Red 100
#f8d7d3
Red 0
#fbebe9
Palette / Yellow
Yellow 1100
#2a1b08
Yellow 1000
#4e2c0b
Yellow 900
#8b4f1f
Yellow 800
#b0772a
Yellow 700
#d49b35
Yellow 600
#f6be41
Yellow 500
#f8ce4c
Yellow 400
#fad961
Yellow 300
#fbe17f
Yellow 200
#fbe9a4
Yellow 100
#fbeed1
Yellow 0
#fef8e4
Palette / Neutral
Neutral 1100
#040404
Neutral 1000
#182020
Neutral 900
#293333
Neutral 800
#384141
Neutral 700
#545e5f
Neutral 600
#70797a
Neutral 500
#939a9b
Neutral 400
#b1b6b7
Neutral 300
#c9cccc
Neutral 200
#dfe1e1
Neutral 100
#f3f4f4
Neutral 0
#ffffff
Palette / Green
Green 1100
#0e2a21
Green 1000
#1c4130
Green 900
#2d6944
Green 800
#3c884d
Green 700
#4ca45a
Green 600
#5ab261
Green 500
#78c767
Green 400
#8fda75
Green 300
#a9e297
Green 200
#ccf0c2
Green 100
#ddf3d9
Green 0
#eef9ec
Palette / Teal
Teal 1100
#0b2427
Teal 1000
#1b3e3e
Teal 900
#2a6461
Teal 800
#357a7b
Teal 700
#42948e
Teal 600
#4aa69c
Teal 500
#58c1b2
Teal 400
#6addc6
Teal 300
#97e7d5
Teal 200
#c0f0e6
Teal 100
#d5f6ef
Teal 0
#e9f8f5
Palette / Aqua
Aqua 1100
#0b2737
Aqua 1000
#193c4d
Aqua 900
#265d71
Aqua 800
#316c82
Aqua 700
#3a8396
Aqua 600
#4295ab
Aqua 500
#54b5cb
Aqua 400
#6ad3df
Aqua 300
#91e2e1
Aqua 200
#b5f0f1
Aqua 100
#d0f7f8
Aqua 0
#e0fbfb