Skip to content
Paste
Design System
Change the site theme
GitHub

Design Tokens

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes.

Tokens are named for their use case, rather than their value. For example $color-background-error is named to indicate the appropriate background color for an error, as opposed to $color-background-red which is less specific and could be used in a number of ways depending on cultural context and design language. This makes their intended use clear and intentional, and allows us to develop a scalable and consistent visual language.

In Paste, 1 rem unit = 16 pixels.

Use design tokens in your Sketch files through Abstract. Get the Console theme and SendGrid theme.

Background colors#

TokenValueExample

$color-background

Default background color for any container

rgb(244, 244, 246)

$color-background-body

Background color of the main page body

rgb(255, 255, 255)

$color-background-body-inverse

Inverse background color of the main page body, the darkest gray in the system

rgb(18, 28, 45)

$color-background-brand

Primary brand background, accessible with inverse text

rgb(0, 20, 137)

$color-background-brand-highlight

Highlight brand background, accessible with black text

rgb(242, 47, 70)

$color-background-brand-highlight-lightest

Lightest highlight brand background, accessible with black text

rgba(242, 47, 70, 0.1)

$color-background-dark

Dark default background color

rgb(225, 227, 234)

$color-background-darker

Darker default background color

rgb(136, 145, 170)

$color-background-darkest

Darkest default background color

rgb(75, 86, 113)

$color-background-destructive

Background for destructive actions or highlights

rgb(214, 31, 31)

$color-background-destructive-dark

Dark background for destructive actions or highlights

rgb(117, 12, 12)

$color-background-destructive-darker

Darker background for destructive actions or highlights

rgb(74, 11, 11)

$color-background-destructive-light

Light background for destructive actions or highlights

rgb(246, 177, 177)

$color-background-destructive-lighter

Lighter background for destructive actions or highlights

rgb(252, 207, 207)

$color-background-destructive-lightest

Lightest background for destructive actions or highlights

rgb(254, 236, 236)

$color-background-error

Error background color

rgb(214, 31, 31)

$color-background-error-dark

Dark error background color

rgb(117, 12, 12)

$color-background-error-lightest

Lightest error background color

rgb(254, 236, 236)

$color-background-inverse

Inverse background color for any container. Must be used on color-background-body-inverse.

rgba(255, 255, 255, 0.1)

$color-background-inverse-light

Light inverse background color for any container. Must be used on color-background-body-inverse.

rgba(255, 255, 255, 0.2)

$color-background-neutral-lightest

Lightest neutral background color

rgb(235, 244, 255)

$color-background-new

Background color for indicating a new status.

rgb(231, 220, 250)

$color-background-overlay

Default background for overlays

rgba(6, 3, 58, 0.4)

$color-background-primary

Background for primary actions or highlights

rgb(2, 99, 224)

$color-background-primary-dark

Dark background for primary actions or highlights

rgb(0, 20, 137)

$color-background-primary-darker

Darker background for primary actions or highlights

rgb(3, 11, 93)

$color-background-primary-darkest

Darkest background for primary actions or highlights

rgb(6, 3, 58)

$color-background-primary-light

Light background for primary actions or highlights

rgb(153, 205, 255)

$color-background-primary-lighter

Lighter background for primary actions or highlights

rgb(204, 228, 255)

$color-background-primary-lightest

Lightest background for primary actions or highlights

rgb(235, 244, 255)

$color-background-required

Required background color

rgb(235, 86, 86)

$color-background-row-striped

Background color for alternative striped rows

rgb(244, 244, 246)

$color-background-subaccount

Subaccount background color

rgb(255, 241, 179)

$color-background-success

Success background color

rgb(20, 176, 83)

$color-background-success-lightest

Lightest success background color

rgb(237, 253, 243)

$color-background-trial

Trial account background color

rgb(209, 250, 224)

$color-background-user

User avatar background color

rgb(200, 175, 240)

$color-background-warning

Warning background color

