Paste

Design System

Design Tokens

Paste is using tokens as part of the design system. Tokens allow us to have a consistent yet agnostic naming convention completely devoid from the actual face value. Replacing the need to set hardcoded values (like hex codes, font sizes, or border thickness) affords us the opportunity to develop a scalable and consistent visual language that can be used across different platforms and Business Units (BUs). This allows design and engineering to work synchronously and efficiently.

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

#F8F8F9

$color-background-body

Background color of the main page body

#FFFFFF

$color-background-brand

Primary brand background, accessible with inverse text

#233659

$color-background-brand-highlight

Highlight brand background, accessible with black text

#F22F46

$color-background-destructive

Background for destructive actions or highlights

#E22525

$color-background-destructive-dark

Dark background for destructive actions or highlights

#921200

$color-background-destructive-darker

Darker background for destructive actions or highlights

#600101

$color-background-destructive-light

Light background for destructive actions or highlights

#ECB6B6

$color-background-destructive-lighter

Lighter background for destructive actions or highlights

#F5DDDD

$color-background-destructive-lightest

Lightest background for destructive actions or highlights

#FFE9E7

$color-background-error

Error background color

#E22525

$color-background-error-lightest

Lightest error background color

#FFE9E7

$color-background-inverse

Inverse background color for any container

#4F5355

$color-background-neutral-lightest

Lightest neutral background color

#F5F8FF

$color-background-primary

Background for primary actions or highlights

#027AC5

$color-background-primary-dark

Dark background for primary actions or highlights

#003E82

$color-background-primary-darker

Darker background for primary actions or highlights

#032C5E

$color-background-primary-light

Light background for primary actions or highlights

#B3D3E9

$color-background-primary-lighter

Lighter background for primary actions or highlights

#DCEAF4

$color-background-primary-lightest

Lightest background for primary actions or highlights

#F5F8FF

$color-background-row-striped

Background color for alternative striped rows

#F8F8F9

$color-background-success

Success background color

#00994A

$color-background-success-lightest

Lightest success background color

#E0FFEF

$color-background-warning

Warning background color

#E46216

$color-background-warning-lightest

Lightest warning background color

#FFECD8

Border colors#

TokenValueExample

$color-border

Default border color

#C8CCCF

$color-border-dark

Dark border color

#888C8E

$color-border-destructive

Destructive border color

#E22525

$color-border-destructive-dark

Destructive focus border color

#921200

$color-border-destructive-darker

Destructive hover border color

#600101

$color-border-destructive-light

Destructive focus border color

#ECB6B6

$color-border-destructive-lighter

Destructive focus border color

#F5DDDD

$color-border-error

Error border color

#E22525

$color-border-error-light

Light error border color

#DE5858

$color-border-error-lightest

Lightest error border color

#FFE9E7

$color-border-input

Input border color

#888C8E

$color-border-input-focus

Input focus border color

#027AC5

$color-border-input-hover

Input hover border color

#027AC5

$color-border-light

Light border color

#E4E7E9

$color-border-neutral-light

Light neutral border color

#C8CCCF

$color-border-primary

Primary border color

#027AC5

$color-border-primary-dark

Dark primary border color

#003E82

$color-border-primary-darker

Darker primary border color

#032C5E

$color-border-primary-light

Light primary border color

#B3D3E9

$color-border-primary-lighter

Lighter primary border color

#DCEAF4

$color-border-success

Success border color

#00994A

$color-border-success-lightest

Lightest success border color

#E0FFEF

$color-border-warning

Warning border color

#E46216

$color-border-warning-light

Light warning border color

#F28510

$color-border-warning-lightest

Lightest warning border color

#FFECD8

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

#233659

$color-brand-highlight

Twilio brand red

#F22F46

$color-gray-0

Gray Color 0

#FFFFFF

$color-gray-10

Gray Color 1

#F9FAFB

$color-gray-100

Gray Color 10

#282A2B

$color-gray-20

Gray Color 2

#F8F8F9

$color-gray-30

Gray Color 3

#F2F3F4

$color-gray-40

Gray Color 4

#E4E7E9

$color-gray-50

Gray Color 5

#C8CCCF

$color-gray-60

Gray Color 6

#888C8E

$color-gray-70

Gray Color 7

#666A6D

$color-gray-80

Gray Color 8

#4F5355

$color-gray-90

Gray Color 9

#424547

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

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

Ag

$font-size-100

Constant typography token for font size 100

2.5rem

Ag

$font-size-110

Constant typography token for font size 110

3rem

Ag

$font-size-20

Constant typography token for font size 20

0.75rem

Ag

$font-size-30

Constant typography token for font size 30

0.875rem

Ag

$font-size-40

Constant typography token for font size 40

1rem

Ag

$font-size-50

Constant typography token for font size 50

1.125rem

Ag

$font-size-60

Constant typography token for font size 60

1.25rem

Ag

$font-size-70

Constant typography token for font size 70

1.5rem

Ag

$font-size-80

Constant typography token for font size 80

1.75rem

