Design Tokens

Color

Reflects a product's style, creates hierarchy, and provides meaning to components and messages.

Base

Token

CSS Variable

Value

Preview

$color-gray-0

--sl-color-gray-0

#FFFFFF

$color-gray-1

--sl-color-gray-1

#F5F5F5

$color-gray-2

--sl-color-gray-2

#EDEDED

$color-gray-3

--sl-color-gray-3

#E6E6E6

$color-gray-4

--sl-color-gray-4

#DEDEDE

$color-gray-5

--sl-color-gray-5

#C7C7C7

$color-gray-6

--sl-color-gray-6

#B1B1B1

$color-gray-7

--sl-color-gray-7

#9B9B9B

$color-gray-8

--sl-color-gray-8

#868686

$color-gray-9

--sl-color-gray-9

#717171

$color-gray-10

--sl-color-gray-10

#666666

$color-gray-11

--sl-color-gray-11

#5B5B5B

$color-gray-12

--sl-color-gray-12

#484848

$color-gray-13

--sl-color-gray-13

#303030

$color-gray-14

--sl-color-gray-14

#1D1D1D

$color-red-1

--sl-color-red-1

#FAEFED

$color-red-2

--sl-color-red-2

#FDE8E3

$color-red-3

--sl-color-red-3

#FFDDD6

$color-red-4

--sl-color-red-4

#FFD2C9

$color-red-5

--sl-color-red-5

#F7B5A7

$color-red-6

--sl-color-red-6

#EC9887

$color-red-7

--sl-color-red-7

#DF7B67

$color-red-8

--sl-color-red-8

#D45B45

$color-red-9

--sl-color-red-9

#CA3A22

$color-red-10

--sl-color-red-10

#BA2205

$color-red-11

--sl-color-red-11

#A81B00

$color-red-12

--sl-color-red-12

#861502

$color-red-13

--sl-color-red-13

#5A1207

$color-orange-1

--sl-color-orange-1

#FCF3ED

$color-orange-2

--sl-color-orange-2

#F9EADD

$color-orange-3

--sl-color-orange-3

#FBE1CC

$color-orange-4

--sl-color-orange-4

#FBD6B9

$color-orange-5

--sl-color-orange-5

#F3C197

$color-orange-6

--sl-color-orange-6

#E6A66F

$color-orange-7

--sl-color-orange-7

#DF914B

$color-orange-8

--sl-color-orange-8

#DC7E0E

$color-orange-9

--sl-color-orange-9

#C87000

$color-orange-10

--sl-color-orange-10

#B56500

$color-orange-11

--sl-color-orange-11

#A35900

$color-orange-12

--sl-color-orange-12

#834600

$color-orange-13

--sl-color-orange-13

#5B3000

$color-yellow-1

--sl-color-yellow-1

#FFF7EB

$color-yellow-2

--sl-color-yellow-2

#FFECCD

$color-yellow-3

--sl-color-yellow-3

#FFE6BD

$color-yellow-4

--sl-color-yellow-4

#FFDA9D

$color-yellow-5

--sl-color-yellow-5

#F6C778

$color-yellow-6

--sl-color-yellow-6

#E5AF4D

$color-yellow-7

--sl-color-yellow-7

#DB9C00

$color-yellow-8

--sl-color-yellow-8

#CA8F00

$color-yellow-9

--sl-color-yellow-9

#BA8400

$color-yellow-10

--sl-color-yellow-10

#A77600

$color-yellow-11

--sl-color-yellow-11

#946800

$color-yellow-12

--sl-color-yellow-12

#7B5600

$color-yellow-13

--sl-color-yellow-13

#583D00

$color-green-1

--sl-color-green-1

#F2F6F1

$color-green-2

--sl-color-green-2

#E7F1E4

$color-green-3

--sl-color-green-3

#DBECD5

$color-green-4

--sl-color-green-4

#CFE7C4

$color-green-5

--sl-color-green-5

#B2D3A4

$color-green-6

--sl-color-green-6

#98BF83

$color-green-7

--sl-color-green-7

#7DAB64

$color-green-8

--sl-color-green-8

#62973B

$color-green-9

--sl-color-green-9

#488409

$color-green-10