rgb(244, 124, 34)

$color-background-warning-lightest

Lightest warning background color

rgb(254, 245, 238)

Border colors#

TokenValueExample

$color-border

Default border color

rgb(136, 145, 170)

$color-border-dark

Dark border color

rgb(96, 107, 133)

$color-border-destructive

Destructive border color

rgb(214, 31, 31)

$color-border-destructive-dark

Destructive focus border color

rgb(117, 12, 12)

$color-border-destructive-darker

Darker destructive hover border color

rgb(74, 11, 11)

$color-border-destructive-light

Destructive focus border color

rgb(245, 138, 138)

$color-border-destructive-lighter

Destructive focus border color

rgb(252, 207, 207)

$color-border-error

Error border color

rgb(214, 31, 31)

$color-border-error-dark

Dark error border color

rgb(117, 12, 12)

$color-border-error-light

Light error border color

rgb(245, 138, 138)

$color-border-error-lightest

Lightest error border color

rgb(254, 236, 236)

$color-border-inverse

Border on inverse backgrounds. Must be used on color-background-body-inverse.

rgba(255, 255, 255, 0.5)

$color-border-inverse-darker

Darker border on inverse backgrounds. Must be used on color-background-body-inverse.

rgba(255, 255, 255, 0.2)

$color-border-inverse-lighter

Lighter border on inverse backgrounds. Must be used on color-background-body-inverse.

rgba(255, 255, 255, 0.9)

$color-border-inverse-lightest

Lightest border on inverse backgrounds. Must be used on color-background-body-inverse.

rgb(255, 255, 255)

$color-border-light

Light border color

rgb(202, 205, 216)

$color-border-lighter

Lighter border color

rgb(225, 227, 234)

$color-border-neutral

Neutral border color

rgb(2, 99, 224)

$color-border-neutral-light

Light neutral border color

rgb(136, 145, 170)

$color-border-primary

Primary border color

rgb(2, 99, 224)

$color-border-primary-dark

Dark primary border color

rgb(0, 20, 137)

$color-border-primary-darker

Darker primary border color

rgb(3, 11, 93)

$color-border-primary-light

Light primary border color

rgb(102, 179, 255)

$color-border-primary-lighter

Lighter primary border color

rgb(204, 228, 255)

$color-border-success

Success border color

rgb(20, 176, 83)

$color-border-success-light

Light success border color

rgb(54, 213, 118)

$color-border-success-lightest

Lightest success border color

rgb(237, 253, 243)

$color-border-warning

Warning border color

rgb(244, 124, 34)

$color-border-warning-light

Light warning border color

rgb(255, 179, 122)

$color-border-warning-lightest

Lightest warning border color

rgb(254, 245, 238)

Border widths#

TokenValueExample

$border-width-0

Border width reset

0

$border-width-10

Small border width

1px

$border-width-20

Large border width

2px

$border-width-30

Small border width

4px

$border-width-40

Large border width

8px

Box shadows#

TokenValueExample

$shadow

Default shadow.

0 4px 16px 0 rgba(18, 28, 45, 0.2)

$shadow-border

Shadow border for inputs.

0 0 0 1px #8891aa

$shadow-border-destructive

Light shadow border for destructive interactions.

0 0 0 1px #d61f1f

$shadow-border-destructive-darker

Dark shadow border for destructive interactions

0 0 0 1px #4a0b0b

$shadow-border-destructive-light

Light shadow border for destructive interactions.

0 0 0 1px #f6b1b1

$shadow-border-destructive-lighter

Lighter shadow border for destructive interactions.

0 0 0 1px #fccfcf

$shadow-border-error

Shadow border for error inputs.

0 0 0 1px #d61f1f

$shadow-border-error-dark

Shadow border for error inputs hover.

0 0 0 1px #750c0c

$shadow-border-error-light

Shadow border for inverse error inputs.

0 0 0 1px #eb5656

$shadow-border-inverse

