Design Tokens

Shoreline design tokens include Color, Typography, Spacing, Border, Radius, and Elevation. Want to know more about design tokens? Read the documentation.

Color

Reflects a product’s style, creates hierarchy, and provides meaning to components and messages. Learn more about colors rationale and best practices.

Background

Token

Value

Preview

--sl-bg-base

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

--sl-bg-base-disabled

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

--sl-bg-base-strong

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

--sl-bg-base-strong-disabled

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

--sl-bg-base-soft

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

--sl-bg-warning

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

--sl-bg-success

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

--sl-bg-informational

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

--sl-bg-inverted

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

--sl-bg-inverted-strong

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

--sl-bg-muted

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

--sl-bg-muted-hover

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

--sl-bg-muted-pressed

color-mix(in srgb, var(--sl-color-gray-12) 15%, transparent)

--sl-bg-muted-plain

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

--sl-bg-muted-plain-hover

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

--sl-bg-muted-plain-pressed

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

--sl-bg-accent

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

--sl-bg-accent-hover

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

--sl-bg-accent-pressed

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

--sl-bg-accent-plain

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

--sl-bg-accent-plain-hover

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

--sl-bg-accent-plain-pressed

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

--sl-bg-accent-strong

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

--sl-bg-accent-strong-hover

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

--sl-bg-accent-strong-pressed

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

--sl-bg-critical

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

--sl-bg-critical-plain

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

--sl-bg-critical-plain-hover

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

--sl-bg-critical-plain-pressed

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

--sl-bg-critical-strong

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

--sl-bg-critical-strong-hover

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

--sl-bg-critical-strong-pressed

var(--sl-color-red-12)

Foreground

Token

Value

Preview

--sl-fg-base

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

--sl-fg-base-soft

var(--sl-color-gray-9)

--sl-fg-base-disabled

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

--sl-fg-inverted

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

--sl-fg-warning

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

--sl-fg-success

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

--sl-fg-informational

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

--sl-fg-muted

var(--sl-color-gray-11)

--sl-fg-muted-hover

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

--sl-fg-muted-pressed

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

--sl-fg-accent

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

--sl-fg-accent-hover

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

--sl-fg-accent-pressed

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

--sl-fg-critical

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

--sl-fg-critical-hover

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

--sl-fg-critical-pressed

var(--sl-color-red-12)

Primitive

Token

Value

Preview

--sl-color-gray-0

#FFFFFF

--sl-color-gray-1

#F5F5F5

--sl-color-gray-2

#EBEBEB

--sl-color-gray-3

#E0E0E0

--sl-color-gray-4

#D6D6D6

--sl-color-gray-5

#C2C2C2

--sl-color-gray-6

#ADADAD

--sl-color-gray-7

#999999

--sl-color-gray-8

#858585

--sl-color-gray-9

#707070

--sl-color-gray-10

#5C5C5C

--sl-color-gray-11

#3D3D3D

--sl-color-gray-12

#1F1F1F

--sl-color-gray-13

#000000

--sl-color-red-1

#FDF6F5

--sl-color-red-2

#FFEDEA

--sl-color-red-3

#FFDFD9

--sl-color-red-4

#FFD0C7

--sl-color-red-5

#FFBBAD

--sl-color-red-6

#FF9E8B

--sl-color-red-7

#FF7F68

--sl-color-red-8

#F95D47

--sl-color-red-9

#EC3727

--sl-color-red-10

#D31A15

--sl-color-red-11

#B40202

--sl-color-red-12

#940303

--sl-color-red-13

#720000

--sl-color-orange-1

#FDF5E9

--sl-color-orange-2

#FFEDCD

--sl-color-orange-3

#FFE0AE

--sl-color-orange-4

#FED392

--sl-color-orange-5

#FEBC64

--sl-color-orange-6

#FFA138

--sl-color-orange-7

#F78612

--sl-color-orange-8

#E57001

--sl-color-orange-9

#CC5E01

--sl-color-orange-10

#B24D01

--sl-color-orange-11

#963E01

--sl-color-orange-12

#7B3001

--sl-color-orange-13

#622401

--sl-color-yellow-1

#FBF7D4

--sl-color-yellow-2

#FDF5AD

--sl-color-yellow-3

#FAEC6D

--sl-color-yellow-4

#FADE1E

--sl-color-yellow-5

#E9C701

--sl-color-yellow-6

#D8B401

--sl-color-yellow-7

#C5A001

--sl-color-yellow-8

#B18D01

--sl-color-yellow-9

#9C7901

--sl-color-yellow-10

#866701

--sl-color-yellow-11

#715401

--sl-color-yellow-12

#5C4401

--sl-color-yellow-13

#493401

--sl-color-green-1

#E9FCE3

--sl-color-green-2

#CEFDC0

--sl-color-green-3

#AFF79E

--sl-color-green-4

#97EF86

--sl-color-green-5

#74E26C

--sl-color-green-6

#4FD051

--sl-color-green-7

#28BC37

--sl-color-green-8

#08A822

--sl-color-green-9

#019213

--sl-color-green-10

#017D10

--sl-color-green-11

#016810

--sl-color-green-12

#01540E

--sl-color-green-13

#01410B

--sl-color-teal-1

#E9FAF8

--sl-color-teal-2

#CFF8F4

--sl-color-teal-3

#ABF2EB

--sl-color-teal-4

#8DEAE3

--sl-color-teal-5

#66DBD3

--sl-color-teal-6

#40CAC2

--sl-color-teal-7

#10B6AF

--sl-color-teal-8