--sl-color-green-10

#3F7700

$color-green-11

--sl-color-green-11

#386A00

$color-green-12

--sl-color-green-12

#2E5304

$color-green-13

--sl-color-green-13

#1D3900

$color-teal-1

--sl-color-teal-1

#ECF8F6

$color-teal-2

--sl-color-teal-2

#DDF3EF

$color-teal-3

--sl-color-teal-3

#CAF0E8

$color-teal-4

--sl-color-teal-4

#B6EBDF

$color-teal-5

--sl-color-teal-5

#8CD9CA

$color-teal-6

--sl-color-teal-6

#5BC7B3

$color-teal-7

--sl-color-teal-7

#16B49C

$color-teal-8

--sl-color-teal-8

#0C9C84

$color-teal-9

--sl-color-teal-9

#008570

$color-teal-10

--sl-color-teal-10

#007764

$color-teal-11

--sl-color-teal-11

#006A59

$color-teal-12

--sl-color-teal-12

#005546

$color-teal-13

--sl-color-teal-13

#003A2F

$color-blue-1

--sl-color-blue-1

#F1F5FD

$color-blue-2

--sl-color-blue-2

#E4EEFE

$color-blue-3

--sl-color-blue-3

#D9E7FF

$color-blue-4

--sl-color-blue-4

#CAE0FF

$color-blue-5

--sl-color-blue-5

#A8C9FB

$color-blue-6

--sl-color-blue-6

#86B3F3

$color-blue-7

--sl-color-blue-7

#669CEA

$color-blue-8

--sl-color-blue-8

#3F86E2

$color-blue-9

--sl-color-blue-9

#096ED9

$color-blue-10

--sl-color-blue-10

#0064C3

$color-blue-11

--sl-color-blue-11

#0959AC

$color-blue-12

--sl-color-blue-12

#00478A

$color-blue-13

--sl-color-blue-13

#003060

$color-purple-1

--sl-color-purple-1

#F7F3FC

$color-purple-2

--sl-color-purple-2

#EFEAFB

$color-purple-3

--sl-color-purple-3

#E9E1FE

$color-purple-4

--sl-color-purple-4

#E1D7FF

$color-purple-5

--sl-color-purple-5

#CBBDF7

$color-purple-6

--sl-color-purple-6

#B6A4EC

$color-purple-7

--sl-color-purple-7

#A18AE2

$color-purple-8

--sl-color-purple-8

#8D70D9

$color-purple-9

--sl-color-purple-9

#7B53D1

$color-purple-10

--sl-color-purple-10

#6F45C6

$color-purple-11

--sl-color-purple-11

#633CB4

$color-purple-12

--sl-color-purple-12

#4D2D94

$color-purple-13

--sl-color-purple-13

#351B6B

$color-pink-1

--sl-color-pink-1

#FCF2F5

$color-pink-2

--sl-color-pink-2

#FCE7ED

$color-pink-3

--sl-color-pink-3

#FFDBE8

$color-pink-4

--sl-color-pink-4

#FFCEE3

$color-pink-5

--sl-color-pink-5

#F4B0CE

$color-pink-6

--sl-color-pink-6

#E693BC

$color-pink-7

--sl-color-pink-7

#DA74A9

$color-pink-8

--sl-color-pink-8

#CC5498

$color-pink-9

--sl-color-pink-9

#BE2B86

$color-pink-10

--sl-color-pink-10

#B20C7D

$color-pink-11

--sl-color-pink-11

#A10070

$color-pink-12

--sl-color-pink-12

#80005C

$color-pink-13

--sl-color-pink-13

#59003F

$color-cyan-1

--sl-color-cyan-1

#EDF7FA

$color-cyan-2

--sl-color-cyan-2

#DDF2F9

$color-cyan-3

--sl-color-cyan-3

#CCEDF6

$color-cyan-4

--sl-color-cyan-4

#BAE7F3

$color-cyan-5

--sl-color-cyan-5

#89D5E8

$color-cyan-6

--sl-color-cyan-6

#55C2DA

$color-cyan-7

--sl-color-cyan-7

#00ADCA

$color-cyan-8

--sl-color-cyan-8

#0096AE

$color-cyan-9

