The responsive layout is in early preview. Please report any bugs.

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
`$color-background` Background color used for containers.	rgb(244, 244, 246)
`$color-background-available` Background color used to represent an entity or person as "available".	rgb(20, 176, 83)
`$color-background-body` Background color used for the main page body.	rgb(255, 255, 255)
`$color-background-body-inverse` Inverse background color used for the main page body.	rgb(18, 28, 45)
`$color-background-brand` Background color used for brand.	rgb(0, 20, 137)
`$color-background-brand-highlight` Background color used for brand highlights.	rgb(242, 47, 70)
`$color-background-brand-highlight-weakest` Weakest background color used for brand highlights.	rgba(242, 47, 70, 0.1)
`$color-background-brand-strong` Strong background color used for brand.	rgb(3, 11, 93)
`$color-background-brand-stronger` Stronger background color used for brand.	rgb(6, 3, 58)
`$color-background-busy` Background color used to represent an entity or person as "busy".	rgb(244, 124, 34)
`$color-background-decorative-10-weakest` 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)
`$color-background-decorative-20-weakest` 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)
`$color-background-decorative-30-weakest` 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)
`$color-background-decorative-40-weakest` 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)
`$color-background-destructive` Background color used for destructive actions or highlights.	rgb(214, 31, 31)
`$color-background-destructive-strong` Strong background color used for destructive actions or highlights.	rgb(117, 12, 12)
`$color-background-destructive-stronger` Stronger background color used for destructive actions or highlights.	rgb(74, 11, 11)
`$color-background-destructive-strongest` Strongest background color used for destructive actions or highlights.	rgb(49, 12, 12)
`$color-background-destructive-weak` Weak background color used for destructive actions or highlights.	rgb(246, 177, 177)
`$color-background-destructive-weaker` Weaker background color used for destructive actions or highlights.	rgb(252, 207, 207)
`$color-background-destructive-weakest` Weakest background color used for destructive actions or highlights.	rgb(254, 236, 236)
`$color-background-error` Background color used for error alerts and toasts.	rgb(214, 31, 31)
`$color-background-error-strong` Strongest background color used for error alerts and toasts.	rgb(117, 12, 12)
`$color-background-error-stronger` Stronger error background color	rgb(74, 11, 11)
`$color-background-error-weakest` Weakest background color used for error alerts and toasts.	rgb(254, 236, 236)
`$color-background-inverse` Inverse background color used for containers.	rgb(31, 48, 76)
`$color-background-inverse-strong` Strong inverse background color used for containers.	rgb(57, 71, 98)
`$color-background-neutral-weakest` Weakest background color used for neutral or default variants.	rgb(235, 244, 255)
`$color-background-new` Background color used to represent a new status.	rgb(245, 240, 252)
`$color-background-offline` Background color used to represent an entity or person as "offline".	rgb(174, 178, 193)
`$color-background-overlay` Background color used for overlays.	rgba(6, 3, 58, 0.4)
`$color-background-primary` Background color used for primary actions or highlights.	rgb(2, 99, 224)
`$color-background-primary-strong` Strong background color used for primary actions or highlights.	rgb(0, 20, 137)
`$color-background-primary-stronger` Stronger background color used for primary actions or highlights.	rgb(3, 11, 93)
`$color-background-primary-strongest` Strongest background color used for primary actions or highlights.	rgb(6, 3, 58)
`$color-background-primary-weak` Weak background color used for primary actions or highlights.	rgb(153, 205, 255)
`$color-background-primary-weaker` Weaker background color used for primary actions or highlights.	rgb(204, 228, 255)
`$color-background-primary-weakest` Weakest background color used for primary actions or highlights.	rgb(235, 244, 255)
`$color-background-required` Background color used to represent required form fields.	rgb(235, 86, 86)
`$color-background-row-striped` Background color used for alternative striped rows.	rgb(244, 244, 246)
`$color-background-strong` Strong background color used for containers.	rgb(225, 227, 234)
`$color-background-stronger` Stronger background color used for containers.	rgb(136, 145, 170)
`$color-background-strongest` Strongest background color used for containers.	rgb(75, 86, 113)
`$color-background-subaccount` Background color used for subaccounts.	rgb(255, 241, 179)
`$color-background-success` Background color used for success alerts and toasts.	rgb(20, 176, 83)
`$color-background-success-weakest` Weakest background color used for success alerts and toasts.	rgb(237, 253, 243)
`$color-background-trial` Background color used for trial accounts.	rgb(209, 250, 224)
`$color-background-unavailable` Background color used to represent an entity or person as "unavailable".	rgb(214, 31, 31)
`$color-background-user` Background color used for user avatars.	rgb(200, 175, 240)
`$color-background-warning` Background color used for warning alerts and toasts.	rgb(244, 124, 34)
`$color-background-warning-weakest` Weakest background color used for warning alerts and toasts.	rgb(254, 245, 238)

