Paste

Design System

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(248, 248, 249)

$color-background-body

Background color of the main page body

rgb(255, 255, 255)

$color-background-brand

Primary brand background, accessible with inverse text

rgb(35, 54, 89)

$color-background-brand-highlight

Highlight brand background, accessible with black text

rgb(242, 47, 70)

$color-background-dark

Dark default background color

rgb(228, 231, 233)

$color-background-darker

Darker default background color

rgb(200, 204, 207)

$color-background-darkest

Darkest default background color

rgb(102, 106, 109)

$color-background-destructive

Background for destructive actions or highlights

rgb(226, 37, 37)

$color-background-destructive-dark

Dark background for destructive actions or highlights

rgb(146, 18, 0)

$color-background-destructive-darker

Darker background for destructive actions or highlights

rgb(96, 1, 1)

$color-background-destructive-light

Light background for destructive actions or highlights

rgb(236, 182, 182)

$color-background-destructive-lighter

Lighter background for destructive actions or highlights

rgb(245, 221, 221)

$color-background-destructive-lightest

Lightest background for destructive actions or highlights

rgb(255, 233, 231)

$color-background-error

Error background color

rgb(226, 37, 37)

$color-background-error-dark

Dark error background color

rgb(146, 18, 0)

$color-background-error-lightest

Lightest error background color

rgb(255, 233, 231)

$color-background-inverse

Inverse background color for any container

rgb(79, 83, 85)

$color-background-neutral-lightest

Lightest neutral background color

rgb(245, 248, 255)

$color-background-overlay

Default background for overlays

rgba(40, 42, 43, 0.5)

$color-background-primary

Background for primary actions or highlights

rgb(2, 122, 197)

$color-background-primary-dark

Dark background for primary actions or highlights

rgb(0, 62, 130)

$color-background-primary-darker

Darker background for primary actions or highlights

rgb(3, 44, 94)

$color-background-primary-light

Light background for primary actions or highlights

rgb(179, 211, 233)

$color-background-primary-lighter

Lighter background for primary actions or highlights

rgb(220, 234, 244)

$color-background-primary-lightest

Lightest background for primary actions or highlights

rgb(245, 248, 255)

$color-background-required

Required background color

rgb(222, 88, 88)

$color-background-row-striped

Background color for alternative striped rows

rgb(248, 248, 249)

$color-background-success

Success background color

rgb(0, 153, 74)

$color-background-success-lightest

Lightest success background color

rgb(224, 255, 239)

$color-background-warning

Warning background color

rgb(228, 98, 22)

$color-background-warning-lightest

Lightest warning background color

rgb(255, 236, 216)

Border colors#

TokenValueExample

$color-border

Default border color

rgb(136, 140, 142)

$color-border-dark

Dark border color

rgb(136, 140, 142)

$color-border-destructive

Destructive border color

rgb(226, 37, 37)

$color-border-destructive-dark

Destructive focus border color

rgb(146, 18, 0)

$color-border-destructive-darker

Darker destructive hover border color

rgb(96, 1, 1)

$color-border-destructive-light

Destructive focus border color

rgb(236, 182, 182)

$color-border-destructive-lighter

Destructive focus border color

rgb(245, 221, 221)

$color-border-error

Error border color

rgb(226, 37, 37)

$color-border-error-dark

Dark error border color

rgb(146, 18, 0)

$color-border-error-light

Light error border color

rgb(222, 88, 88)

$color-border-error-lightest

Lightest error border color

rgb(255, 233, 231)

$color-border-inverse

Border on inverse backgrounds

rgb(255, 255, 255)

$color-border-light

Light border color

rgb(228, 231, 233)

$color-border-neutral-light

Light neutral border color

rgb(200, 204, 207)

$color-border-primary

Primary border color

rgb(2, 122, 197)

$color-border-primary-dark

Dark primary border color

rgb(0, 62, 130)

$color-border-primary-darker

Darker primary border color

rgb(3, 44, 94)

$color-border-primary-light

Light primary border color

rgb(179, 211, 233)

$color-border-primary-lighter

Lighter primary border color

rgb(220, 234, 244)

$color-border-success

Success border color

rgb(0, 153, 74)

$color-border-success-lightest

Lightest success border color

rgb(224, 255, 239)

$color-border-warning

Warning border color

rgb(228, 98, 22)

$color-border-warning-light

Light warning border color

rgb(242, 133, 16)

$color-border-warning-lightest

Lightest warning border color

rgb(255, 236, 216)

Border widths#

TokenValueExample

$border-width-0

Border width reset

0

$border-width-10

Small border width

1px

$border-width-20

Large border width

2px

Box shadows#

TokenValueExample

$shadow-border

Shadow border for inputs.

0 0 0 1px #888c8e

$shadow-border-error

Shadow border for error inputs.

0 0 0 1px #e22525

$shadow-border-error-dark

Shadow border for error inputs hover.

0 0 0 1px #921200

$shadow-border-light

Shadow border for disabled inputs.

0 0 0 1px #e4e7e9

$shadow-border-primary-dark

Shadow border for inputs hover.

0 0 0 1px #003e82

$shadow-border-primary-darker

Shadow border for inputs active.

0 0 0 1px #032c5e

$shadow-card

Shadow for cards.

0 2px 4px 0 rgba(40, 42, 43, 0.3)

$shadow-focus

Shadow for focus ring on interactive elements

0 0 0 4px rgba(2, 122, 197, 0.8)

Colors#

TokenValueExample

$color-brand

Default branding color