--sl-color-cyan-9

#007F94

$color-cyan-10

--sl-color-cyan-10

#007385

$color-cyan-11

--sl-color-cyan-11

#006775

$color-cyan-12

--sl-color-cyan-12

#00525E

$color-cyan-13

--sl-color-cyan-13

#003740

Background

Token

CSS Variable

Value

Preview

$bg

--sl-bg

var(--sl-color-gray-0)

$bg-disabled

--sl-bg-disabled

color-mix(in srgb, var(--sl-color-gray-14) 5%, transparent)

$bg-warning

--sl-bg-warning

var(--sl-color-yellow-1)

$bg-success

--sl-bg-success

var(--sl-color-green-1)

$bg-informational

--sl-bg-informational

var(--sl-color-blue-1)

$bg-strong

--sl-bg-strong

var(--sl-color-gray-3)

$bg-strong-disabled

--sl-bg-strong-disabled

var(--sl-color-gray-6)

$bg-inverted

--sl-bg-inverted

var(--sl-color-gray-14)

$bg-inverted-plain

--sl-bg-inverted-plain

color-mix(in srgb, var(--sl-color-gray-14) 50%, transparent)

$bg-muted

--sl-bg-muted

var(--sl-color-gray-1)

$bg-muted-hover

--sl-bg-muted-hover

var(--sl-color-gray-2)

$bg-muted-pressed

--sl-bg-muted-pressed

var(--sl-color-gray-3)

$bg-muted-plain

--sl-bg-muted-plain

color-mix(in srgb, var(--sl-color-gray-14) 0%, transparent)

$bg-muted-plain-hover

--sl-bg-muted-plain-hover

color-mix(in srgb, var(--sl-color-gray-14) 5%, transparent)

$bg-muted-plain-pressed

--sl-bg-muted-plain-pressed

color-mix(in srgb, var(--sl-color-gray-14) 10%, transparent)

$bg-accent

--sl-bg-accent

var(--sl-color-blue-2)

$bg-accent-hover

--sl-bg-accent-hover

var(--sl-color-blue-3)

$bg-accent-pressed

--sl-bg-accent-pressed

var(--sl-color-blue-4)

$bg-accent-plain

--sl-bg-accent-plain

color-mix(in srgb, var(--sl-color-blue-10) 0%, transparent)

$bg-accent-plain-hover

--sl-bg-accent-plain-hover

color-mix(in srgb, var(--sl-color-blue-10) 5%, transparent)

$bg-accent-plain-pressed

--sl-bg-accent-plain-pressed

color-mix(in srgb, var(--sl-color-blue-10) 10%, transparent)

$bg-accent-strong

--sl-bg-accent-strong

var(--sl-color-blue-10)

$bg-accent-strong-hover

--sl-bg-accent-strong-hover

var(--sl-color-blue-11)

$bg-accent-strong-pressed

--sl-bg-accent-strong-pressed

var(--sl-color-blue-12)

$bg-critical

--sl-bg-critical

var(--sl-color-red-1)

$bg-critical-plain

--sl-bg-critical-plain

color-mix(in srgb, var(--sl-color-red-9) 0%, transparent)

$bg-critical-plain-hover

--sl-bg-critical-plain-hover

color-mix(in srgb, var(--sl-color-red-9) 5%, transparent)

$bg-critical-plain-pressed

--sl-bg-critical-plain-pressed

color-mix(in srgb, var(--sl-color-red-9) 10%, transparent)

$bg-critical-strong

--sl-bg-critical-strong

var(--sl-color-red-9)

$bg-critical-strong-hover

--sl-bg-critical-strong-hover

var(--sl-color-red-10)

$bg-critical-strong-pressed

--sl-bg-critical-strong-pressed

var(--sl-color-red-11)

Foreground

Token

CSS Variable

Value

Preview

$fg

--sl-fg

var(--sl-color-gray-14)

$fg-soft

--sl-fg-soft

var(--sl-color-gray-10)

$fg-disabled

--sl-fg-disabled

var(--sl-color-gray-7)

$fg-inverted

--sl-fg-inverted

var(--sl-color-gray-0)

$fg-warning

--sl-fg-warning

var(--sl-color-yellow-9)