Ag

$font-size-90

Constant typography token for font size 90

2rem

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 font size 10

1rem
1rem

$line-height-100

Constant line-height token for font size 100

3.25rem
3.25rem

$line-height-110

Constant line-height token for font size 110

3.75rem
3.75rem

$line-height-20

Constant line-height token for font size 20

1.25rem
1.25rem

$line-height-30

Constant line-height token for font size 30

1.5rem
1.5rem

$line-height-40

Constant line-height token for font size 40

1.75rem
1.75rem

$line-height-50

Constant line-height token for font size 50

1.75rem
1.75rem

$line-height-60

Constant line-height token for font size 60

1.75rem
1.75rem

$line-height-70

Constant line-height token for font size 70

2rem
2rem

$line-height-80

Constant line-height token for font size 80

2.25rem
2.25rem

$line-height-90

Constant line-height token for font size 90

2.5rem
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
0

$size-10

Generic sizing token scale for UI components.

5.5rem
5.5rem

$size-100

Generic sizing token scale for UI components.

64rem
64rem

$size-110

Generic sizing token scale for UI components.

70.5rem
70.5rem

$size-120

Generic sizing token scale for UI components.

77rem
77rem

$size-20

Generic sizing token scale for UI components.

12rem
12rem

$size-30

Generic sizing token scale for UI components.

18.5rem
18.5rem

$size-40

Generic sizing token scale for UI components.

25rem
25rem

$size-50

Generic sizing token scale for UI components.

31.5rem
31.5rem

$size-60

Generic sizing token scale for UI components.

38rem
38rem

$size-70

Generic sizing token scale for UI components.

44.5rem
44.5rem

$size-80

Generic sizing token scale for UI components.

51rem
51rem

$size-90

Generic sizing token scale for UI components.

57.5rem
57.5rem

$size-icon-10

Icon sizing token

1rem
1rem

$size-icon-20

Icon sizing token

1.25rem
1.25rem

$size-icon-30

Icon sizing token

1.5rem
1.5rem

$size-icon-40

Icon sizing token

2rem
2rem

Spacings#

TokenValueExample

$space-0

0

$space-10

0.125rem

$space-100

2.25rem

$space-110

2.5rem

$space-120

2.75rem

$space-130

3rem

$space-140

3.25rem

$space-150

3.5rem

$space-160

3.75rem

$space-170

4rem

$space-180

4.25rem

$space-190

4.5rem

$space-20

0.25rem

$space-200

4.75rem

$space-30

0.5rem

$space-40

0.75rem

$space-50

1rem

$space-60

1.25rem

$space-70

1.5rem

$space-80

1.75rem

$space-90

2rem

Text colors#

TokenValueExample

$color-text

Body text color

#282A2B
Example text: AgAccessibility rating: AAA

$color-text-brand-highlight

Twilio brand red, accessible on large text only.

#F22F46
Example text: AgAccessibility rating: Fail

$color-text-brand-inverse

Text color used on any brand color

#FFFFFF
Example text: AgAccessibility rating: AAA

$color-text-error

Error text for inputs and error misc

#E22525
Example text: AgAccessibility rating: AA

$color-text-error-dark

Dark error text for inputs and error misc

#921200
Example text: AgAccessibility rating: AAA

$color-text-icon

Default icon color.

#666A6D
Example text: AgAccessibility rating: AA

$color-text-inverse

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

#FFFFFF
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.

#C8CCCF
Example text: AgAccessibility rating: AA

$color-text-label

Text color for field labels.

#282A2B
Example text: AgAccessibility rating: AAA

$color-text-link

Link text

#005EA6
Example text: AgAccessibility rating: AA

$color-text-link-dark

Dark shade of link text to be used in interactions

#003E82
Example text: AgAccessibility rating: AAA

$color-text-link-darker

Darker shade of link text to be used in interactions

#032C5E
Example text: AgAccessibility rating: AAA

$color-text-link-destructive

Destructive link text

#E22525
Example text: AgAccessibility rating: AA

$color-text-link-destructive-dark

Dark shade of destructive link text to be used in interactions

#B20600
Example text: AgAccessibility rating: AAA

$color-text-link-destructive-darker

Darker shade of destructive link text to be used in interactions

#921200
Example text: AgAccessibility rating: AAA

$color-text-link-destructive-light

Light shade of destructive link text to be used in interactions

#ECB6B6
Example text: AgAccessibility rating: Fail

$color-text-link-light

Light shade of link text to be used in interactions

#B3D3E9
Example text: AgAccessibility rating: AA

$color-text-placeholder

Input placeholder text.

#666A6D
Example text: AgAccessibility rating: AA

$color-text-success

Text color for success text.

#00994A
Example text: AgAccessibility rating: Fail

$color-text-warning

Color for warning text.

#E46216
Example text: AgAccessibility rating: Fail

$color-text-warning-dark

Color for dark warning text.

#A83E00
Example text: AgAccessibility rating: AA

$color-text-weak

Weak body text for visual hierarchy.

#666A6D
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