Shadow border on interactive elements on inverse backgrounds.

0 0 0 1px rgba(255, 255, 255, 0.5)

$shadow-border-inverse-darker

Darker shadow border on interactive elements on inverse backgrounds.

0 0 0 1px rgba(255, 255, 255, 0.2)

$shadow-border-inverse-light

Light shadow border on interactive elements on inverse backgrounds.

0 0 0 1px rgba(255, 255, 255, 0.9)

$shadow-border-inverse-lightest

Lightest shadow border on interactive elements on inverse backgrounds.

0 0 0 1px #ffffff

$shadow-border-light

Light shadow border for disabled inputs.

0 0 0 1px #cacdd8

$shadow-border-lighter

Lighter shadow border for disabled inputs.

0 0 0 1px #e1e3ea

$shadow-border-primary

Default shadow border for primary interactions.

0 0 0 1px #0263e0

$shadow-border-primary-dark

Dark shadow border for inputs hover.

0 0 0 1px #001489

$shadow-border-primary-darker

Darker shadow border for inputs active.

0 0 0 1px #030b5d

$shadow-border-primary-light

Lighter shadow border for primary interactions.

0 0 0 1px #99cdff

$shadow-border-primary-lighter

Lighter shadow border for primary interactions.

0 0 0 1px #cce4ff

$shadow-card

Shadow for cards.

0 2px 8px 0 rgba(18, 28, 45, 0.1)

$shadow-focus

Shadow for focus ring on interactive elements.

0 0 0 4px rgba(2, 99, 224, 0.7)

$shadow-focus-inverse

Shadow for focus ring on interactive elements on inverse backgrounds.

0 0 0 4px rgba(255, 255, 255, 0.4)

$shadow-high

High elevation default shadow.

0 16px 24px 0 rgba(18, 28, 45, 0.2)

$shadow-low

Low elevation default shadow.

0 2px 8px 0 rgba(18, 28, 45, 0.1)

Colors#

TokenValueExample

$color-brand

Default branding color

rgb(0, 20, 137)

$color-brand-highlight

Twilio brand red

rgb(242, 47, 70)

$color-gray-0

Gray Color 0

rgb(255, 255, 255)

$color-gray-10

Gray Color 1

rgb(244, 244, 246)

$color-gray-20

Gray Color 2

rgb(225, 227, 234)

$color-gray-30

Gray Color 3

rgb(202, 205, 216)

$color-gray-40

Gray Color 4

rgb(174, 178, 193)

$color-gray-50

Gray Color 5

rgb(136, 145, 170)

$color-gray-60

Gray Color 6

rgb(96, 107, 133)

$color-gray-70

Gray Color 7

rgb(75, 86, 113)

$color-gray-80

Gray Color 8

rgb(57, 71, 98)

$color-gray-90

Gray Color 9

rgb(31, 48, 76)

$color-gray-100

Gray Color 10

rgb(18, 28, 45)

Fonts#

TokenValueExample

$font-family-code

'Fira Mono', 'Courier New', Courier, monospace

Ag

$font-family-text

'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif

Ag

Font sizes#

TokenValueExample

$font-size-10

Constant typography token for font size 10

0.625rem (10px)

Ag

$font-size-20

Constant typography token for font size 20

0.75rem (12px)

Ag

$font-size-30

Constant typography token for font size 30

0.875rem (14px)

Ag

$font-size-40

Constant typography token for font size 40

1rem (16px)

Ag

$font-size-50

Constant typography token for font size 50

1.125rem (18px)

Ag

$font-size-60

Constant typography token for font size 60

1.25rem (20px)

Ag

$font-size-70

Constant typography token for font size 70

1.5rem (24px)

Ag

$font-size-80

Constant typography token for font size 80

1.75rem (28px)

Ag

$font-size-90

Constant typography token for font size 90

2rem (32px)

Ag

$font-size-100

Constant typography token for font size 100

