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#

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

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

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-30` Small border width	4px
`$border-width-40` Large border width	8px

Box shadows#

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

Token	Value	Example
`$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-100` Gray Color 10	rgb(18, 28, 45)
`$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)

Fonts#

Token Value Example

Token	Value	Example
`$font-family-code`	'Fira Mono', 'Courier New', Courier, monospace	Ag
`$font-family-text`	Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif	Ag

$font-family-code

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

$font-family-text

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

Font sizes#

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

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

Line heights#

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

Radii#

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

Token	Value	Example
`$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	4rem (64px)	4rem
`$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-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-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#

Token	Value	Example
`$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)
`$space-negative-10`	-0.125rem (-2px)
`$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-20`	-0.25rem (-4px)
`$space-negative-200`	-4.75rem (-76px)
`$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)

Text colors#

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

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