Skip to content
Paste
UX Platform
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-destructive

Background for destructive actions or highlights

rgb(214, 31, 31)

$color-background-destructive-strong

Dark background for destructive actions or highlights

rgb(117, 12, 12)

$color-background-destructive-stronger

Darker background for destructive actions or highlights

rgb(74, 11, 11)

$color-background-destructive-strongest

Darkest background for destructive actions or highlights

rgb(49, 12, 12)

$color-background-destructive-weak

Light background for destructive actions or highlights

rgb(246, 177, 177)

$color-background-destructive-weaker

Lighter background for destructive actions or highlights

rgb(252, 207, 207)

$color-background-destructive-weakest

Lightest background for destructive actions or highlights

rgb(254, 236, 236)

$color-background-error

Error background color

rgb(214, 31, 31)

$color-background-error-strong

Dark error background color

rgb(117, 12, 12)

$color-background-error-weakest

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-strong

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

rgba(255, 255, 255, 0.2)

$color-background-neutral-weakest

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-strong

Dark background for primary actions or highlights

rgb(0, 20, 137)

$color-background-primary-stronger

Darker background for primary actions or highlights

rgb(3, 11, 93)

$color-background-primary-strongest

Darkest background for primary actions or highlights

rgb(6, 3, 58)

$color-background-primary-weak

Light background for primary actions or highlights

rgb(153, 205, 255)

$color-background-primary-weaker

Lighter background for primary actions or highlights

rgb(204, 228, 255)

$color-background-primary-weakest

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-strong

Dark default background color

rgb(225, 227, 234)

$color-background-stronger

Darker default background color

rgb(136, 145, 170)

$color-background-strongest

Darkest default background color

rgb(75, 86, 113)

$color-background-subaccount

Subaccount background color

rgb(255, 241, 179)

$color-background-success

Success background color

rgb(20, 176, 83)

$color-background-success-weakest

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-weakest

Lightest warning background color

rgb(254, 245, 238)

Border colors#

TokenValueExample

$color-border

Default border color

rgb(136, 145, 170)

$color-border-destructive

Destructive border color

rgb(214, 31, 31)

$color-border-destructive-strong

Destructive focus border color

rgb(117, 12, 12)

$color-border-destructive-stronger

Darker destructive hover border color

rgb(74, 11, 11)

$color-border-destructive-strongest

Darkest destructive hover border color

rgb(49, 12, 12)

$color-border-destructive-weak

Destructive focus border color

rgb(245, 138, 138)

$color-border-destructive-weaker

Destructive focus border color

rgb(252, 207, 207)

$color-border-destructive-weakest

Destructive focus border color

rgb(254, 236, 236)

$color-border-error

Error border color

rgb(214, 31, 31)

$color-border-error-strong

Dark error border color

rgb(117, 12, 12)

$color-border-error-weak

Light error border color

rgb(245, 138, 138)

$color-border-error-weakest

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-stronger

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

rgba(255, 255, 255, 0.9)

$color-border-inverse-strongest

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

rgb(255, 255, 255)

$color-border-inverse-weaker

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

rgba(255, 255, 255, 0.2)

$color-border-neutral

Neutral border color

rgb(2, 99, 224)

$color-border-neutral-weak

Light neutral border color

rgb(136, 145, 170)

$color-border-primary

Primary border color

rgb(2, 99, 224)

$color-border-primary-strong

Dark primary border color

rgb(0, 20, 137)

$color-border-primary-stronger

Darker primary border color

rgb(3, 11, 93)

$color-border-primary-strongest

Darkest primary border color

rgb(6, 3, 58)

$color-border-primary-weak

Light primary border color

rgb(102, 179, 255)

$color-border-primary-weaker

Lighter primary border color

rgb(204, 228, 255)

$color-border-primary-weakest

Lightest primary border color

rgb(235, 244, 255)

$color-border-strong

Dark border color

rgb(96, 107, 133)

$color-border-success

Success border color

rgb(20, 176, 83)

$color-border-success-weak

Light success border color

rgb(54, 213, 118)

$color-border-success-weakest

Lightest success border color

rgb(237, 253, 243)

$color-border-warning

Warning border color

rgb(244, 124, 34)

$color-border-warning-weak

Light warning border color

rgb(255, 179, 122)

$color-border-warning-weakest

Lightest warning border color

rgb(254, 245, 238)

$color-border-weak

Light border color

rgb(202, 205, 216)

$color-border-weaker

Lighter border color

rgb(225, 227, 234)

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-strong

Dark shadow border for destructive interactions

0 0 0 1px #750c0c

$shadow-border-destructive-stronger

Dark shadow border for destructive interactions

0 0 0 1px #4a0b0b

$shadow-border-destructive-strongest

Darkest shadow border for destructive interactions

0 0 0 1px #310c0c

$shadow-border-destructive-weak

Light shadow border for destructive interactions.

0 0 0 1px #f6b1b1

$shadow-border-destructive-weaker

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-strong

Shadow border for error inputs hover.

0 0 0 1px #750c0c

$shadow-border-error-weak

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-strong

Light shadow border on interactive elements on inverse backgrounds.

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

$shadow-border-inverse-strongest

Lightest shadow border on interactive elements on inverse backgrounds.

0 0 0 1px #ffffff

$shadow-border-inverse-weaker

Darker shadow border on interactive elements on inverse backgrounds.

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

$shadow-border-primary

Default shadow border for primary interactions.

0 0 0 1px #0263e0

$shadow-border-primary-strong

Dark shadow border for inputs hover.

0 0 0 1px #001489

$shadow-border-primary-stronger

Darker shadow border for inputs active.

0 0 0 1px #030b5d

$shadow-border-primary-strongest

Darkest shadow border for inputs active.

0 0 0 1px #06033a

$shadow-border-primary-weak

Lighter shadow border for primary interactions.

0 0 0 1px #99cdff

$shadow-border-primary-weaker

Lighter shadow border for primary interactions.

0 0 0 1px #cce4ff

$shadow-border-strong

Light shadow border for disabled inputs.

0 0 0 1px #cacdd8

$shadow-border-stronger

Lighter shadow border for disabled inputs.

0 0 0 1px #e1e3ea

$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#

Heads up about font sizes in Paste!

Font-sizes in our Paste tokens use rem values. Unlike em values which are relative to their parent element, rem values are relative to the html element. If you aren't using the Theme.Provider component, you must set font-size: 100%; on your page's html tag for the font-sizes to be sized correctly as 1rem=16px.

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-strong

Dark error text for inputs and error misc

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

$color-text-error-weak

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-destructive

Destructive link text

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

$color-text-link-destructive-strong

Dark shade of destructive link text to be used in interactions

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

$color-text-link-destructive-stronger

Darker shade of destructive link text to be used in interactions

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

$color-text-link-destructive-weak

Light shade of destructive link text to be used in interactions

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

$color-text-link-strong

Dark shade of link text to be used in interactions

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

$color-text-link-stronger

Darker shade of link text to be used in interactions

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

$color-text-link-weak

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-strong

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

$color-text-weakest

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

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

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.