Border colors

Token	Value	Example
`$color-border` Default border color	rgb(136, 145, 170)
`$color-border-decorative-10-weaker` 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)
`$color-border-decorative-20-weaker` 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)
`$color-border-decorative-30-weaker` 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)
`$color-border-decorative-40-weaker` 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)
`$color-border-destructive` Destructive border color	rgb(214, 31, 31)
`$color-border-destructive-strong` Destructive focus border color	rgb(117, 12, 12)
`$color-border-destructive-stronger` Stronger destructive hover border color	rgb(74, 11, 11)
`$color-border-destructive-strongest` Strongest destructive hover border color	rgb(49, 12, 12)
`$color-border-destructive-weak` Destructive focus border color	rgb(246, 177, 177)
`$color-border-destructive-weaker` Destructive focus border color	rgb(252, 207, 207)
`$color-border-destructive-weakest` Destructive focus border color	rgb(254, 236, 236)
`$color-border-error` Error border color	rgb(214, 31, 31)
`$color-border-error-strong` Strong error border color	rgb(117, 12, 12)
`$color-border-error-stronger` Stronger error border color	rgb(74, 11, 11)
`$color-border-error-weak` Weak error border color	rgb(245, 138, 138)
`$color-border-error-weaker` Weaker error border color	rgb(252, 207, 207)
`$color-border-error-weakest` Weakest error border color	rgb(254, 236, 236)
`$color-border-inverse` Border on inverse backgrounds. Must be used on color-background-body-inverse.	rgb(136, 145, 170)
`$color-border-inverse-strong` Strong border on inverse backgrounds. Must be used on color-background-body-inverse.	rgb(225, 227, 234)
`$color-border-inverse-stronger` Stronger border on inverse backgrounds. Must be used on color-background-body-inverse.	rgb(244, 244, 246)
`$color-border-inverse-strongest` Strongest border on inverse backgrounds. Must be used on color-background-body-inverse.	rgb(255, 255, 255)
`$color-border-inverse-weaker` Weaker border on inverse backgrounds. Must be used on color-background-body-inverse.	rgb(57, 71, 98)
`$color-border-inverse-weakest` Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.	rgb(31, 48, 76)
`$color-border-neutral` Neutral border color	rgb(2, 99, 224)
`$color-border-neutral-weak` Weak neutral border color	rgb(102, 179, 255)
`$color-border-neutral-weaker` Weaker neutral border color	rgb(204, 228, 255)
`$color-border-new-weaker` Weaker border color for something designated as new	rgb(231, 220, 250)
`$color-border-primary` Primary border color	rgb(2, 99, 224)
`$color-border-primary-strong` Strong primary border color	rgb(0, 20, 137)
`$color-border-primary-stronger` Stronger primary border color	rgb(3, 11, 93)
`$color-border-primary-strongest` Strongest primary border color	rgb(6, 3, 58)
`$color-border-primary-weak` Weak primary border color	rgb(153, 205, 255)
`$color-border-primary-weaker` Weaker primary border color	rgb(204, 228, 255)
`$color-border-primary-weakest` Weakest primary border color	rgb(235, 244, 255)
`$color-border-strong` Strong border color	rgb(96, 107, 133)
`$color-border-success` Success border color	rgb(20, 176, 83)
`$color-border-success-weak` Weak success border color	rgb(54, 213, 118)
`$color-border-success-weaker` Weaker success border color	rgb(209, 250, 224)
`$color-border-success-weakest` Weakest success border color	rgb(237, 253, 243)
`$color-border-warning` Warning border color	rgb(244, 124, 34)
`$color-border-warning-weak` Weak warning border color	rgb(255, 179, 122)
`$color-border-warning-weaker` Weaker warning border color	rgb(253, 220, 196)
`$color-border-warning-weakest` Weakest warning border color	rgb(254, 245, 238)
`$color-border-weak` Weak border color	rgb(202, 205, 216)
`$color-border-weaker` Weaker border color	rgb(225, 227, 234)

Border widths

