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.
Background colors#
Token | Value | Example |
---|---|---|
Default background color for any container | rgb(244, 244, 246) | |
Background color of the main page body | rgb(255, 255, 255) | |
Inverse background color of the main page body, the darkest gray in the system | rgb(18, 28, 45) | |
Primary brand background, accessible with inverse text | rgb(0, 20, 137) | |
Highlight brand background, accessible with black text | rgb(242, 47, 70) | |
Lightest highlight brand background, accessible with black text | rgba(242, 47, 70, 0.1) | |
Dark default background color | rgb(225, 227, 234) | |
Darker default background color | rgb(136, 145, 170) | |
Darkest default background color | rgb(75, 86, 113) | |
Background for destructive actions or highlights | rgb(214, 31, 31) | |
Dark background for destructive actions or highlights | rgb(117, 12, 12) | |
Darker background for destructive actions or highlights | rgb(74, 11, 11) | |
Light background for destructive actions or highlights | rgb(246, 177, 177) | |
Lighter background for destructive actions or highlights | rgb(252, 207, 207) | |
Lightest background for destructive actions or highlights | rgb(254, 236, 236) | |
Error background color | rgb(214, 31, 31) | |
Dark error background color | rgb(117, 12, 12) | |
Lightest error background color | rgb(254, 236, 236) | |
Inverse background color for any container. Must be used on color-background-body-inverse. | rgba(255, 255, 255, 0.1) | |
Light inverse background color for any container. Must be used on color-background-body-inverse. | rgba(255, 255, 255, 0.2) | |
Lightest neutral background color | rgb(235, 244, 255) | |
Background color for indicating a new status. | rgb(231, 220, 250) | |
Default background for overlays | rgba(6, 3, 58, 0.4) | |
Background for primary actions or highlights | rgb(2, 99, 224) | |
Dark background for primary actions or highlights | rgb(0, 20, 137) | |
Darker background for primary actions or highlights | rgb(3, 11, 93) | |
Darkest background for primary actions or highlights | rgb(6, 3, 58) | |
Light background for primary actions or highlights | rgb(153, 205, 255) | |
Lighter background for primary actions or highlights | rgb(204, 228, 255) | |
Lightest background for primary actions or highlights | rgb(235, 244, 255) | |
Required background color | rgb(235, 86, 86) | |
Background color for alternative striped rows | rgb(244, 244, 246) | |
Subaccount background color | rgb(255, 241, 179) | |
Success background color | rgb(20, 176, 83) | |
Lightest success background color | rgb(237, 253, 243) | |
Trial account background color | rgb(209, 250, 224) | |
User avatar background color | rgb(200, 175, 240) | |
Warning background color | rgb(244, 124, 34) | |
Lightest warning background color | rgb(254, 245, 238) |
Border colors#
Token | Value | Example |
---|---|---|
Default border color | rgb(136, 145, 170) | |
Dark border color | rgb(96, 107, 133) | |
Destructive border color | rgb(214, 31, 31) | |
Destructive focus border color | rgb(117, 12, 12) | |
Darker destructive hover border color | rgb(74, 11, 11) | |
Destructive focus border color | rgb(245, 138, 138) | |
Destructive focus border color | rgb(252, 207, 207) | |
Error border color | rgb(214, 31, 31) | |
Dark error border color | rgb(117, 12, 12) | |
Light error border color | rgb(245, 138, 138) | |
Lightest error border color | rgb(254, 236, 236) | |
Border on inverse backgrounds. Must be used on color-background-body-inverse. | rgba(255, 255, 255, 0.5) | |
Darker border on inverse backgrounds. Must be used on color-background-body-inverse. | rgba(255, 255, 255, 0.2) | |
Lighter border on inverse backgrounds. Must be used on color-background-body-inverse. | rgba(255, 255, 255, 0.9) | |
Lightest border on inverse backgrounds. Must be used on color-background-body-inverse. | rgb(255, 255, 255) | |
Light border color | rgb(202, 205, 216) | |
Lighter border color | rgb(225, 227, 234) | |
Neutral border color | rgb(2, 99, 224) | |
Light neutral border color | rgb(136, 145, 170) | |
Primary border color | rgb(2, 99, 224) | |
Dark primary border color | rgb(0, 20, 137) | |
Darker primary border color | rgb(3, 11, 93) | |
Light primary border color | rgb(102, 179, 255) | |
Lighter primary border color | rgb(204, 228, 255) | |
Success border color | rgb(20, 176, 83) | |
Light success border color | rgb(54, 213, 118) | |
Lightest success border color | rgb(237, 253, 243) | |
Warning border color | rgb(244, 124, 34) | |
Light warning border color | rgb(255, 179, 122) | |
Lightest warning border color | rgb(254, 245, 238) |
Border widths#
Token | Value | Example |
---|---|---|
Border width reset | 0 | |
Small border width | 1px | |
Large border width | 2px | |
Small border width | 4px | |
Large border width | 8px |
Box shadows#
Token | Value | Example |
---|---|---|
Default shadow. | 0 4px 16px 0 rgba(18, 28, 45, 0.2) | |
Shadow border for inputs. | 0 0 0 1px #8891aa | |
Light shadow border for destructive interactions. | 0 0 0 1px #d61f1f | |
Dark shadow border for destructive interactions | 0 0 0 1px #4a0b0b | |
Light shadow border for destructive interactions. | 0 0 0 1px #f6b1b1 | |
Lighter shadow border for destructive interactions. | 0 0 0 1px #fccfcf | |
Shadow border for error inputs. | 0 0 0 1px #d61f1f | |
Shadow border for error inputs hover. | 0 0 0 1px #750c0c | |
Shadow border for inverse error inputs. | 0 0 0 1px #eb5656 | |
Shadow border on interactive elements on inverse backgrounds. | 0 0 0 1px rgba(255, 255, 255, 0.5) | |
Darker shadow border on interactive elements on inverse backgrounds. | 0 0 0 1px rgba(255, 255, 255, 0.2) | |
Light shadow border on interactive elements on inverse backgrounds. | 0 0 0 1px rgba(255, 255, 255, 0.9) | |
Lightest shadow border on interactive elements on inverse backgrounds. | 0 0 0 1px #ffffff | |
Light shadow border for disabled inputs. | 0 0 0 1px #cacdd8 | |
Lighter shadow border for disabled inputs. | 0 0 0 1px #e1e3ea | |
Default shadow border for primary interactions. | 0 0 0 1px #0263e0 | |
Dark shadow border for inputs hover. | 0 0 0 1px #001489 | |
Darker shadow border for inputs active. | 0 0 0 1px #030b5d | |
Lighter shadow border for primary interactions. | 0 0 0 1px #99cdff | |
Lighter shadow border for primary interactions. | 0 0 0 1px #cce4ff | |
Shadow for cards. | 0 2px 8px 0 rgba(18, 28, 45, 0.1) | |
Shadow for focus ring on interactive elements. | 0 0 0 4px rgba(2, 99, 224, 0.7) | |
Shadow for focus ring on interactive elements on inverse backgrounds. | 0 0 0 4px rgba(255, 255, 255, 0.4) | |
High elevation default shadow. | 0 16px 24px 0 rgba(18, 28, 45, 0.2) | |
Low elevation default shadow. | 0 2px 8px 0 rgba(18, 28, 45, 0.1) |
Colors#
Token | Value | Example |
---|---|---|
Default branding color | rgb(0, 20, 137) | |
Twilio brand red | rgb(242, 47, 70) | |
Gray Color 0 | rgb(255, 255, 255) | |
Gray Color 1 | rgb(244, 244, 246) | |
Gray Color 2 | rgb(225, 227, 234) | |
Gray Color 3 | rgb(202, 205, 216) | |
Gray Color 4 | rgb(174, 178, 193) | |
Gray Color 5 | rgb(136, 145, 170) | |
Gray Color 6 | rgb(96, 107, 133) | |
Gray Color 7 | rgb(75, 86, 113) | |
Gray Color 8 | rgb(57, 71, 98) | |
Gray Color 9 | rgb(31, 48, 76) | |
Gray Color 10 | rgb(18, 28, 45) |
Fonts#
Token | Value | Example |
---|---|---|
| 'Fira Mono', 'Courier New', Courier, monospace | Ag |
| 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif | Ag |
Font sizes#
Token | Value | Example |
---|---|---|
Constant typography token for font size 10 | 0.625rem (10px) | Ag |
Constant typography token for font size 20 | 0.75rem (12px) | Ag |
Constant typography token for font size 30 | 0.875rem (14px) | Ag |
Constant typography token for font size 40 | 1rem (16px) | Ag |
Constant typography token for font size 50 | 1.125rem (18px) | Ag |
Constant typography token for font size 60 | 1.25rem (20px) | Ag |
Constant typography token for font size 70 | 1.5rem (24px) | Ag |
Constant typography token for font size 80 | 1.75rem (28px) | Ag |
Constant typography token for font size 90 | 2rem (32px) | Ag |
Constant typography token for font size 100 | 2.5rem (40px) | Ag |
Constant typography token for font size 110 | 3rem (48px) | Ag |
Font weights#
Token | Value | Example |
---|---|---|
Font weight for light weight | 400 | Ag |
Font weight for normal weight | 400 | Ag |
Font weight for medium weight | 500 | Ag |
Font weight for semibold weight | 600 | Ag |
Font weight for bold weight | 700 | Ag |
Line heights#
Token | Value | Example |
---|---|---|
Constant line-height token for line-height 0 | 0 (0px) | 0 |
Constant line-height token for line-height 10 | 1rem (16px) | 1rem |
Constant line-height token for line-height 20 | 1.25rem (20px) | 1.25rem |
Constant line-height token for line-height 30 | 1.25rem (20px) | 1.25rem |
Constant line-height token for line-height 40 | 1.5rem (24px) | 1.5rem |
Constant line-height token for line-height 50 | 1.75rem (28px) | 1.75rem |
Constant line-height token for line-height 60 | 1.75rem (28px) | 1.75rem |
Constant line-height token for line-height 70 | 2rem (32px) | 2rem |
Constant line-height token for line-height 80 | 2.5rem (40px) | 2.5rem |
Constant line-height token for line-height 90 | 2.75rem (44px) | 2.75rem |
Constant line-height token for line-height 100 | 3.25rem (52px) | 3.25rem |
Constant line-height token for line-height 110 | 4rem (64px) | 4rem |
Radii#
Token | Value | Example |
---|---|---|
Border radius reset | 0 | |
Small border radius | 2px | |
Large border radius | 4px | |
Larger border radius | 8px | |
Circular border radius | 50% |
Sizings#
Token | Value | Example |
---|---|---|
Generic sizing token scale for UI components. | 0 (0px) | 0 |
Generic sizing token scale for UI components. | 5.5rem (88px) | 5.5rem |
Generic sizing token scale for UI components. | 12rem (192px) | 12rem |
Generic sizing token scale for UI components. | 18.5rem (296px) | 18.5rem |
Generic sizing token scale for UI components. | 25rem (400px) | 25rem |
Generic sizing token scale for UI components. | 31.5rem (504px) | 31.5rem |
Generic sizing token scale for UI components. | 38rem (608px) | 38rem |
Generic sizing token scale for UI components. | 44.5rem (712px) | 44.5rem |
Generic sizing token scale for UI components. | 51rem (816px) | 51rem |
Generic sizing token scale for UI components. | 57.5rem (920px) | 57.5rem |
Generic sizing token scale for UI components. | 64rem (1024px) | 64rem |
Generic sizing token scale for UI components. | 70.5rem (1128px) | 70.5rem |
Generic sizing token scale for UI components. | 77rem (1232px) | 77rem |
Maps to line-height tokens 1:1 | 1rem (16px) | 1rem |
Maps to line-height tokens 1:1 | 1.25rem (20px) | 1.25rem |
Maps to line-height tokens 1:1 | 1.25rem (20px) | 1.25rem |
Maps to line-height tokens 1:1 | 1.5rem (24px) | 1.5rem |
Maps to line-height tokens 1:1 | 1.75rem (28px) | 1.75rem |
Maps to line-height tokens 1:1 | 1.75rem (28px) | 1.75rem |
Maps to line-height tokens 1:1 | 2rem (32px) | 2rem |
Maps to line-height tokens 1:1 | 2.5rem (40px) | 2.5rem |
Maps to line-height tokens 1:1 | 2.75rem (44px) | 2.75rem |
Maps to line-height tokens 1:1 | 3.25rem (52px) | 3.25rem |
Maps to line-height tokens 1:1 | 4rem (64px) | 4rem |
Sizing token for sidebar width. | 13.75rem (220px) | 13.75rem |
Generic square sizing token scale for UI components. | 0 (0px) | 0 |
Generic square sizing token scale for UI components. | 0.125rem (2px) | 0.125rem |
Generic square sizing token scale for UI components. | 0.25rem (4px) | 0.25rem |
Generic square sizing token scale for UI components. | 0.375rem (6px) | 0.375rem |
Generic square sizing token scale for UI components. | 0.5rem (8px) | 0.5rem |
Generic square sizing token scale for UI components. | 0.75rem (12px) | 0.75rem |
Generic square sizing token scale for UI components. | 1rem (16px) | 1rem |
Generic square sizing token scale for UI components. | 1.25rem (20px) | 1.25rem |
Generic square sizing token scale for UI components. | 1.5rem (24px) | 1.5rem |
Generic square sizing token scale for UI components. | 1.75rem (28px) | 1.75rem |
Generic square sizing token scale for UI components. | 2rem (32px) | 2rem |
Generic square sizing token scale for UI components. | 2.25rem (36px) | 2.25rem |
Generic square sizing token scale for UI components. | 2.5rem (40px) | 2.5rem |
Generic square sizing token scale for UI components. | 2.75rem (44px) | 2.75rem |
Generic square sizing token scale for UI components. | 3rem (48px) | 3rem |
Generic square sizing token scale for UI components. | 3.25rem (52px) | 3.25rem |
Generic square sizing token scale for UI components. | 3.5rem (56px) | 3.5rem |
Generic square sizing token scale for UI components. | 3.75rem (60px) | 3.75rem |
Generic square sizing token scale for UI components. | 4rem (64px) | 4rem |
Generic square sizing token scale for UI components. | 4.25rem (68px) | 4.25rem |
Generic square sizing token scale for UI components. | 4.5rem (72px) | 4.5rem |
Generic square sizing token scale for UI components. | 4.75rem (76px) | 4.75rem |
Spacings#
Token | Value | Example |
---|---|---|
| 0 (0px) | |
| 0.125rem (2px) | |
| 0.25rem (4px) | |
| 0.5rem (8px) | |
| 0.75rem (12px) | |
| 1rem (16px) | |
| 1.25rem (20px) | |
| 1.5rem (24px) | |
| 1.75rem (28px) | |
| 2rem (32px) | |
| 2.25rem (36px) | |
| 2.5rem (40px) | |
| 2.75rem (44px) | |
| 3rem (48px) | |
| 3.25rem (52px) | |
| 3.5rem (56px) | |
| 3.75rem (60px) | |
| 4rem (64px) | |
| 4.25rem (68px) | |
| 4.5rem (72px) | |
| 4.75rem (76px) | |
| -0.125rem (-2px) | |
| -0.25rem (-4px) | |
| -0.5rem (-8px) | |
| -0.75rem (-12px) | |
| -1rem (-16px) | |
| -1.25rem (-20px) | |
| -1.5rem (-24px) | |
| -1.75rem (-28px) | |
| -2rem (-32px) | |
| -2.25rem (-36px) | |
| -2.5rem (-40px) | |
| -2.75rem (-44px) | |
| -3rem (-48px) | |
| -3.25rem (-52px) | |
| -3.5rem (-56px) | |
| -3.75rem (-60px) | |
| -4rem (-64px) | |
| -4.25rem (-68px) | |
| -4.5rem (-72px) | |
| -4.75rem (-76px) |
Text colors#
Token | Value | Example |
---|---|---|
Body text color | rgb(18, 28, 45) | Example text: AgAccessibility rating: AAA |
Twilio brand red, accessible on large text only. | rgb(242, 47, 70) | Example text: AgAccessibility rating: Fail |
Text color used on any brand color | rgb(255, 255, 255) | Example text: AgAccessibility rating: AAA |
Error text for inputs and error misc | rgb(214, 31, 31) | Example text: AgAccessibility rating: AA |
Dark error text for inputs and error misc | rgb(173, 17, 17) | Example text: AgAccessibility rating: AAA |
Light error text for inputs and error misc | rgb(235, 86, 86) | Example text: AgAccessibility rating: AA |
Default icon color. | rgb(96, 107, 133) | Example text: AgAccessibility rating: AA |
Default icon color for inverse backgrounds. | rgb(136, 145, 170) | Example text: AgAccessibility rating: AA |
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 |
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 |
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 |
Link text | rgb(2, 99, 224) | Example text: AgAccessibility rating: AA |
Dark shade of link text to be used in interactions | rgb(0, 20, 137) | Example text: AgAccessibility rating: AAA |
Darker shade of link text to be used in interactions | rgb(3, 11, 93) | Example text: AgAccessibility rating: AAA |
Destructive link text | rgb(214, 31, 31) | Example text: AgAccessibility rating: AA |
Dark shade of destructive link text to be used in interactions | rgb(173, 17, 17) | Example text: AgAccessibility rating: AAA |
Darker shade of destructive link text to be used in interactions | rgb(74, 11, 11) | Example text: AgAccessibility rating: AAA |
Light shade of destructive link text to be used in interactions | rgb(246, 177, 177) | Example text: AgAccessibility rating: AAA |
Light shade of link text to be used in interactions | rgb(153, 205, 255) | Example text: AgAccessibility rating: AAA |
Color for text indicating a neutral status. | rgb(0, 20, 137) | Example text: AgAccessibility rating: AAA |
Color for text indicating a new status. | rgb(109, 46, 209) | Example text: AgAccessibility rating: AAA |
Text color for success text. | rgb(20, 176, 83) | Example text: AgAccessibility rating: Fail |
Color for warning text. | rgb(244, 124, 34) | Example text: AgAccessibility rating: AA |
Color for dark warning text. | rgb(195, 83, 35) | Example text: AgAccessibility rating: AA |
Weak body text for visual hierarchy. | rgb(96, 107, 133) | Example text: AgAccessibility rating: AA |
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 |
---|---|---|
| 0 | 0 |
| 10 | 10 |
| 20 | 20 |
| 30 | 30 |
| 40 | 40 |
| 50 | 50 |
| 60 | 60 |
| 70 | 70 |
| 80 | 80 |
| 90 | 90 |