#01A29B

--sl-color-teal-9

#018D88

--sl-color-teal-10

#017873

--sl-color-teal-11

#016460

--sl-color-teal-12

#0D504D

--sl-color-teal-13

#133D3B

--sl-color-blue-1

#F1F8FD

--sl-color-blue-2

#E1F3FF

--sl-color-blue-3

#CBE9FF

--sl-color-blue-4

#B6DFFF

--sl-color-blue-5

#97CFFE

--sl-color-blue-6

#79BCFB

--sl-color-blue-7

#5AA8F7

--sl-color-blue-8

#3993F4

--sl-color-blue-9

#157BF4

--sl-color-blue-10

#0366DD

--sl-color-blue-11

#0155B7

--sl-color-blue-12

#014592

--sl-color-blue-13

#013672

--sl-color-purple-1

#F9F5FD

--sl-color-purple-2

#F5EAFE

--sl-color-purple-3

#EDDCFE

--sl-color-purple-4

#E5CFFE

--sl-color-purple-5

#DABAFD

--sl-color-purple-6

#CBA3FC

--sl-color-purple-7

#BC8AFB

--sl-color-purple-8

#AD71F8

--sl-color-purple-9

#9C56F3

--sl-color-purple-10

#883CE6

--sl-color-purple-11

#7225D2

--sl-color-purple-12

#5C12B6

--sl-color-purple-13

#460B93

--sl-color-pink-1

#FDF5F7

--sl-color-pink-2

#FFEBF2

--sl-color-pink-3

#FFDFEB

--sl-color-pink-4

#FFC8DC

--sl-color-pink-5

#FEB2CD

--sl-color-pink-6

#FF98BF

--sl-color-pink-7

#FE78AC

--sl-color-pink-8

#EF5997

--sl-color-pink-9

#DE387F

--sl-color-pink-10

#CA226A

--sl-color-pink-11

#AF0956

--sl-color-pink-12

#8F0246

--sl-color-pink-13

#74043B

--sl-color-cyan-1

#E6FAFD

--sl-color-cyan-2

#C6F9FF

--sl-color-cyan-3

#A5F1FF

--sl-color-cyan-4

#89E8FB

--sl-color-cyan-5

#61D9F4

--sl-color-cyan-6

#34C6E9

--sl-color-cyan-7

#13B1DB

--sl-color-cyan-8

#029DC9

--sl-color-cyan-9

#0187B5

--sl-color-cyan-10

#0172A0

--sl-color-cyan-11

#015E8A

--sl-color-cyan-12

#014B74

--sl-color-cyan-13

#013A5E

Typography

Creates hierarchies, organizes information, and guides users through a product or experience. Learn more about typography rationale and best practices.

Token

Value

Preview

--sl-font-weight-regular

400

--sl-font-weight-medium

500

--sl-font-weight-semibold

600

--sl-font-size-1

0.75rem

--sl-font-size-2

0.875rem

--sl-font-size-3

1rem

--sl-font-size-4

1.25rem

--sl-font-size-5

1.5rem

--sl-letter-spacing-1

0rem

--sl-letter-spacing-2

-0.00875rem

--sl-letter-spacing-3

-0.02rem

--sl-letter-spacing-4

-0.04rem

--sl-line-height-1

1rem

--sl-line-height-2

1.25rem

--sl-line-height-3

1.5rem

--sl-line-height-4

1.75rem

--sl-line-height-5

2rem

--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);

--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);

--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);

--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);

--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);

--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);

--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);

--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);

--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. Learn more about spacing rationale and best practices.

Token

Value

Preview

--sl-space-0

0rem

--sl-space-1

0.25rem

--sl-space-2

0.5rem

--sl-space-3

0.75rem

--sl-space-4

1rem

--sl-space-5

1.25rem

--sl-space-6

1.5rem

--sl-space-7

1.75rem

--sl-space-8

2rem

--sl-space-10

2.5rem

--sl-space-12

3rem

--sl-space-16

4rem

--sl-space-20

5rem

--sl-space-24

6rem

--sl-space-28

7rem

--sl-space-32

8rem

--sl-space-05

0.125rem

--sl-space-gap

var(--sl-space-4)

Border

Defines the limits of a container and helps organize content. Learn more about border rationale and best practices.

Token

Value

Preview

--sl-border-base

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

--sl-border-base-disabled

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

--sl-border-base-strong

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

--sl-border-base-strong-hover

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

--sl-border-success

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

--sl-border-informational

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

--sl-border-warning

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

--sl-border-accent

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

--sl-border-accent-strong

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

--sl-border-accent-strong-hover

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

--sl-border-critical

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

--sl-border-critical-strong

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

--sl-border-critical-strong-hover

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

Radius

Defines the roundness of the corners of an element. Learn more about radius rationale and best practices.

Token

Value

Preview

--sl-radius-0

0rem

--sl-radius-1

0.25rem

--sl-radius-2

0.5rem

--sl-radius-3

0.75rem

--sl-radius-full

9999rem

Elevation

Creates spatial relationships by lifting elements from the background. Learn more about elevation rationale and best practices.

Token

Value

Preview

--sl-focus-ring-base

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

--sl-focus-ring-critical

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

--sl-focus-ring-accent

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

--sl-shadow-1

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

--sl-shadow-2

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

--sl-z-1

--sl-z-2

100

--sl-z-3

200

--sl-z-4

300

--sl-z-5

400

--sl-z-6

500

--sl-z-7

600

--sl-z-8

700

--sl-z-9

800

--sl-z-10

900

Color