Token	Value	Example
`$border-width-0` Border width reset	0
`$border-width-10` Constant border width token for border width 10	1px
`$border-width-20` Constant border width token for border width 20	2px
`$border-width-30` Constant border width token for border width 30	4px
`$border-width-40` Constant border width token for border width 40	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-bottom-decorative-10-weaker` Weaker bottom shadow border for decorative 10	0 1px 0 #e1e3ea
`$shadow-border-bottom-decorative-20-weaker` Weaker bottom shadow border for decorative 20	0 1px 0 #cce4ff
`$shadow-border-bottom-decorative-30-weaker` Weaker bottom shadow border for decorative 30	0 1px 0 #d1fae0
`$shadow-border-bottom-decorative-40-weaker` Weaker bottom shadow border for decorative 40	0 1px 0 #e7dcfa
`$shadow-border-bottom-error-weaker` Weaker bottom shadow border for error status	0 1px 0 #fccfcf
`$shadow-border-bottom-neutral-weaker` Weaker bottom shadow border for neutral status	0 1px 0 #cce4ff
`$shadow-border-bottom-new-weaker` Weaker bottom shadow border for new status	0 1px 0 #e7dcfa
`$shadow-border-bottom-success-weaker` Weaker bottom shadow border for success status	0 1px 0 #d1fae0
`$shadow-border-bottom-warning-weaker` Weaker bottom shadow border for warning status	0 1px 0 #fddcc4
`$shadow-border-destructive` Shadow border for destructive interactions.	0 0 0 1px #d61f1f
`$shadow-border-destructive-strong` Strong shadow border for destructive interactions	0 0 0 1px #750c0c
`$shadow-border-destructive-stronger` Strong shadow border for destructive interactions	0 0 0 1px #4a0b0b
`$shadow-border-destructive-strongest` Strongest shadow border for destructive interactions	0 0 0 1px #310c0c
`$shadow-border-destructive-weak` Weak shadow border for destructive interactions.	0 0 0 1px #f6b1b1
`$shadow-border-destructive-weaker` Weaker 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-strong` Shadow border for error inputs hover.	0 0 0 1px #750c0c
`$shadow-border-error-stronger` Shadow border for error inputs hover.	0 0 0 1px #4a0b0b
`$shadow-border-error-weak` 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 #8891aa
`$shadow-border-inverse-strong` Strong shadow border on interactive elements on inverse backgrounds.	0 0 0 1px #e1e3ea
`$shadow-border-inverse-stronger` Stronger shadow border on interactive elements on inverse backgrounds.	0 0 0 1px #f4f4f6
`$shadow-border-inverse-strongest` Strongest shadow border on interactive elements on inverse backgrounds.	0 0 0 1px #ffffff
`$shadow-border-inverse-weaker` Weaker shadow border on interactive elements on inverse backgrounds.	0 0 0 1px #394762
`$shadow-border-inverse-weakest` Weakest shadow border on interactive elements on inverse backgrounds.	0 0 0 1px #1f304c
`$shadow-border-primary` Default shadow border for primary interactions.	0 0 0 1px #0263e0
`$shadow-border-primary-strong` Strong shadow border for inputs hover.	0 0 0 1px #001489
`$shadow-border-primary-stronger` Stronger shadow border for inputs active.	0 0 0 1px #030b5d
`$shadow-border-primary-strongest` Strongest shadow border for inputs active.	0 0 0 1px #06033a
`$shadow-border-primary-weak` Weaker shadow border for primary interactions.	0 0 0 1px #99cdff
`$shadow-border-primary-weaker` Weaker shadow border for primary interactions.	0 0 0 1px #cce4ff
`$shadow-border-strong` Strong shadow border for inputs.	0 0 0 1px #606b85
`$shadow-border-weak` Weak shadow border for disabled inputs.	0 0 0 1px #cacdd8
`$shadow-border-weaker` Weaker shadow border for disabled inputs.	0 0 0 1px #e1e3ea
`$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-inset` Shadow for inset focus on elements, such as DataGrid cells.	inset 0 0 0 2px 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-data-visualization-1` Color used for data visualizations. Must be used in a sequence.	rgb(0, 20, 137)
`$color-data-visualization-2` Color used for data visualizations. Must be used in a sequence.	rgb(14, 124, 58)
`$color-data-visualization-3` Color used for data visualizations. Must be used in a sequence.	rgb(13, 58, 31)
`$color-data-visualization-4` Color used for data visualizations. Must be used in a sequence.	rgb(0, 140, 255)
`$color-data-visualization-5` Color used for data visualizations. Must be used in a sequence.	rgb(57, 71, 98)
`$color-data-visualization-6` Color used for data visualizations. Must be used in a sequence.	rgb(166, 127, 227)
`$color-data-visualization-7` Color used for data visualizations. Must be used in a sequence.	rgb(109, 46, 209)
`$color-data-visualization-8` Color used for data visualizations. Must be used in a sequence.	rgb(136, 145, 170)
`$color-data-visualization-9` Color used for data visualizations. Must be used in a sequence.	rgb(117, 12, 12)
`$color-data-visualization-10` Color used for data visualizations. Must be used in a sequence.	rgb(235, 86, 86)
`$color-gray-0` Gray Color 0	rgb(255, 255, 255)
`$color-gray-10` Gray Color 1	rgb(244, 244, 246)
`$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)
`$color-gray-100` Gray Color 10	rgb(18, 28, 45)

