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#

Token	Value	Example
`$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#

Token	Value	Example
`$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#

Token Value Example

Token	Value	Example
`$border-width-0` Border width reset	0
`$border-width-10` Small border width	1px
`$border-width-20` Large border width	2px

$border-width-0

Border width reset

$border-width-10

Small border width

1px

$border-width-20

Large border width

2px

Box shadows#

Token Value Example

Token	Value	Example
`$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)

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

Token	Value	Example
`$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#

Token Value Example

Token	Value	Example
`$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-family-code

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

$font-family-text

'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif

Font sizes#

Token	Value	Example
`$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#

Token	Value	Example
`$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#

Token	Value	Example
`$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#

Token	Value	Example
`$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#

Token	Value	Example
`$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#

Token	Value	Example
`$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#

Token	Value	Example
`$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#

Token	Value	Example
`$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

Design Tokens

Background colors.css-1xllqvi{-webkit-text-decoration:none;text-decoration:none;margin-left:0.5rem;color:#666a6d;}.css-1xllqvi:hover{-webkit-text-decoration:underline;text-decoration:underline;}#

Border colors#

Border widths#

Box shadows#

Colors#

Fonts#

Font sizes#

Font weights#

Line heights#

Radii#

Sizings#

Spacings#

Text colors#

Z indices#

Background colors#