Foundations
Design Tokens

Design Tokens

Shoreline design tokens include Color, Typography, Spacing, Border, Radius, and Elevation. Want to know more about design tokens? Read the documentation (opens in a new tab).

Color

Reflects a product's style, creates hierarchy, and provides meaning to components and messages. Learn more (opens in a new tab) 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 (opens in a new tab) 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 (opens in a new tab) 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 (opens in a new tab) 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 (opens in a new tab) 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 (opens in a new tab) 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
0
--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