2.5rem (40px)

Ag

$font-size-110

Constant typography token for font size 110

3rem (48px)

Ag

Font weights#

TokenValueExample

$font-weight-light

Font weight for light weight

400

Ag

$font-weight-normal

Font weight for normal weight

400

Ag

$font-weight-medium

Font weight for medium weight

500

Ag

$font-weight-semibold

Font weight for semibold weight

600

Ag

$font-weight-bold

Font weight for bold weight

700

Ag

Line heights#

TokenValueExample

$line-height-0

Constant line-height token for line-height 0

0 (0px)
0

$line-height-10

Constant line-height token for line-height 10

1rem (16px)
1rem

$line-height-20

Constant line-height token for line-height 20

1.25rem (20px)
1.25rem

$line-height-30

Constant line-height token for line-height 30

1.25rem (20px)
1.25rem

$line-height-40

Constant line-height token for line-height 40

1.5rem (24px)
1.5rem

$line-height-50

Constant line-height token for line-height 50

1.75rem (28px)
1.75rem

$line-height-60

Constant line-height token for line-height 60

1.75rem (28px)
1.75rem

$line-height-70

Constant line-height token for line-height 70

2rem (32px)
2rem

$line-height-80

Constant line-height token for line-height 80

2.5rem (40px)
2.5rem

$line-height-90

Constant line-height token for line-height 90

2.75rem (44px)
2.75rem

$line-height-100

Constant line-height token for line-height 100

3.25rem (52px)
3.25rem

$line-height-110

Constant line-height token for line-height 110

4rem (64px)
4rem

Radii#

TokenValueExample

$border-radius-0

Border radius reset

0

$border-radius-10

Small border radius

2px

$border-radius-20

Large border radius

4px

$border-radius-30

Larger border radius

8px

$border-radius-circle

Circular border radius

50%

Sizings#

TokenValueExample

$size-0

Generic sizing token scale for UI components.

0 (0px)
0

$size-10

Generic sizing token scale for UI components.

5.5rem (88px)
5.5rem

$size-20

Generic sizing token scale for UI components.

12rem (192px)
12rem

$size-30

Generic sizing token scale for UI components.

18.5rem (296px)
18.5rem

$size-40

Generic sizing token scale for UI components.

25rem (400px)
25rem

$size-50

Generic sizing token scale for UI components.

31.5rem (504px)
31.5rem

$size-60

Generic sizing token scale for UI components.

38rem (608px)
38rem

$size-70

Generic sizing token scale for UI components.

44.5rem (712px)
44.5rem

$size-80

Generic sizing token scale for UI components.

51rem (816px)
51rem

$size-90

Generic sizing token scale for UI components.

57.5rem (920px)
57.5rem

$size-100

Generic sizing token scale for UI components.

64rem (1024px)
64rem

$size-110

Generic sizing token scale for UI components.

70.5rem (1128px)
70.5rem

$size-120

Generic sizing token scale for UI components.

77rem (1232px)
77rem

$size-icon-10

Maps to line-height tokens 1:1

1rem (16px)
1rem

$size-icon-20

Maps to line-height tokens 1:1

1.25rem (20px)
1.25rem

$size-icon-30

Maps to line-height tokens 1:1

1.25rem (20px)
1.25rem

$size-icon-40

Maps to line-height tokens 1:1

1.5rem (24px)
1.5rem

$size-icon-50

Maps to line-height tokens 1:1

1.75rem (28px)
1.75rem

$size-icon-60

Maps to line-height tokens 1:1

1.75rem (28px)
1.75rem

$size-icon-70

Maps to line-height tokens 1:1

2rem (32px)
2rem

$size-icon-80

Maps to line-height tokens 1:1

2.5rem (40px)
2.5rem

$size-icon-90

Maps to line-height tokens 1:1

2.75rem (44px)
2.75rem

$size-icon-100

Maps to line-height tokens 1:1

3.25rem (52px)
3.25rem

