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
| Example | Token title | Token |
|---|---|---|
#FEFEFE | color palette primary 50 | --sl-color-palette-primary-50 |
#EAEAEA | color palette primary 100 | --sl-color-palette-primary-100 |
#D5D5D5 | color palette primary 150 | --sl-color-palette-primary-150 |
#BCBCBC | color palette primary 200 | --sl-color-palette-primary-200 |
#A2A1A1 | color palette primary 300 | --sl-color-palette-primary-300 |
#898989 | color palette primary 400 | --sl-color-palette-primary-400 |
#737373 | color palette primary 500 | --sl-color-palette-primary-500 |
#605F5F | color palette primary 600 | --sl-color-palette-primary-600 |
#4E4E4E | color palette primary 700 | --sl-color-palette-primary-700 |
#3E3D3D | color palette primary 800 | --sl-color-palette-primary-800 |
#262626 | color palette primary 900 | --sl-color-palette-primary-900 |
#222222 | color palette primary base | --sl-color-palette-primary-base |
| Example | Token title | Token |
|---|---|---|
#EDF2FC | color palette accent 50 | --sl-color-palette-accent-50 |
#E0EAFF | color palette accent 100 | --sl-color-palette-accent-100 |
#CCDBFF | color palette accent 150 | --sl-color-palette-accent-150 |
#9EBAFF | color palette accent 200 | --sl-color-palette-accent-200 |
#5985FF | color palette accent 300 | --sl-color-palette-accent-300 |
{color.palette.accent.base} | color palette accent 400 | --sl-color-palette-accent-400 |
#2351DB | color palette accent 500 | --sl-color-palette-accent-500 |
#1138AD | color palette accent 600 | --sl-color-palette-accent-600 |
#09298E | color palette accent 700 | --sl-color-palette-accent-700 |
#00175F | color palette accent 800 | --sl-color-palette-accent-800 |
#000D33 | color palette accent 900 | --sl-color-palette-accent-900 |
#3366FF | color palette accent base | --sl-color-palette-accent-base |
| Example | Token title | Token |
|---|---|---|
#f3f3f3 | color palette neutral 50 | --sl-color-palette-neutral-50 |
#EAEAEA | color palette neutral 100 | --sl-color-palette-neutral-100 |
#D5D5D5 | color palette neutral 150 | --sl-color-palette-neutral-150 |
#BCBCBC | color palette neutral 200 | --sl-color-palette-neutral-200 |
#A2A1A1 | color palette neutral 300 | --sl-color-palette-neutral-300 |
#898989 | color palette neutral 400 | --sl-color-palette-neutral-400 |
#737373 | color palette neutral 500 | --sl-color-palette-neutral-500 |
#605F5F | color palette neutral 600 | --sl-color-palette-neutral-600 |
#4E4E4E | color palette neutral 700 | --sl-color-palette-neutral-700 |
#3E3D3D | color palette neutral 800 | --sl-color-palette-neutral-800 |
#2E2E2E | color palette neutral 900 | --sl-color-palette-neutral-900 |
#222222 | color palette neutral base | --sl-color-palette-neutral-base |
| Example | Token title | Token |
|---|---|---|
#F0F5FF | color palette info 50 | --sl-color-palette-info-50 |
#E0EAFF | color palette info 100 | --sl-color-palette-info-100 |
#CCDBFF | color palette info 150 | --sl-color-palette-info-150 |
#9EBAFF | color palette info 200 | --sl-color-palette-info-200 |
#5985FF | color palette info 300 | --sl-color-palette-info-300 |
{color.palette.info.base} | color palette info 400 | --sl-color-palette-info-400 |
#2351DB | color palette info 500 | --sl-color-palette-info-500 |
#1138AD | color palette info 600 | --sl-color-palette-info-600 |
#09298E | color palette info 700 | --sl-color-palette-info-700 |
#00175F | color palette info 800 | --sl-color-palette-info-800 |
#000D33 | color palette info 900 | --sl-color-palette-info-900 |
#3366FF | color palette info base | --sl-color-palette-info-base |
| Example | Token title | Token |
|---|---|---|
#EBF5EE | color palette success 50 | --sl-color-palette-success-50 |
#D7F5E1 | color palette success 100 | --sl-color-palette-success-100 |
#AEEBC4 | ||
#70E09D | color palette success 200 | --sl-color-palette-success-200 |
{color.palette.success.base} | color palette success 300 | --sl-color-palette-success-300 |
#39B26C | color palette success 400 | --sl-color-palette-success-400 |
#28854E | color palette success 500 | --sl-color-palette-success-500 |
#1B6137 | color palette success 600 | --sl-color-palette-success-600 |
#114224 | color palette success 700 | --sl-color-palette-success-700 |
#0B331A | color palette success 800 | --sl-color-palette-success-800 |
#082613 | color palette success 900 | --sl-color-palette-success-900 |
#45CC80 | color palette success base | --sl-color-palette-success-base |
| Example | Token title | Token |
|---|---|---|
#FFFDF9 | color palette warning 50 | --sl-color-palette-warning-50 |
#FFF8E8 | color palette warning 100 | --sl-color-palette-warning-100 |
#FFEFCB | color palette warning 150 | --sl-color-palette-warning-150 |
#FFE2A3 | color palette warning 200 | --sl-color-palette-warning-200 |
#FFD170 | color palette warning 300 | --sl-color-palette-warning-300 |
#FFAE00 | color palette warning 400 | --sl-color-palette-warning-400 |
#CC7700 | color palette warning 500 | --sl-color-palette-warning-500 |
#A66100 | color palette warning 600 | --sl-color-palette-warning-600 |
#804B00 | color palette warning 700 | --sl-color-palette-warning-700 |
#593400 | color palette warning 800 | --sl-color-palette-warning-800 |
#331E00 | color palette warning 900 | --sl-color-palette-warning-900 |
#FFAE00 | color palette warning base | --sl-color-palette-warning-base |
| Example | Token title | Token |
|---|---|---|
#FFEDEB | color palette danger 50 | --sl-color-palette-danger-50 |
#FFD6D1 | color palette danger 100 | --sl-color-palette-danger-100 |
#FFBCB8 | color palette danger 150 | --sl-color-palette-danger-150 |
#FF8E8A | color palette danger 200 | --sl-color-palette-danger-200 |
{color.palette.danger.base} | color palette danger 300 | --sl-color-palette-danger-300 |
#E5454A | color palette danger 400 | --sl-color-palette-danger-400 |
#C73434 | color palette danger 500 | --sl-color-palette-danger-500 |
#992224 | color palette danger 600 | --sl-color-palette-danger-600 |
#6B1313 | color palette danger 700 | --sl-color-palette-danger-700 |
#470D0D | color palette danger 800 | --sl-color-palette-danger-800 |
#260808 | color palette danger 900 | --sl-color-palette-danger-900 |
#FF575C | color palette danger base | --sl-color-palette-danger-base |
| Example | Token title | Token |
|---|---|---|
#222222 | color palette black base | --sl-color-palette-black-base |
| Example | Token title | Token |
|---|---|---|
#FEFEFE | color palette white base | --sl-color-palette-white-base |
| Example | Token title | Token |
|---|---|---|
#00000000 | color palette transparent base | --sl-color-palette-transparent-base |