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.
Token | Value | Example |
---|---|---|
Background color used for containers. | rgb(244, 244, 246) | |
Background color used to represent an entity or person as "available". | rgb(20, 176, 83) | |
Background color used for the main page body. | rgb(255, 255, 255) | |
Inverse background color used for the main page body. | rgb(18, 28, 45) | |
Background color used for brand. | rgb(0, 20, 137) | |
Background color used for brand highlights. | rgb(242, 47, 70) | |
Weakest background color used for brand highlights. | rgba(242, 47, 70, 0.1) | |
Strong background color used for brand. | rgb(3, 11, 93) | |
Stronger background color used for brand. | rgb(6, 3, 58) | |
Background color used to represent an entity or person as "busy". | rgb(244, 124, 34) | |
Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. | rgb(244, 244, 246) | |
Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. | rgb(235, 244, 255) | |
Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. | rgb(237, 253, 243) | |
Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. | rgb(245, 240, 252) | |
Background color used for destructive actions or highlights. | rgb(214, 31, 31) | |
Strong background color used for destructive actions or highlights. | rgb(117, 12, 12) | |
Stronger background color used for destructive actions or highlights. | rgb(74, 11, 11) | |
Strongest background color used for destructive actions or highlights. | rgb(49, 12, 12) | |
Weak background color used for destructive actions or highlights. | rgb(246, 177, 177) | |
Weaker background color used for destructive actions or highlights. | rgb(252, 207, 207) | |
Weakest background color used for destructive actions or highlights. | rgb(254, 236, 236) | |
Background color used for error alerts and toasts. | rgb(214, 31, 31) | |
Strongest background color used for error alerts and toasts. | rgb(117, 12, 12) | |
Stronger error background color | rgb(74, 11, 11) | |
Weakest background color used for error alerts and toasts. | rgb(254, 236, 236) | |
Inverse background color used for containers. | rgb(31, 48, 76) | |
Strong inverse background color used for containers. | rgb(57, 71, 98) | |
Weakest background color used for neutral or default variants. | rgb(235, 244, 255) | |
Background color used to represent a new status. | rgb(245, 240, 252) | |
Background color used to represent an entity or person as "offline". | rgb(174, 178, 193) | |
Background color used for overlays. | rgba(6, 3, 58, 0.4) | |
Background color used for primary actions or highlights. | rgb(2, 99, 224) | |
Strong background color used for primary actions or highlights. | rgb(0, 20, 137) | |
Stronger background color used for primary actions or highlights. | rgb(3, 11, 93) | |
Strongest background color used for primary actions or highlights. | rgb(6, 3, 58) | |
Weak background color used for primary actions or highlights. | rgb(153, 205, 255) | |
Weaker background color used for primary actions or highlights. | rgb(204, 228, 255) | |
Weakest background color used for primary actions or highlights. | rgb(235, 244, 255) | |
Background color used to represent required form fields. | rgb(235, 86, 86) | |
Background color used for alternative striped rows. | rgb(244, 244, 246) | |
Strong background color used for containers. | rgb(225, 227, 234) | |
Stronger background color used for containers. | rgb(136, 145, 170) | |
Strongest background color used for containers. | rgb(75, 86, 113) | |
Background color used for subaccounts. | rgb(255, 241, 179) | |
Background color used for success alerts and toasts. | rgb(20, 176, 83) | |
Weakest background color used for success alerts and toasts. | rgb(237, 253, 243) | |
Background color used for trial accounts. | rgb(209, 250, 224) | |
Background color used to represent an entity or person as "unavailable". | rgb(214, 31, 31) | |
Background color used for user avatars. | rgb(200, 175, 240) | |
Background color used for warning alerts and toasts. | rgb(244, 124, 34) | |
Weakest background color used for warning alerts and toasts. | rgb(254, 245, 238) |
Token | Value | Example |
---|---|---|
Default border color | rgb(136, 145, 170) | |
Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. | rgb(225, 227, 234) | |
Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. | rgb(204, 228, 255) | |
Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. | rgb(209, 250, 224) | |
Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. | rgb(231, 220, 250) | |
Destructive border color | rgb(214, 31, 31) | |
Destructive focus border color | rgb(117, 12, 12) | |
Stronger destructive hover border color | rgb(74, 11, 11) | |
Strongest destructive hover border color | rgb(49, 12, 12) | |
Destructive focus border color | rgb(246, 177, 177) | |
Destructive focus border color | rgb(252, 207, 207) | |
Destructive focus border color | rgb(254, 236, 236) | |
Error border color | rgb(214, 31, 31) | |
Strong error border color | rgb(117, 12, 12) | |
Stronger error border color | rgb(74, 11, 11) | |
Weak error border color | rgb(245, 138, 138) | |
Weaker error border color | rgb(252, 207, 207) | |
Weakest error border color | rgb(254, 236, 236) | |
Border on inverse backgrounds. Must be used on color-background-body-inverse. | rgb(136, 145, 170) | |
Strong border on inverse backgrounds. Must be used on color-background-body-inverse. | rgb(225, 227, 234) | |
Stronger border on inverse backgrounds. Must be used on color-background-body-inverse. | rgb(244, 244, 246) | |
Strongest border on inverse backgrounds. Must be used on color-background-body-inverse. | rgb(255, 255, 255) | |
Weaker border on inverse backgrounds. Must be used on color-background-body-inverse. | rgb(57, 71, 98) | |
Weakest border on inverse backgrounds. Must be used on color-background-body-inverse. | rgb(31, 48, 76) | |
Neutral border color | rgb(2, 99, 224) | |
Weak neutral border color | rgb(102, 179, 255) | |
Weaker neutral border color | rgb(204, 228, 255) | |
Weaker border color for something designated as new | rgb(231, 220, 250) | |
Primary border color | rgb(2, 99, 224) | |
Strong primary border color | rgb(0, 20, 137) | |
Stronger primary border color | rgb(3, 11, 93) | |
Strongest primary border color | rgb(6, 3, 58) | |
Weak primary border color | rgb(153, 205, 255) | |
Weaker primary border color | rgb(204, 228, 255) | |
Weakest primary border color | rgb(235, 244, 255) | |
Strong border color | rgb(96, 107, 133) | |
Success border color | rgb(20, 176, 83) | |
Weak success border color | rgb(54, 213, 118) | |
Weaker success border color | rgb(209, 250, 224) | |
Weakest success border color | rgb(237, 253, 243) | |
Warning border color | rgb(244, 124, 34) | |
Weak warning border color | rgb(255, 179, 122) | |
Weaker warning border color | rgb(253, 220, 196) | |
Weakest warning border color | rgb(254, 245, 238) | |
Weak border color | rgb(202, 205, 216) | |
Weaker border color | rgb(225, 227, 234) |
Token | Value | Example |
---|---|---|
Border width reset | 0 | |
Constant border width token for border width 10 | 1px | |
Constant border width token for border width 20 | 2px | |
Constant border width token for border width 30 | 4px | |
Constant border width token for border width 40 | 8px |
Token | Value | Example |
---|---|---|
Default shadow. | 0 4px 16px 0 rgba(18, 28, 45, 0.2) | |
Shadow border for inputs. | 0 0 0 1px #8891aa | |
Weaker bottom shadow border for decorative 10 | 0 1px 0 #e1e3ea | |
Weaker bottom shadow border for decorative 20 | 0 1px 0 #cce4ff | |
Weaker bottom shadow border for decorative 30 | 0 1px 0 #d1fae0 | |
Weaker bottom shadow border for decorative 40 | 0 1px 0 #e7dcfa | |
Weaker bottom shadow border for error status | 0 1px 0 #fccfcf | |
Weaker bottom shadow border for neutral status | 0 1px 0 #cce4ff | |
Weaker bottom shadow border for new status | 0 1px 0 #e7dcfa | |
Weaker bottom shadow border for success status | 0 1px 0 #d1fae0 | |
Weaker bottom shadow border for warning status | 0 1px 0 #fddcc4 | |
Shadow border for destructive interactions. | 0 0 0 1px #d61f1f | |
Strong shadow border for destructive interactions | 0 0 0 1px #750c0c | |
Strong shadow border for destructive interactions | 0 0 0 1px #4a0b0b | |
Strongest shadow border for destructive interactions | 0 0 0 1px #310c0c | |
Weak shadow border for destructive interactions. | 0 0 0 1px #f6b1b1 | |
Weaker 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 error inputs hover. | 0 0 0 1px #4a0b0b | |
Shadow border for inverse error inputs. | 0 0 0 1px #eb5656 | |
Shadow border on interactive elements on inverse backgrounds. | 0 0 0 1px #8891aa | |
Strong shadow border on interactive elements on inverse backgrounds. | 0 0 0 1px #e1e3ea | |
Stronger shadow border on interactive elements on inverse backgrounds. | 0 0 0 1px #f4f4f6 | |
Strongest shadow border on interactive elements on inverse backgrounds. | 0 0 0 1px #ffffff | |
Weaker shadow border on interactive elements on inverse backgrounds. | 0 0 0 1px #394762 | |
Weakest shadow border on interactive elements on inverse backgrounds. | 0 0 0 1px #1f304c | |
Default shadow border for primary interactions. | 0 0 0 1px #0263e0 | |
Strong shadow border for inputs hover. | 0 0 0 1px #001489 | |
Stronger shadow border for inputs active. | 0 0 0 1px #030b5d | |
Strongest shadow border for inputs active. | 0 0 0 1px #06033a | |
Weaker shadow border for primary interactions. | 0 0 0 1px #99cdff | |
Weaker shadow border for primary interactions. | 0 0 0 1px #cce4ff | |
Strong shadow border for inputs. | 0 0 0 1px #606b85 | |
Weak shadow border for disabled inputs. | 0 0 0 1px #cacdd8 | |
Weaker shadow border for disabled inputs. | 0 0 0 1px #e1e3ea | |
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 inset focus on elements, such as DataGrid cells. | inset 0 0 0 2px 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) |
Token | Value | Example |
---|---|---|
Default branding color | rgb(0, 20, 137) | |
Twilio brand red | rgb(242, 47, 70) | |
Color used for data visualizations. Must be used in a sequence. | rgb(0, 20, 137) | |
Color used for data visualizations. Must be used in a sequence. | rgb(14, 124, 58) | |
Color used for data visualizations. Must be used in a sequence. | rgb(13, 58, 31) | |
Color used for data visualizations. Must be used in a sequence. | rgb(0, 140, 255) | |
Color used for data visualizations. Must be used in a sequence. | rgb(57, 71, 98) | |
Color used for data visualizations. Must be used in a sequence. | rgb(166, 127, 227) | |
Color used for data visualizations. Must be used in a sequence. | rgb(109, 46, 209) | |
Color used for data visualizations. Must be used in a sequence. | rgb(136, 145, 170) | |
Color used for data visualizations. Must be used in a sequence. | rgb(117, 12, 12) | |
Color used for data visualizations. Must be used in a sequence. | rgb(235, 86, 86) | |
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) |
Token | Value | Example |
---|---|---|
| 'Fira Mono', Courier, monospace | Ag |
| 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif | Ag |
| 'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif | Ag |
| 'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif | Ag |
| 'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif | Ag |
| 'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif | Ag |
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 |
---|---|---|
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 |
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 |
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 |
Token | Value | Example |
---|---|---|
Border radius reset | 0 | |
Small border radius | 2px | |
Large border radius | 4px | |
Larger border radius | 8px | |
Circular border radius | 50% | |
Pill border radius | 100px |
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 |
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) |
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 |
Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. | rgb(96, 107, 133) | Example text: AgAccessibility rating: AA |
Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. | rgb(0, 20, 137) | Example text: AgAccessibility rating: AAA |
Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. | rgb(14, 124, 58) | Example text: AgAccessibility rating: AA |
Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. | rgb(109, 46, 209) | Example text: AgAccessibility rating: AAA |
Error text for inputs and error misc | rgb(214, 31, 31) | Example text: AgAccessibility rating: AA |
Strong error text for inputs and error misc | rgb(173, 17, 17) | Example text: AgAccessibility rating: AAA |
Weak 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 |
Icon color for indicating a available status | rgb(14, 124, 58) | Example text: AgAccessibility rating: AA |
Twilio brand red icon color used for the Twilio logo. | rgb(242, 47, 70) | Example text: AgAccessibility rating: Fail |
Twilio brand icon color used for the Twilio logo on inverse backgrounds. | rgb(255, 255, 255) | Example text: AgAccessibility rating: AAA |
Icon color for indicating a busy status | rgb(227, 106, 25) | Example text: AgAccessibility rating: AA |
Icon color for indicating an error. | rgb(214, 31, 31) | Example text: AgAccessibility rating: AA |
Default icon color for inverse backgrounds. | rgb(136, 145, 170) | Example text: AgAccessibility rating: AA |
Icon color for being neutral. | rgb(0, 20, 137) | Example text: AgAccessibility rating: AAA |
Icon color for indicating a offline status | rgb(96, 107, 133) | Example text: AgAccessibility rating: AA |
Icon color for indicating success. | rgb(14, 124, 58) | Example text: AgAccessibility rating: AA |
Icon color for indicating a unavailable status | rgb(214, 31, 31) | Example text: AgAccessibility rating: AA |
Icon color for indicating a warning. | rgb(227, 106, 25) | 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 |
Destructive link text | rgb(214, 31, 31) | Example text: AgAccessibility rating: AA |
Strong shade of destructive link text to be used in interactions | rgb(173, 17, 17) | Example text: AgAccessibility rating: AAA |
Stronger shade of destructive link text to be used in interactions | rgb(74, 11, 11) | Example text: AgAccessibility rating: AAA |
Strongest shade of destructive link text to be used in interactions | rgb(49, 12, 12) | Example text: AgAccessibility rating: AAA |
Weak shade of destructive link text to be used in interactions | rgb(246, 177, 177) | Example text: AgAccessibility rating: AAA |
Strong shade of link text to be used in interactions | rgb(0, 20, 137) | Example text: AgAccessibility rating: AAA |
Stronger shade of link text to be used in interactions | rgb(3, 11, 93) | Example text: AgAccessibility rating: AAA |
Strongest shade of link text to be used in interactions | rgb(6, 3, 58) | Example text: AgAccessibility rating: AAA |
Weak 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(14, 124, 58) | Example text: AgAccessibility rating: AA |
Color for warning text. | rgb(141, 49, 24) | Example text: AgAccessibility rating: AAA |
Color for dark warning text. | rgb(141, 49, 24) | Example text: AgAccessibility rating: AAA |
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 |
Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls. | rgb(255, 255, 255) | Example text: AgAccessibility rating: AAA |
Token | Value | Example |
---|---|---|
| 0 | 0 |
| 10 | 10 |
| 20 | 20 |
| 30 | 30 |
| 40 | 40 |
| 50 | 50 |
| 60 | 60 |
| 70 | 70 |
| 80 | 80 |
| 90 | 90 |