Design Tokens
Design tokens are named entities that store visual and functional information. They take the place of hardcoded values, such as hex values for color or pixel values for spacing.
Color
blue
| Example | Step | Token |
|---|---|---|
#eef4ff | 050 | --sl-brand-light-color-palette-blue-050 |
#d9e5ff | 100 | --sl-brand-light-color-palette-blue-100 |
#bcd2ff | 150 | --sl-brand-light-color-palette-blue-150 |
#8eb6ff | 200 | --sl-brand-light-color-palette-blue-200 |
#598eff | 300 | --sl-brand-light-color-palette-blue-300 |
#3366ff | 400 | --sl-brand-light-color-palette-blue-400 |
#1b43f5 | 500 | --sl-brand-light-color-palette-blue-500 |
#142fe1 | 600 | --sl-brand-light-color-palette-blue-600 |
#1727b6 | 700 | --sl-brand-light-color-palette-blue-700 |
#19288f | 800 | --sl-brand-light-color-palette-blue-800 |
#141a57 | 900 | --sl-brand-light-color-palette-blue-900 |
green
| Example | Step | Token |
|---|---|---|
#edfcf2 | 050 | --sl-brand-light-color-palette-green-050 |
#d3f8de | 100 | --sl-brand-light-color-palette-green-100 |
#abefc3 | 150 | --sl-brand-light-color-palette-green-150 |
#75e0a1 | 200 | --sl-brand-light-color-palette-green-200 |
#45cc80 | 300 | --sl-brand-light-color-palette-green-300 |
#1aaf60 | 400 | --sl-brand-light-color-palette-green-400 |
#0d8e4c | 500 | --sl-brand-light-color-palette-green-500 |
#0b7140 | 600 | --sl-brand-light-color-palette-green-600 |
#0b5a34 | 700 | --sl-brand-light-color-palette-green-700 |
#0a4a2c | 800 | --sl-brand-light-color-palette-green-800 |
#042a19 | 900 | --sl-brand-light-color-palette-green-900 |
grey
| Example | Step | Token |
|---|---|---|
#ffffff | 000 | --sl-brand-light-color-palette-grey-000 |
#f6f8fa | 050 | --sl-brand-light-color-palette-grey-050 |
#f0f2f5 | 100 | --sl-brand-light-color-palette-grey-100 |
#e0e6ea | 150 | --sl-brand-light-color-palette-grey-150 |
#dae0e7 | 200 | --sl-brand-light-color-palette-grey-200 |
#d0d9e0 | 300 | --sl-brand-light-color-palette-grey-300 |
#c8d1da | 400 | --sl-brand-light-color-palette-grey-400 |
#818b98 | 500 | --sl-brand-light-color-palette-grey-500 |
#59636e | 600 | --sl-brand-light-color-palette-grey-600 |
#393f46 | 700 | --sl-brand-light-color-palette-grey-700 |
#25292f | 800 | --sl-brand-light-color-palette-grey-800 |
#222222 | 900 | --sl-brand-light-color-palette-grey-900 |
orange
| Example | Step | Token |
|---|---|---|
#fff8ed | 050 | --sl-brand-light-color-palette-orange-050 |
#fff0d4 | 100 | --sl-brand-light-color-palette-orange-100 |
#ffdda8 | 150 | --sl-brand-light-color-palette-orange-150 |
#ffc471 | 200 | --sl-brand-light-color-palette-orange-200 |
#ff9d33 | 300 | --sl-brand-light-color-palette-orange-300 |
#fe8211 | 400 | --sl-brand-light-color-palette-orange-400 |
#ef6707 | 500 | --sl-brand-light-color-palette-orange-500 |
#c64c08 | 600 | --sl-brand-light-color-palette-orange-600 |
#9d3d0f | 700 | --sl-brand-light-color-palette-orange-700 |
#7e3410 | 800 | --sl-brand-light-color-palette-orange-800 |
#441706 | 900 | --sl-brand-light-color-palette-orange-900 |
purple
| Example | Step | Token |
|---|---|---|
#f4f2ff | 050 | --sl-brand-light-color-palette-purple-050 |
#ece7ff | 100 | --sl-brand-light-color-palette-purple-100 |
#d9d2ff | 150 | --sl-brand-light-color-palette-purple-150 |
#bfaeff | 200 | --sl-brand-light-color-palette-purple-200 |
#9f80ff | 300 | --sl-brand-light-color-palette-purple-300 |
#824dff | 400 | --sl-brand-light-color-palette-purple-400 |
#7b33ff | 500 | --sl-brand-light-color-palette-purple-500 |
#6616eb | 600 | --sl-brand-light-color-palette-purple-600 |
#5512c5 | 700 | --sl-brand-light-color-palette-purple-700 |
#4711a1 | 800 | --sl-brand-light-color-palette-purple-800 |
#29076e | 900 | --sl-brand-light-color-palette-purple-900 |
red
| Example | Step | Token |
|---|---|---|
#fff1f1 | 050 | --sl-brand-light-color-palette-red-050 |
#ffe1e2 | 100 | --sl-brand-light-color-palette-red-100 |
#ffc7c9 | 150 | --sl-brand-light-color-palette-red-150 |
#ffa0a3 | 200 | --sl-brand-light-color-palette-red-200 |
#ff575c | 300 | --sl-brand-light-color-palette-red-300 |
#f83b41 | 400 | --sl-brand-light-color-palette-red-400 |
#e51d23 | 500 | --sl-brand-light-color-palette-red-500 |
#c11419 | 600 | --sl-brand-light-color-palette-red-600 |
#a01418 | 700 | --sl-brand-light-color-palette-red-700 |
#84181b | 800 | --sl-brand-light-color-palette-red-800 |
#480709 | 900 | --sl-brand-light-color-palette-red-900 |
teal
| Example | Step | Token |
|---|---|---|
#eefffc | 050 | --sl-brand-light-color-palette-teal-050 |
#c5fffa | 100 | --sl-brand-light-color-palette-teal-100 |
#8bfff5 | 150 | --sl-brand-light-color-palette-teal-150 |
#4afef0 | 200 | --sl-brand-light-color-palette-teal-200 |
#15ece2 | 300 | --sl-brand-light-color-palette-teal-300 |
#00d0c9 | 400 | --sl-brand-light-color-palette-teal-400 |
#00a8a5 | 500 | --sl-brand-light-color-palette-teal-500 |
#008080 | 600 | --sl-brand-light-color-palette-teal-600 |
#066769 | 700 | --sl-brand-light-color-palette-teal-700 |
#0a5757 | 800 | --sl-brand-light-color-palette-teal-800 |
#003235 | 900 | --sl-brand-light-color-palette-teal-900 |
yellow
| Example | Step | Token |
|---|---|---|
#fffdea | 050 | --sl-brand-light-color-palette-yellow-050 |
#fff7c5 | 100 | --sl-brand-light-color-palette-yellow-100 |
#fff085 | 150 | --sl-brand-light-color-palette-yellow-150 |
#ffe146 | 200 | --sl-brand-light-color-palette-yellow-200 |
#ffcf1b | 300 | --sl-brand-light-color-palette-yellow-300 |
#ffae00 | 400 | --sl-brand-light-color-palette-yellow-400 |
#e28400 | 500 | --sl-brand-light-color-palette-yellow-500 |
#bb5c02 | 600 | --sl-brand-light-color-palette-yellow-600 |
#984708 | 700 | --sl-brand-light-color-palette-yellow-700 |
#7c3a0b | 800 | --sl-brand-light-color-palette-yellow-800 |
#481d00 | 900 | --sl-brand-light-color-palette-yellow-900 |