Fonts

Token	Value	Example
`$font-family-code`	'Fira Mono', Courier, monospace	Ag
`$font-family-text`	'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif	Ag
`$font-family-text-chinese-simplified`	'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif	Ag
`$font-family-text-chinese-traditional`	'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif	Ag
`$font-family-text-japanese`	'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif	Ag
`$font-family-text-korean`	'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif	Ag

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-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-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 weights

Token	Value	Example
`$font-weight-light` Font weight for light weight	400	Ag
`$font-weight-normal` Font weight for normal weight	400	Ag
`$font-weight-medium` Font weight for medium weight	500	Ag
`$font-weight-semibold` Font weight for semibold weight	600	Ag
`$font-weight-bold` Font weight for bold weight	700	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-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
`$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

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%
`$border-radius-pill` Pill border radius	100px

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-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-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-icon-10` Maps to line-height tokens 1:1	1rem (16px)	1rem
`$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-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-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-20` Generic square sizing token scale for UI components.	0.25rem (4px)	0.25rem
`$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
`$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-200` Generic square sizing token scale for UI components.	4.75rem (76px)	4.75rem

Spacings

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

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-decorative-10` 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
`$color-text-decorative-20` 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
`$color-text-decorative-30` 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
`$color-text-decorative-40` 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
`$color-text-error` Error text for inputs and error misc	rgb(214, 31, 31)	Example text: AgAccessibility rating: AA
`$color-text-error-strong` Strong error text for inputs and error misc	rgb(173, 17, 17)	Example text: AgAccessibility rating: AAA
`$color-text-error-weak` Weak 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-available` Icon color for indicating a available status	rgb(14, 124, 58)	Example text: AgAccessibility rating: AA
`$color-text-icon-brand-highlight` Twilio brand red icon color used for the Twilio logo.	rgb(242, 47, 70)	Example text: AgAccessibility rating: Fail
`$color-text-icon-brand-inverse` Twilio brand icon color used for the Twilio logo on inverse backgrounds.	rgb(255, 255, 255)	Example text: AgAccessibility rating: AAA
`$color-text-icon-busy` Icon color for indicating a busy status	rgb(227, 106, 25)	Example text: AgAccessibility rating: AA
`$color-text-icon-error` Icon color for indicating an error.	rgb(214, 31, 31)	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-icon-neutral` Icon color for being neutral.	rgb(0, 20, 137)	Example text: AgAccessibility rating: AAA
`$color-text-icon-offline` Icon color for indicating a offline status	rgb(96, 107, 133)	Example text: AgAccessibility rating: AA
`$color-text-icon-success` Icon color for indicating success.	rgb(14, 124, 58)	Example text: AgAccessibility rating: AA
`$color-text-icon-unavailable` Icon color for indicating a unavailable status	rgb(214, 31, 31)	Example text: AgAccessibility rating: AA
`$color-text-icon-warning` Icon color for indicating a warning.	rgb(227, 106, 25)	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-destructive` Destructive link text	rgb(214, 31, 31)	Example text: AgAccessibility rating: AA
`$color-text-link-destructive-strong` Strong shade of destructive link text to be used in interactions	rgb(173, 17, 17)	Example text: AgAccessibility rating: AAA
`$color-text-link-destructive-stronger` Stronger shade of destructive link text to be used in interactions	rgb(74, 11, 11)	Example text: AgAccessibility rating: AAA
`$color-text-link-destructive-strongest` Strongest shade of destructive link text to be used in interactions	rgb(49, 12, 12)	Example text: AgAccessibility rating: AAA
`$color-text-link-destructive-weak` Weak shade of destructive link text to be used in interactions	rgb(246, 177, 177)	Example text: AgAccessibility rating: AAA
`$color-text-link-strong` Strong shade of link text to be used in interactions	rgb(0, 20, 137)	Example text: AgAccessibility rating: AAA
`$color-text-link-stronger` Stronger shade of link text to be used in interactions	rgb(3, 11, 93)	Example text: AgAccessibility rating: AAA
`$color-text-link-strongest` Strongest shade of link text to be used in interactions	rgb(6, 3, 58)	Example text: AgAccessibility rating: AAA
`$color-text-link-weak` Weak 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(14, 124, 58)	Example text: AgAccessibility rating: AA
`$color-text-warning` Color for warning text.	rgb(141, 49, 24)	Example text: AgAccessibility rating: AAA
`$color-text-warning-strong` Color for dark warning text.	rgb(141, 49, 24)	Example text: AgAccessibility rating: AAA
`$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
`$color-text-weakest` Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls.	rgb(255, 255, 255)	Example text: AgAccessibility rating: AAA

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