Skip to content
Change the site theme
(information)

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

Background colors page anchor
TokenValueExample

$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)
TokenValueExample

$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)
TokenValueExample

$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
TokenValueExample

$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)
TokenValueExample

$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)
TokenValueExample

$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

Information icon

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.

TokenValueExample

$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

TokenValueExample

$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

TokenValueExample

$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
TokenValueExample

$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
TokenValueExample

$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
TokenValueExample

$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)
TokenValueExample

$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
TokenValueExample

$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

Black lives matter.