$fg-success

--sl-fg-success

var(--sl-color-green-9)

$fg-informational

--sl-fg-informational

var(--sl-color-blue-9)

$fg-muted

--sl-fg-muted

var(--sl-color-gray-12)

$fg-muted-hover

--sl-fg-muted-hover

var(--sl-color-gray-13)

$fg-muted-pressed

--sl-fg-muted-pressed

var(--sl-color-gray-14)

$fg-accent

--sl-fg-accent

var(--sl-color-blue-10)

$fg-accent-hover

--sl-fg-accent-hover

var(--sl-color-blue-11)

$fg-accent-pressed

--sl-fg-accent-pressed

var(--sl-color-blue-12)

$fg-critical

--sl-fg-critical

var(--sl-color-red-9)

$fg-critical-hover

--sl-fg-critical-hover

var(--sl-color-red-10)

$fg-critical-pressed

--sl-fg-critical-pressed

var(--sl-color-red-11)

Typography

Creates hierarchies, organizes information, and guides users through a product or experience.

Token

CSS Variable

Value

Preview

$font-weight-regular

--sl-font-weight-regular

400

$font-weight-medium

--sl-font-weight-medium

500

$font-weight-semibold

--sl-font-weight-semibold

600

$font-size-1

--sl-font-size-1

0.75rem

$font-size-2

--sl-font-size-2

0.875rem

$font-size-3

--sl-font-size-3

1rem

$font-size-4

--sl-font-size-4

1.25rem

$font-size-5

--sl-font-size-5

1.5rem

$letter-spacing-1

--sl-letter-spacing-1

0rem

$letter-spacing-2

--sl-letter-spacing-2

-0.00875rem

$letter-spacing-3

--sl-letter-spacing-3

-0.02rem

$letter-spacing-4

--sl-letter-spacing-4

-0.04rem

$line-height-1

--sl-line-height-1

1rem

$line-height-2

--sl-line-height-2

1.25rem

$line-height-3

--sl-line-height-3

1.5rem

$line-height-4

--sl-line-height-4

1.75rem

$line-height-5

--sl-line-height-5

2rem

$text-caption-1

--sl-text-caption-1

font: var(--sl-font-weight-medium) var(--sl-font-size-1) / var(--sl-line-height-1) var(--sl-font-family-sans); letter-spacing: var(--sl-letter-spacing-1);

$text-caption-2

--sl-text-caption-2

font: var(--sl-font-weight-regular) var(--sl-font-size-1) / var(--sl-line-height-1) var(--sl-font-family-sans); letter-spacing: var(--sl-letter-spacing-1);

$text-action

--sl-text-action

font: var(--sl-font-weight-semibold) var(--sl-font-size-2) / var(--sl-line-height-2) var(--sl-font-family-sans); letter-spacing: var(--sl-letter-spacing-2);

$text-emphasis

--sl-text-emphasis

font: var(--sl-font-weight-medium) var(--sl-font-size-2) / var(--sl-line-height-2) var(--sl-font-family-sans); letter-spacing: var(--sl-letter-spacing-2);

$text-body

--sl-text-body

font: var(--sl-font-weight-regular) var(--sl-font-size-2) / var(--sl-line-height-2) var(--sl-font-family-sans); letter-spacing: var(--sl-letter-spacing-2);

$text-display-1

--sl-text-display-1

font: var(--sl-font-weight-semibold) var(--sl-font-size-5) / var(--sl-line-height-5) var(--sl-font-family-sans); letter-spacing: var(--sl-letter-spacing-4);

$text-display-2

--sl-text-display-2

font: var(--sl-font-weight-semibold) var(--sl-font-size-4) / var(--sl-line-height-4) var(--sl-font-family-sans); letter-spacing: var(--sl-letter-spacing-4);

$text-display-3

--sl-text-display-3

font: var(--sl-font-weight-semibold) var(--sl-font-size-3) / var(--sl-line-height-3) var(--sl-font-family-sans); letter-spacing: var(--sl-letter-spacing-3);

$text-display-4

--sl-text-display-4

font: var(--sl-font-weight-regular) var(--sl-font-size-3) / var(--sl-line-height-3) var(--sl-font-family-sans); letter-spacing: var(--sl-letter-spacing-3);

