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

ExampleToken titleToken
#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
ExampleToken titleToken
#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
ExampleToken titleToken
#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
ExampleToken titleToken
#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
ExampleToken titleToken
#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
ExampleToken titleToken
#FFFDFD
color palette warning 50--sl-color-palette-warning-50
#FFEAE0
color palette warning 100--sl-color-palette-warning-100
#FFD5C2
color palette warning 150--sl-color-palette-warning-150
#FFB796
color palette warning 200--sl-color-palette-warning-200
#FF9667
color palette warning 300--sl-color-palette-warning-300
#FF6D2C
color palette warning 400--sl-color-palette-warning-400
#F04A00
color palette warning 500--sl-color-palette-warning-500
#CF4000
color palette warning 600--sl-color-palette-warning-600
#B03600
color palette warning 700--sl-color-palette-warning-700
#942E00
color palette warning 800--sl-color-palette-warning-800
#6F2200
color palette warning 900--sl-color-palette-warning-900
#FF8650
color palette warning base--sl-color-palette-warning-base
ExampleToken titleToken
#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
ExampleToken titleToken
#222222
color palette black base--sl-color-palette-black-base
ExampleToken titleToken
#FEFEFE
color palette white base--sl-color-palette-white-base
ExampleToken titleToken
#00000000
color palette transparent base--sl-color-palette-transparent-base