$size-icon-110

Maps to line-height tokens 1:1

4rem (64px)
4rem

$size-sidebar

Sizing token for sidebar width.

13.75rem (220px)
13.75rem

$size-square-0

Generic square sizing token scale for UI components.

0 (0px)
0

$size-square-10

Generic square sizing token scale for UI components.

0.125rem (2px)
0.125rem

$size-square-20

Generic square sizing token scale for UI components.

0.25rem (4px)
0.25rem

$size-square-25

Generic square sizing token scale for UI components.

0.375rem (6px)
0.375rem

$size-square-30

Generic square sizing token scale for UI components.

0.5rem (8px)
0.5rem

$size-square-40

Generic square sizing token scale for UI components.

0.75rem (12px)
0.75rem

$size-square-50

Generic square sizing token scale for UI components.

1rem (16px)
1rem

$size-square-60

Generic square sizing token scale for UI components.

1.25rem (20px)
1.25rem

$size-square-70

Generic square sizing token scale for UI components.

1.5rem (24px)
1.5rem

$size-square-80

Generic square sizing token scale for UI components.

1.75rem (28px)
1.75rem

$size-square-90

Generic square sizing token scale for UI components.

2rem (32px)
2rem

$size-square-100

Generic square sizing token scale for UI components.

2.25rem (36px)
2.25rem

$size-square-110

Generic square sizing token scale for UI components.

2.5rem (40px)
2.5rem

$size-square-120

Generic square sizing token scale for UI components.

2.75rem (44px)
2.75rem

$size-square-130

Generic square sizing token scale for UI components.

3rem (48px)
3rem

$size-square-140

Generic square sizing token scale for UI components.

3.25rem (52px)
3.25rem

$size-square-150

Generic square sizing token scale for UI components.

3.5rem (56px)
3.5rem

$size-square-160

Generic square sizing token scale for UI components.

3.75rem (60px)
3.75rem

$size-square-170

Generic square sizing token scale for UI components.

4rem (64px)
4rem

$size-square-180

Generic square sizing token scale for UI components.

4.25rem (68px)
4.25rem

$size-square-190

Generic square sizing token scale for UI components.

4.5rem (72px)
4.5rem

$size-square-200

Generic square sizing token scale for UI components.

4.75rem (76px)
4.75rem

Spacings#

TokenValueExample

$space-0

0 (0px)

$space-10

0.125rem (2px)

$space-20

0.25rem (4px)

$space-30

0.5rem (8px)

$space-40

0.75rem (12px)

$space-50

1rem (16px)

$space-60

1.25rem (20px)

$space-70

1.5rem (24px)

$space-80

1.75rem (28px)

$space-90

2rem (32px)

$space-100

2.25rem (36px)

$space-110

2.5rem (40px)

$space-120

2.75rem (44px)

$space-130

3rem (48px)

$space-140

3.25rem (52px)

$space-150

3.5rem (56px)

$space-160

3.75rem (60px)

$space-170

4rem (64px)

$space-180

4.25rem (68px)

$space-190

4.5rem (72px)

$space-200

4.75rem (76px)

$space-negative-10

-0.125rem (-2px)

$space-negative-20

-0.25rem (-4px)

$space-negative-30

-0.5rem (-8px)

$space-negative-40

-0.75rem (-12px)

$space-negative-50

-1rem (-16px)

$space-negative-60

-1.25rem (-20px)

$space-negative-70

-1.5rem (-24px)

$space-negative-80

-1.75rem (-28px)

$space-negative-90

-2rem (-32px)

$space-negative-100

-2.25rem (-36px)

$space-negative-110

-2.5rem (-40px)

$space-negative-120

-2.75rem (-44px)

$space-negative-130

-3rem (-48px)

$space-negative-140

-3.25rem (-52px)

$space-negative-150

-3.5rem (-56px)

$space-negative-160

-3.75rem (-60px)

$space-negative-170

