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(248, 248, 249)
`$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	rgb(40, 42, 43)
`$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(112, 117, 120)
`$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. 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(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-darkest` Darkest background for primary actions or highlights	rgb(0, 9, 43)
`$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-subaccount` Subaccount background color	rgb(255, 241, 179)
`$color-background-success` Success background color	rgb(0, 153, 74)
`$color-background-success-lightest` Lightest success background color	rgb(224, 255, 239)
`$color-background-trial` Trial account background color	rgb(199, 255, 226)
`$color-background-user` User avatar background color	rgb(200, 175, 240)
`$color-background-warning` Warning background color	rgb(228, 98, 22)
`$color-background-warning-lightest` Lightest warning background color	rgb(255, 236, 216)

Border colors#

Token	Value	Example
`$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. 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(200, 204, 207)
`$color-border-lighter` Lighter border color	rgb(228, 231, 233)
`$color-border-neutral` Neutral border color	rgb(2, 122, 197)
`$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#

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 8px 16px 0 rgba(40, 42, 43, 0.2)
`$shadow-border` Shadow border for inputs.	0 0 0 1px #888c8e
`$shadow-border-destructive` Light shadow border for destructive interactions.	0 0 0 1px #e22525
`$shadow-border-destructive-darker` Dark shadow border for destructive interactions	0 0 0 1px #600101
`$shadow-border-destructive-light` Light shadow border for destructive interactions.	0 0 0 1px #ecb6b6
`$shadow-border-destructive-lighter` Lighter shadow border for destructive interactions.	0 0 0 1px #f5dddd
`$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-error-light` Shadow border for inverse error inputs.	0 0 0 1px #ecb6b6
`$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 #e4e7e9
`$shadow-border-lighter` Lighter shadow border for disabled inputs.	0 0 0 1px #f8f8f9
`$shadow-border-primary` Default shadow border for primary interactions.	0 0 0 1px #027ac5
`$shadow-border-primary-dark` Dark shadow border for inputs hover.	0 0 0 1px #003e82
`$shadow-border-primary-darker` Darker shadow border for inputs active.	0 0 0 1px #032c5e
`$shadow-border-primary-light` Lighter shadow border for primary interactions.	0 0 0 1px #b3d3e9
`$shadow-border-primary-lighter` Lighter shadow border for primary interactions.	0 0 0 1px #dceaf4
`$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-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 12px 24px 4px rgba(40, 42, 43, 0.2)
`$shadow-low` Low elevation default shadow.	0 2px 4px 0 rgba(40, 42, 43, 0.3)

Colors#

Token	Value	Example
`$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(112, 117, 120)
`$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.

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#

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.

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	500	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-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(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-error-light` Light error text for inputs and error misc	rgb(236, 182, 182)	Example text: AgAccessibility rating: AAA
`$color-text-icon` Default icon color.	rgb(112, 117, 120)	Example text: AgAccessibility rating: AA
`$color-text-icon-inverse` Default icon color for inverse backgrounds.	rgb(200, 204, 207)	Example text: AgAccessibility rating: AAA
`$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(200, 204, 207)	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(136, 140, 142)	Example text: AgAccessibility rating: Fail
`$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(96, 1, 1)	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: AAA
`$color-text-link-light` Light shade of link text to be used in interactions	rgb(179, 211, 233)	Example text: AgAccessibility rating: AAA
`$color-text-neutral` Color for text indicating a neutral status.	rgb(0, 62, 130)	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(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(112, 117, 120)	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: Fail

Z indices#

Token	Value	Example
`$z-index-0`	2000	2000
`$z-index-10`	2010	2010
`$z-index-20`	2020	2020
`$z-index-30`	2030	2030
`$z-index-40`	2040	2040
`$z-index-50`	2050	2050
`$z-index-60`	2060	2060
`$z-index-70`	2070	2070
`$z-index-80`	2080	2080
`$z-index-90`	2090	2090

.css-mtfyde{-webkit-text-decoration:none;text-decoration:none;color:inherit;}.css-mtfyde:visited{color:inherit;}Paste

Design System