Spacing

Defines the relationship between elements and makes the content more easily scannable.

Token

CSS Variable

Value

Preview

$space-0

--sl-space-0

0rem

$space-1

--sl-space-1

0.25rem

$space-2

--sl-space-2

0.5rem

$space-3

--sl-space-3

0.75rem

$space-4

--sl-space-4

1rem

$space-5

--sl-space-5

1.25rem

$space-6

--sl-space-6

1.5rem

$space-7

--sl-space-7

1.75rem

$space-8

--sl-space-8

2rem

$space-10

--sl-space-10

2.5rem

$space-12

--sl-space-12

3rem

$space-16

--sl-space-16

4rem

$space-20

--sl-space-20

5rem

$space-24

--sl-space-24

6rem

$space-28

--sl-space-28

7rem

$space-32

--sl-space-32

8rem

$space-05

--sl-space-05

0.125rem

$space-gap

--sl-space-gap

var(--sl-space-4)

Border

Defines the limits of a container and helps organize content.

Token

CSS Variable

Value

Preview

$border

--sl-border

1px solid var(--sl-color-gray-3)

$border-disabled

--sl-border-disabled

1px solid var(--sl-color-gray-6)

$border-success

--sl-border-success

1px solid var(--sl-color-green-3)

$border-informational

--sl-border-informational

1px solid var(--sl-color-blue-3)

$border-warning

--sl-border-warning

1px solid var(--sl-color-yellow-3)

$border-strong

--sl-border-strong

1px solid var(--sl-color-gray-5)

$border-strong-hover

--sl-border-strong-hover

1px solid var(--sl-color-gray-6)

$border-accent

--sl-border-accent

1px solid var(--sl-color-blue-3)

$border-accent-strong

--sl-border-accent-strong

1px solid var(--sl-color-blue-10)

$border-accent-strong-hover

--sl-border-accent-strong-hover

1px solid var(--sl-color-blue-11)

$border-critical

--sl-border-critical

1px solid var(--sl-color-red-3)

$border-critical-strong

--sl-border-critical-strong

1px solid var(--sl-color-red-8)

$border-critical-strong-hover

--sl-border-critical-strong-hover

1px solid var(--sl-color-red-9)

Border Radius

Defines the roundness of the corners of an element.

Token

CSS Variable

Value

Preview

$border-radius-none

--sl-border-radius-none

0rem

$border-radius-small

--sl-border-radius-small

0.25rem

$border-radius-medium

--sl-border-radius-medium

0.5rem

$border-radius-large

--sl-border-radius-large

0.75rem

$border-radius-full

--sl-border-radius-full

100%

Elevation

Creates spatial relationships by lifting elements from the background.

Token

CSS Variable

Value

Preview

$focus-ring

--sl-focus-ring

0rem 0rem 0rem 0.0625rem var(--sl-color-gray-0), 0rem 0rem 0rem 0.1875rem var(--sl-color-gray-5)

$focus-ring-critical

--sl-focus-ring-critical

0rem 0rem 0rem 0.0625rem var(--sl-color-gray-0), 0rem 0rem 0rem 0.1875rem var(--sl-color-red-6)

$focus-ring-accent

--sl-focus-ring-accent

0rem 0rem 0rem 0.0625rem var(--sl-color-gray-0), 0rem 0rem 0rem 0.1875rem var(--sl-color-blue-6)

$shadow-1

--sl-shadow-1

0rem 0.125rem 0.5rem 0rem rgba(0, 0, 0, 0.12)

$shadow-2

--sl-shadow-2

0rem 0.25rem 1rem 0rem rgba(0, 0, 0, 0.16)

$shadow-3

--sl-shadow-3

0rem 1.5rem 3rem 0rem rgba(0, 0, 0, 0.16)

$z-1

--sl-z-1

$z-2

--sl-z-2

100

$z-3

--sl-z-3

200

$z-4

--sl-z-4

300

$z-5

--sl-z-5

400

$z-6

--sl-z-6

500

$z-7

--sl-z-7

600

$z-8

--sl-z-8

700

$z-9

--sl-z-9

800

$z-10

--sl-z-10

900

Tokens