-4rem (-64px)

$space-negative-180

-4.25rem (-68px)

$space-negative-190

-4.5rem (-72px)

$space-negative-200

-4.75rem (-76px)

Text colors#

TokenValueExample

$color-text

Body text color

rgb(18, 28, 45)
Example text: AgAccessibility rating: AAA

$color-text-brand-highlight

Twilio brand red, accessible on large text only.

rgb(242, 47, 70)
Example text: AgAccessibility rating: Fail

$color-text-brand-inverse

Text color used on any brand color

rgb(255, 255, 255)
Example text: AgAccessibility rating: AAA

$color-text-error

Error text for inputs and error misc

rgb(214, 31, 31)
Example text: AgAccessibility rating: AA

$color-text-error-dark

Dark error text for inputs and error misc

rgb(173, 17, 17)
Example text: AgAccessibility rating: AAA

$color-text-error-light

Light error text for inputs and error misc

rgb(235, 86, 86)
Example text: AgAccessibility rating: AA

$color-text-icon

Default icon color.

rgb(96, 107, 133)
Example text: AgAccessibility rating: AA

$color-text-icon-inverse

Default icon color for inverse backgrounds.

rgb(136, 145, 170)
Example text: AgAccessibility rating: AA

$color-text-inverse

Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.

rgb(255, 255, 255)
Example text: AgAccessibility rating: AAA

$color-text-inverse-weak

Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.

rgb(174, 178, 193)
Example text: AgAccessibility rating: AAA

$color-text-inverse-weaker

Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.

rgb(96, 107, 133)
Example text: AgAccessibility rating: AA

$color-text-link

Link text

rgb(2, 99, 224)
Example text: AgAccessibility rating: AA

$color-text-link-dark

Dark shade of link text to be used in interactions

rgb(0, 20, 137)
Example text: AgAccessibility rating: AAA

$color-text-link-darker

Darker shade of link text to be used in interactions

rgb(3, 11, 93)
Example text: AgAccessibility rating: AAA

$color-text-link-destructive

Destructive link text

rgb(214, 31, 31)
Example text: AgAccessibility rating: AA

$color-text-link-destructive-dark

Dark shade of destructive link text to be used in interactions

rgb(173, 17, 17)
Example text: AgAccessibility rating: AAA

$color-text-link-destructive-darker

Darker shade of destructive link text to be used in interactions

rgb(74, 11, 11)
Example text: AgAccessibility rating: AAA

$color-text-link-destructive-light

Light shade of destructive link text to be used in interactions

rgb(246, 177, 177)
Example text: AgAccessibility rating: AAA

$color-text-link-light

Light shade of link text to be used in interactions

rgb(153, 205, 255)
Example text: AgAccessibility rating: AAA

$color-text-neutral

Color for text indicating a neutral status.

rgb(0, 20, 137)
Example text: AgAccessibility rating: AAA

$color-text-new

Color for text indicating a new status.

rgb(109, 46, 209)
Example text: AgAccessibility rating: AAA

$color-text-success

Text color for success text.

rgb(20, 176, 83)
Example text: AgAccessibility rating: Fail

$color-text-warning

Color for warning text.

rgb(244, 124, 34)
Example text: AgAccessibility rating: AA

$color-text-warning-dark

Color for dark warning text.

rgb(195, 83, 35)
Example text: AgAccessibility rating: AA

$color-text-weak

Weak body text for visual hierarchy.

rgb(96, 107, 133)
Example text: AgAccessibility rating: AA

$color-text-weaker

Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.

rgb(174, 178, 193)
Example text: AgAccessibility rating: Fail

Z indices#

TokenValueExample

$z-index-0

0
0

$z-index-10

10
10

$z-index-20

20
20

$z-index-30

30
30

$z-index-40

40
40

$z-index-50

50
50

$z-index-60

60
60

$z-index-70

70
70

$z-index-80

80
80

$z-index-90

90
90

Black lives matter.