rgb(35, 54, 89)

$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(249, 250, 251)

$color-gray-100

Gray Color 10

rgb(40, 42, 43)

$color-gray-20

Gray Color 2

rgb(248, 248, 249)

$color-gray-30

Gray Color 3

rgb(242, 243, 244)

$color-gray-40

Gray Color 4

rgb(228, 231, 233)

$color-gray-50

Gray Color 5

rgb(200, 204, 207)

$color-gray-60

Gray Color 6

rgb(136, 140, 142)

$color-gray-70

Gray Color 7

rgb(102, 106, 109)

$color-gray-80

Gray Color 8

rgb(79, 83, 85)

$color-gray-90

Gray Color 9

rgb(66, 69, 71)

Fonts#

Heads up about fonts in Paste!

Paste leaves it up to you to load the fonts needed for the theme you've selected. Console uses Whitney ScreenSmart and SendGrid uses Colfax. Checkout the font section in the getting started guide for more details.

TokenValueExample

$font-family-code

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

Ag

$font-family-text

'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, 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-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-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 weights#

TokenValueExample

$font-weight-bold

Font weight for bold weight

700

Ag

$font-weight-light

Font weight for light weight

300

Ag

$font-weight-medium

Font weight for medium weight

500

Ag

$font-weight-normal

Font weight for normal weight

400

Ag

$font-weight-semibold

Font weight for semibold weight

500

Ag

Line heights#

TokenValueExample

$line-height-10

Constant line-height token for line-height 10

1rem (16px)
1rem

$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

3.75rem (60px)
3.75rem

$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.5rem (24px)
1.5rem

$line-height-40

Constant line-height token for line-height 40

1.75rem (28px)
1.75rem

$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.25rem (36px)
2.25rem

$line-height-90

Constant line-height token for line-height 90

2.5rem (40px)
2.5rem

Radii#

TokenValueExample

$border-radius-0

Border radius reset

0

$border-radius-10

Small border radius

3px

$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-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-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-icon-10

Maps to line-height tokens 1:1

1rem (16px)
1rem

$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

3.75rem (60px)
3.75rem

$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.5rem (24px)
1.5rem

$size-icon-40

Maps to line-height tokens 1:1

1.75rem (28px)
1.75rem

$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.25rem (36px)
2.25rem

$size-icon-90

Maps to line-height tokens 1:1

2.5rem (40px)
2.5rem

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

Generic square sizing token scale for UI components.

0.25rem (4px)
0.25rem

$size-square-200

Generic square sizing token scale for UI components.

4.75rem (76px)
4.75rem

$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

Spacings#

TokenValueExample

$space-0

0 (0px)

$space-10

0.125rem (2px)

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

0.25rem (4px)

$space-200

4.75rem (76px)

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

Text colors#

TokenValueExample

$color-text

Body text color

rgb(40, 42, 43)
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(226, 37, 37)
Example text: AgAccessibility rating: AA

$color-text-error-dark

Dark error text for inputs and error misc

rgb(146, 18, 0)
Example text: AgAccessibility rating: AAA

$color-text-icon

Default icon color.

rgb(102, 106, 109)
Example text: AgAccessibility rating: AA

$color-text-inverse

Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-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-inverse.

rgb(200, 204, 207)
Example text: AgAccessibility rating: AA

$color-text-label

Text color for field labels.

rgb(40, 42, 43)
Example text: AgAccessibility rating: AAA

$color-text-link

Link text

rgb(0, 94, 166)
Example text: AgAccessibility rating: AA

$color-text-link-dark

Dark shade of link text to be used in interactions

rgb(0, 62, 130)
Example text: AgAccessibility rating: AAA

$color-text-link-darker

Darker shade of link text to be used in interactions

rgb(3, 44, 94)
Example text: AgAccessibility rating: AAA

$color-text-link-destructive

Destructive link text

rgb(226, 37, 37)
Example text: AgAccessibility rating: AA

$color-text-link-destructive-dark

Dark shade of destructive link text to be used in interactions

rgb(178, 6, 0)
Example text: AgAccessibility rating: AAA

$color-text-link-destructive-darker

Darker shade of destructive link text to be used in interactions

rgb(146, 18, 0)
Example text: AgAccessibility rating: AAA

$color-text-link-destructive-light

Light shade of destructive link text to be used in interactions

rgb(236, 182, 182)
Example text: AgAccessibility rating: Fail

$color-text-link-light

Light shade of link text to be used in interactions

rgb(179, 211, 233)
Example text: AgAccessibility rating: AA

$color-text-placeholder

Input placeholder text.

rgb(102, 106, 109)
Example text: AgAccessibility rating: AA

$color-text-success

Text color for success text.

rgb(0, 153, 74)
Example text: AgAccessibility rating: Fail

$color-text-warning

Color for warning text.

rgb(228, 98, 22)
Example text: AgAccessibility rating: Fail

$color-text-warning-dark

Color for dark warning text.

rgb(168, 62, 0)
Example text: AgAccessibility rating: AA

$color-text-weak

Weak body text for visual hierarchy.

rgb(102, 106, 109)
Example text: AgAccessibility rating: AA

$color-text-weaker

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

rgb(200, 204, 207)
Example text: AgAccessibility rating: AA

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

Support

If you need support, please open a new issue in our GitHub repository. Please try to provide as much detail as possible in your issue.

Contributing

The Paste design system is open source and contributions are welcome. Check out the project on GitHub to learn more about contributing.

Copyright © 2020 Twilio, Inc.