The responsive layout is in early preview. Please report any bugs.
Read the color guidelines to learn more about using background color tokens in Paste.
- $color-background
- Token value:
- rgb(244, 244, 246)
- #F4F4F6
- Default background color for any container.
- $color-background-available
- Token value:
- rgb(20, 176, 83)
- #14B053
- Background color used to represent an entity or person as "available".
- $color-background-body
- Token value:
- rgb(255, 255, 255)
- #FFFFFF
- Background color used for the main page body.
- $color-background-body-inverse
- Token value:
- rgb(18, 28, 45)
- #121C2D
- Inverse background color used for the main page body.
- $color-background-brand
- Token value:
- rgb(0, 20, 137)
- #001489
- Primary brand background, accessible with inverse text.
- $color-background-brand-highlight
- Token value:
- rgb(242, 47, 70)
- #F22F46
- Highlight brand background, accessible with black text.
- $color-background-brand-highlight-weakest
- Token value:
- rgba(242, 47, 70, 0.1)
- #F22F461A
- Weakest background color used for brand highlights.
- $color-background-brand-strong
- Token value:
- rgb(3, 11, 93)
- #030B5D
- Strong primary brand background, accessible with inverse text.
- $color-background-brand-stronger
- Token value:
- rgb(6, 3, 58)
- #06033A
- Stronger primary brand background, accessible with inverse text.
- $color-background-busy
- Token value:
- rgb(244, 124, 34)
- #F47C22
- Background color used to represent an entity or person as "busy".
- $color-background-decorative-10-weakest
- Token value:
- rgb(244, 244, 246)
- #F4F4F6
- Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.
- $color-background-decorative-20-weakest
- Token value:
- rgb(235, 244, 255)
- #EBF4FF
- Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.
- $color-background-decorative-30-weakest
- Token value:
- rgb(237, 253, 243)
- #EDFDF3
- Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.
- $color-background-decorative-40-weakest
- Token value:
- rgb(245, 240, 252)
- #F5F0FC
- Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.
- $color-background-destructive
- Token value:
- rgb(214, 31, 31)
- #D61F1F
- Background color used for destructive actions or highlights.
- $color-background-destructive-strong
- Token value:
- rgb(117, 12, 12)
- #750C0C
- Strong background color used for destructive actions or highlights.
- $color-background-destructive-stronger
- Token value:
- rgb(74, 11, 11)
- #4A0B0B
- Stronger background color used for destructive actions or highlights.
- $color-background-destructive-strongest
- Token value:
- rgb(49, 12, 12)
- #310C0C
- Strongest background color used for destructive actions or highlights.
- $color-background-destructive-weak
- Token value:
- rgb(246, 177, 177)
- #F6B1B1
- Weak background color used for destructive actions or highlights.
- $color-background-destructive-weaker
- Token value:
- rgb(252, 207, 207)
- #FCCFCF
- Weaker background color used for destructive actions or highlights.
- $color-background-destructive-weakest
- Token value:
- rgb(254, 236, 236)
- #FEECEC
- Weakest background color used for destructive actions or highlights.
- $color-background-error
- Token value:
- rgb(214, 31, 31)
- #D61F1F
- Background color used for error alerts and toasts.
- $color-background-error-strong
- Token value:
- rgb(117, 12, 12)
- #750C0C
- Strongest background color used for error alerts and toasts.
- $color-background-error-stronger
- Token value:
- rgb(74, 11, 11)
- #4A0B0B
- Stronger error background color
- $color-background-error-strongest
- Token value:
- rgb(49, 12, 12)
- #310C0C
- Strongest error background color
- $color-background-error-weakest
- Token value:
- rgb(254, 236, 236)
- #FEECEC
- Weakest background color used for error alerts and toasts.
- $color-background-inverse
- Token value:
- rgb(31, 48, 76)
- #1F304C
- Inverse background color used for containers.
- $color-background-inverse-strong
- Token value:
- rgb(57, 71, 98)
- #394762
- Strong inverse background color used for containers.
- $color-background-neutral-weakest
- Token value:
- rgb(235, 244, 255)
- #EBF4FF
- Weakest background color used for neutral or default variants.
- $color-background-new
- Token value:
- rgb(245, 240, 252)
- #F5F0FC
- Background color used to represent a new status.
- $color-background-offline
- Token value:
- rgb(174, 178, 193)
- #AEB2C1
- Background color used to represent an entity or person as "offline".
- $color-background-overlay
- Token value:
- rgba(6, 3, 58, 0.4)
- #06033A66
- Background color used for overlays.
- $color-background-primary
- Token value:
- rgb(2, 99, 224)
- #0263E0
- Background color used for primary actions or highlights.
- $color-background-primary-strong
- Token value:
- rgb(0, 20, 137)
- #001489
- Strong background color used for primary actions or highlights.
- $color-background-primary-stronger
- Token value:
- rgb(3, 11, 93)
- #030B5D
- Stronger background color used for primary actions or highlights.
- $color-background-primary-strongest
- Token value:
- rgb(6, 3, 58)
- #06033A
- Strongest background color used for primary actions or highlights.
- $color-background-primary-weak
- Token value:
- rgb(153, 205, 255)
- #99CDFF
- Weak background color used for primary actions or highlights.
- $color-background-primary-weaker
- Token value:
- rgb(204, 228, 255)
- #CCE4FF
- Weaker background color used for primary actions or highlights.
- $color-background-primary-weakest
- Token value:
- rgb(235, 244, 255)
- #EBF4FF
- Weakest background color used for primary actions or highlights.
- $color-background-required
- Token value:
- rgb(235, 86, 86)
- #EB5656
- Background color used to represent required form fields.
- $color-background-row-striped
- Token value:
- rgb(244, 244, 246)
- #F4F4F6
- Background color used for alternative striped rows.
- $color-background-strong
- Token value:
- rgb(225, 227, 234)
- #E1E3EA
- Strong background color used for containers.
- $color-background-stronger
- Token value:
- rgb(136, 145, 170)
- #8891AA
- Stronger background color used for containers.
- $color-background-strongest
- Token value:
- rgb(75, 86, 113)
- #4B5671
- Strongest background color used for containers.
- $color-background-subaccount
- Token value:
- rgb(255, 241, 179)
- #FFF1B3
- Background color used for subaccounts.
- $color-background-success
- Token value:
- rgb(20, 176, 83)
- #14B053
- Background color used for success alerts and toasts.
- $color-background-success-weakest
- Token value:
- rgb(237, 253, 243)
- #EDFDF3
- Weakest background color used for success alerts and toasts.
- $color-background-trial
- Token value:
- rgb(209, 250, 224)
- #D1FAE0
- Background color used for trial accounts.
- $color-background-unavailable
- Token value:
- rgb(214, 31, 31)
- #D61F1F
- Background color used to represent an entity or person as "unavailable".
- $color-background-user
- Token value:
- rgb(200, 175, 240)
- #C8AFF0
- Background color used for user avatars.
- $color-background-warning
- Token value:
- rgb(244, 124, 34)
- #F47C22
- Background color used for warning alerts and toasts.
- $color-background-warning-weakest
- Token value:
- rgb(254, 245, 238)
- #FEF5EE
- Weakest background color used for warning alerts and toasts.
Read the color guidelines to learn more about using border color tokens in Paste.
- $color-border
- Token value:
- rgb(136, 145, 170)
- #8891AA
- Default border color
- $color-border-decorative-10-weaker
- Token value:
- rgb(225, 227, 234)
- #E1E3EA
- Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.
- $color-border-decorative-20-weaker
- Token value:
- rgb(204, 228, 255)
- #CCE4FF
- Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.
- $color-border-decorative-30-weaker
- Token value:
- rgb(209, 250, 224)
- #D1FAE0
- Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.
- $color-border-decorative-40-weaker
- Token value:
- rgb(231, 220, 250)
- #E7DCFA
- Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.
- $color-border-destructive
- Token value:
- rgb(214, 31, 31)
- #D61F1F
- Destructive border color
- $color-border-destructive-strong
- Token value:
- rgb(117, 12, 12)
- #750C0C
- Destructive focus border color
- $color-border-destructive-stronger
- Token value:
- rgb(74, 11, 11)
- #4A0B0B
- Stronger destructive hover border color
- $color-border-destructive-strongest
- Token value:
- rgb(49, 12, 12)
- #310C0C
- Strongest destructive hover border color
- $color-border-destructive-weak
- Token value:
- rgb(246, 177, 177)
- #F6B1B1
- Destructive focus border color
- $color-border-destructive-weaker
- Token value:
- rgb(252, 207, 207)
- #FCCFCF
- Destructive focus border color
- $color-border-destructive-weakest
- Token value:
- rgb(254, 236, 236)
- #FEECEC
- Destructive focus border color
- $color-border-error
- Token value:
- rgb(214, 31, 31)
- #D61F1F
- Error border color
- $color-border-error-strong
- Token value:
- rgb(117, 12, 12)
- #750C0C
- Strong error border color
- $color-border-error-stronger
- Token value:
- rgb(74, 11, 11)
- #4A0B0B
- Stronger error border color
- $color-border-error-weak
- Token value:
- rgb(245, 138, 138)
- #F58A8A
- Weak error border color
- $color-border-error-weaker
- Token value:
- rgb(252, 207, 207)
- #FCCFCF
- Weaker error border color
- $color-border-error-weakest
- Token value:
- rgb(254, 236, 236)
- #FEECEC
- Weakest error border color
- $color-border-inverse
- Token value:
- rgb(136, 145, 170)
- #8891AA
- Border on inverse backgrounds. Must be used on color-background-body-inverse.
- $color-border-inverse-strong
- Token value:
- rgb(225, 227, 234)
- #E1E3EA
- Strong border on inverse backgrounds. Must be used on color-background-body-inverse.
- $color-border-inverse-stronger
- Token value:
- rgb(244, 244, 246)
- #F4F4F6
- Stronger border on inverse backgrounds. Must be used on color-background-body-inverse.
- $color-border-inverse-strongest
- Token value:
- rgb(255, 255, 255)
- #FFFFFF
- Strongest border on inverse backgrounds. Must be used on color-background-body-inverse.
- $color-border-inverse-weaker
- Token value:
- rgb(57, 71, 98)
- #394762
- Weaker border on inverse backgrounds. Must be used on color-background-body-inverse.
- $color-border-inverse-weakest
- Token value:
- rgb(31, 48, 76)
- #1F304C
- Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.
- $color-border-neutral
- Token value:
- rgb(2, 99, 224)
- #0263E0
- Neutral border color
- $color-border-neutral-weak
- Token value:
- rgb(102, 179, 255)
- #66B3FF
- Weak neutral border color
- $color-border-neutral-weaker
- Token value:
- rgb(204, 228, 255)
- #CCE4FF
- Weaker neutral border color
- $color-border-new-weaker
- Token value:
- rgb(231, 220, 250)
- #E7DCFA
- Weaker border color for something designated as new
- $color-border-primary
- Token value:
- rgb(2, 99, 224)
- #0263E0
- Primary border color
- $color-border-primary-strong
- Token value:
- rgb(0, 20, 137)
- #001489
- Strong primary border color
- $color-border-primary-stronger
- Token value:
- rgb(3, 11, 93)
- #030B5D
- Stronger primary border color
- $color-border-primary-strongest
- Token value:
- rgb(6, 3, 58)
- #06033A
- Strongest primary border color
- $color-border-primary-weak
- Token value:
- rgb(153, 205, 255)
- #99CDFF
- Weak primary border color
- $color-border-primary-weaker
- Token value:
- rgb(204, 228, 255)
- #CCE4FF
- Weaker primary border color
- $color-border-primary-weakest
- Token value:
- rgb(235, 244, 255)
- #EBF4FF
- Weakest primary border color
- $color-border-strong
- Token value:
- rgb(96, 107, 133)
- #606B85
- Strong border color
- $color-border-success
- Token value:
- rgb(20, 176, 83)
- #14B053
- Success border color
- $color-border-success-weak
- Token value:
- rgb(54, 213, 118)
- #36D576
- Weak success border color
- $color-border-success-weaker
- Token value:
- rgb(209, 250, 224)
- #D1FAE0
- Weaker success border color
- $color-border-success-weakest
- Token value:
- rgb(237, 253, 243)
- #EDFDF3
- Weakest success border color
- $color-border-warning
- Token value:
- rgb(244, 124, 34)
- #F47C22
- Warning border color
- $color-border-warning-weak
- Token value:
- rgb(255, 179, 122)
- #FFB37A
- Weak warning border color
- $color-border-warning-weaker
- Token value:
- rgb(253, 220, 196)
- #FDDCC4
- Weaker warning border color
- $color-border-warning-weakest
- Token value:
- rgb(254, 245, 238)
- #FEF5EE
- Weakest warning border color
- $color-border-weak
- Token value:
- rgb(202, 205, 216)
- #CACDD8
- Weak border color
- $color-border-weaker
- Token value:
- rgb(225, 227, 234)
- #E1E3EA
- Weaker border color
- $border-width-0
- Token value:
- 0
- Border width reset
- $border-width-10
- Token value:
- 1px
- Constant border width token for border width 10
- $border-width-20
- Token value:
- 2px
- Constant border width token for border width 20
- $border-width-30
- Token value:
- 4px
- Constant border width token for border width 30
- $border-width-40
- Token value:
- 8px
- Constant border width token for border width 40
Box shadows are used in a number of ways: some are true shadows that are used to create depth and demonstrate the hierarchy of layered elements; other box shadow tokens are duplicates of border tokens and are used to visually add a border without affecting the height of the component; box shadow tokens are also used for focus states on components.
(information)
Did you know?
Borders add height to an element, but box shadows do not. It's why we need to use box shadows on some components and not others.
- $shadow
- Token value:
- 0 4px 16px 0 rgba(18, 28, 45, 0.2)
- Default shadow.
- $shadow-border
- Token value:
- 0 0 0 1px #8891aa
- Shadow border for inputs.
- $shadow-border-bottom-decorative-10-weaker
- Token value:
- 0 1px 0 #e1e3ea
- Weaker bottom shadow border for decorative 10
- $shadow-border-bottom-decorative-20-weaker
- Token value:
- 0 1px 0 #cce4ff
- Weaker bottom shadow border for decorative 20
- $shadow-border-bottom-decorative-30-weaker
- Token value:
- 0 1px 0 #d1fae0
- Weaker bottom shadow border for decorative 30
- $shadow-border-bottom-decorative-40-weaker
- Token value:
- 0 1px 0 #e7dcfa
- Weaker bottom shadow border for decorative 40
- $shadow-border-bottom-error-weaker
- Token value:
- 0 1px 0 #fccfcf
- Weaker bottom shadow border for error status
- $shadow-border-bottom-neutral-weaker
- Token value:
- 0 1px 0 #cce4ff
- Weaker bottom shadow border for neutral status
- $shadow-border-bottom-new-weaker
- Token value:
- 0 1px 0 #e7dcfa
- Weaker bottom shadow border for new status
- $shadow-border-bottom-success-weaker
- Token value:
- 0 1px 0 #d1fae0
- Weaker bottom shadow border for success status
- $shadow-border-bottom-warning-weaker
- Token value:
- 0 1px 0 #fddcc4
- Weaker bottom shadow border for warning status
- $shadow-border-destructive
- Token value:
- 0 0 0 1px #d61f1f
- Shadow border for destructive interactions.
- $shadow-border-destructive-strong
- Token value:
- 0 0 0 1px #750c0c
- Strong shadow border for destructive interactions
- $shadow-border-destructive-stronger
- Token value:
- 0 0 0 1px #4a0b0b
- Strong shadow border for destructive interactions
- $shadow-border-destructive-strongest
- Token value:
- 0 0 0 1px #310c0c
- Strongest shadow border for destructive interactions
- $shadow-border-destructive-weak
- Token value:
- 0 0 0 1px #f6b1b1
- Weak shadow border for destructive interactions.
- $shadow-border-destructive-weaker
- Token value:
- 0 0 0 1px #fccfcf
- Weaker shadow border for destructive interactions.
- $shadow-border-error
- Token value:
- 0 0 0 1px #d61f1f
- Shadow border for error inputs.
- $shadow-border-error-strong
- Token value:
- 0 0 0 1px #750c0c
- Shadow border for error inputs hover.
- $shadow-border-error-stronger
- Token value:
- 0 0 0 1px #4a0b0b
- Shadow border for error inputs hover.
- $shadow-border-error-weak
- Token value:
- 0 0 0 1px #eb5656
- Shadow border for inverse error inputs.
- $shadow-border-inverse
- Token value:
- 0 0 0 1px #8891aa
- Shadow border on interactive elements on inverse backgrounds.
- $shadow-border-inverse-strong
- Token value:
- 0 0 0 1px #e1e3ea
- Strong shadow border on interactive elements on inverse backgrounds.
- $shadow-border-inverse-stronger
- Token value:
- 0 0 0 1px #f4f4f6
- Stronger shadow border on interactive elements on inverse backgrounds.
- $shadow-border-inverse-strongest
- Token value:
- 0 0 0 1px #ffffff
- Strongest shadow border on interactive elements on inverse backgrounds.
- $shadow-border-inverse-weaker
- Token value:
- 0 0 0 1px #394762
- Weaker shadow border on interactive elements on inverse backgrounds.
- $shadow-border-inverse-weakest
- Token value:
- 0 0 0 1px #1f304c
- Weakest shadow border on interactive elements on inverse backgrounds.
- $shadow-border-primary
- Token value:
- 0 0 0 1px #0263e0
- Default shadow border for primary interactions.
- $shadow-border-primary-strong
- Token value:
- 0 0 0 1px #001489
- Strong shadow border for inputs hover.
- $shadow-border-primary-stronger
- Token value:
- 0 0 0 1px #030b5d
- Stronger shadow border for inputs active.
- $shadow-border-primary-strongest
- Token value:
- 0 0 0 1px #06033a
- Strongest shadow border for inputs active.
- $shadow-border-primary-weak
- Token value:
- 0 0 0 1px #99cdff
- Weaker shadow border for primary interactions.
- $shadow-border-primary-weaker
- Token value:
- 0 0 0 1px #cce4ff
- Weaker shadow border for primary interactions.
- $shadow-border-strong
- Token value:
- 0 0 0 1px #606b85
- Strong shadow border for inputs.
- $shadow-border-weak
- Token value:
- 0 0 0 1px #cacdd8
- Weak shadow border for disabled inputs.
- $shadow-border-weaker
- Token value:
- 0 0 0 1px #e1e3ea
- Weaker shadow border for disabled inputs.
- $shadow-card
- Token value:
- 0 2px 8px 0 rgba(18, 28, 45, 0.1)
- Shadow for cards.
- $shadow-focus
- Token value:
- 0 0 0 4px rgba(2, 99, 224, 0.7)
- Shadow for focus ring on interactive elements.
- $shadow-focus-inset
- Token value:
- inset 0 0 0 2px rgba(2, 99, 224, 0.7)
- Shadow for inset focus on elements, such as DataGrid cells.
- $shadow-focus-inverse
- Token value:
- 0 0 0 4px rgba(255, 255, 255, 0.4)
- Shadow for focus ring on interactive elements on inverse backgrounds.
- $shadow-high
- Token value:
- 0 16px 24px 0 rgba(18, 28, 45, 0.2)
- High elevation default shadow.
- $shadow-low
- Token value:
- 0 2px 8px 0 rgba(18, 28, 45, 0.1)
- Low elevation default shadow.
Data visualization colors are for usage within charts. Read the data visualization guidelines to learn more about building charts with Paste.
- $color-data-visualization-1
- Token value:
- rgb(0, 20, 137)
- Color used for data visualizations. Must be used in a sequence.
- $color-data-visualization-2
- Token value:
- rgb(14, 124, 58)
- Color used for data visualizations. Must be used in a sequence.
- $color-data-visualization-3
- Token value:
- rgb(13, 58, 31)
- Color used for data visualizations. Must be used in a sequence.
- $color-data-visualization-4
- Token value:
- rgb(0, 140, 255)
- Color used for data visualizations. Must be used in a sequence.
- $color-data-visualization-5
- Token value:
- rgb(57, 71, 98)
- Color used for data visualizations. Must be used in a sequence.
- $color-data-visualization-6
- Token value:
- rgb(166, 127, 227)
- Color used for data visualizations. Must be used in a sequence.
- $color-data-visualization-7
- Token value:
- rgb(109, 46, 209)
- Color used for data visualizations. Must be used in a sequence.
- $color-data-visualization-8
- Token value:
- rgb(136, 145, 170)
- Color used for data visualizations. Must be used in a sequence.
- $color-data-visualization-9
- Token value:
- rgb(117, 12, 12)
- Color used for data visualizations. Must be used in a sequence.
- $color-data-visualization-10
- Token value:
- rgb(235, 86, 86)
- Color used for data visualizations. Must be used in a sequence.
Example text:
- $font-family-code
- Token value:
- 'Fira Mono', Courier, monospace
Example text:
- $font-family-text
- Token value:
- 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
Example text:
- $font-family-text-chinese-simplified
- Token value:
- 'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif
Example text:
- $font-family-text-chinese-traditional
- Token value:
- 'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif
Example text:
- $font-family-text-japanese
- Token value:
- 'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif
Example text:
- $font-family-text-korean
- Token value:
- 'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif
Font size tokens use rem values, and 1 rem unit is equal to 16 pixels in Paste. Unlike em values which are relative to their parent element, rem values are relative to the html element.
(information)
Heads up about font sizes in Paste
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.
Example text:
- $font-size-10
- Token value:
- 0.625rem
- 10px
- Constant typography token for font size 10
Example text:
- $font-size-20
- Token value:
- 0.75rem
- 12px
- Constant typography token for font size 20
Example text:
- $font-size-30
- Token value:
- 0.875rem
- 14px
- Constant typography token for font size 30
Example text:
- $font-size-40
- Token value:
- 1rem
- 16px
- Constant typography token for font size 40
Example text:
- $font-size-50
- Token value:
- 1.125rem
- 18px
- Constant typography token for font size 50
Example text:
- $font-size-60
- Token value:
- 1.25rem
- 20px
- Constant typography token for font size 60
Example text:
- $font-size-70
- Token value:
- 1.5rem
- 24px
- Constant typography token for font size 70
Example text:
- $font-size-80
- Token value:
- 1.75rem
- 28px
- Constant typography token for font size 80
Example text:
- $font-size-90
- Token value:
- 2rem
- 32px
- Constant typography token for font size 90
Example text:
- $font-size-100
- Token value:
- 2.5rem
- 40px
- Constant typography token for font size 100
Example text:
- $font-size-110
- Token value:
- 3rem
- 48px
- Constant typography token for font size 110
Example text:
- $font-weight-light
- Token value:
- 400
- Font weight for light weight
Example text:
- $font-weight-normal
- Token value:
- 400
- Font weight for normal weight
Example text:
- $font-weight-medium
- Token value:
- 500
- Font weight for medium weight
Example text:
- $font-weight-semibold
- Token value:
- 600
- Font weight for semibold weight
Example text:
- $font-weight-bold
- Token value:
- 700
- Font weight for bold weight
- $line-height-0
- Token value:
- 0
- 0px
- Constant line-height token for line-height 0
- $line-height-05
- Token value:
- 0.75rem
- 12px
- Constant line-height token for line-height 05
- $line-height-10
- Token value:
- 1rem
- 16px
- Constant line-height token for line-height 10
- $line-height-20
- Token value:
- 1.25rem
- 20px
- Constant line-height token for line-height 20
- $line-height-30
- Token value:
- 1.25rem
- 20px
- Constant line-height token for line-height 30
- $line-height-40
- Token value:
- 1.5rem
- 24px
- Constant line-height token for line-height 40
- $line-height-50
- Token value:
- 1.75rem
- 28px
- Constant line-height token for line-height 50
- $line-height-60
- Token value:
- 1.75rem
- 28px
- Constant line-height token for line-height 60
- $line-height-70
- Token value:
- 2rem
- 32px
- Constant line-height token for line-height 70
- $line-height-80
- Token value:
- 2.5rem
- 40px
- Constant line-height token for line-height 80
- $line-height-90
- Token value:
- 2.75rem
- 44px
- Constant line-height token for line-height 90
- $line-height-100
- Token value:
- 3.25rem
- 52px
- Constant line-height token for line-height 100
- $line-height-110
- Token value:
- 4rem
- 64px
- Constant line-height token for line-height 110
- $border-radius-0
- Token value:
- 0
- Border radius reset
- $border-radius-10
- Token value:
- 2px
- Small border radius
- $border-radius-20
- Token value:
- 4px
- Large border radius
- $border-radius-30
- Token value:
- 8px
- Larger border radius
- $border-radius-circle
- Token value:
- 50%
- Circular border radius
- $border-radius-pill
- Token value:
- 100px
- Pill border radius
- $size-0
- Token value:
- 0
- 0px
- Generic sizing token scale for UI components.
- $size-10
- Token value:
- 5.5rem
- 88px
- Generic sizing token scale for UI components.
- $size-20
- Token value:
- 12rem
- 192px
- Generic sizing token scale for UI components.
- $size-30
- Token value:
- 18.5rem
- 296px
- Generic sizing token scale for UI components.
- $size-40
- Token value:
- 25rem
- 400px
- Generic sizing token scale for UI components.
- $size-50
- Token value:
- 31.5rem
- 504px
- Generic sizing token scale for UI components.
- $size-60
- Token value:
- 38rem
- 608px
- Generic sizing token scale for UI components.
- $size-70
- Token value:
- 44.5rem
- 712px
- Generic sizing token scale for UI components.
- $size-80
- Token value:
- 51rem
- 816px
- Generic sizing token scale for UI components.
- $size-90
- Token value:
- 57.5rem
- 920px
- Generic sizing token scale for UI components.
- $size-100
- Token value:
- 64rem
- 1024px
- Generic sizing token scale for UI components.
- $size-110
- Token value:
- 70.5rem
- 1128px
- Generic sizing token scale for UI components.
- $size-120
- Token value:
- 77rem
- 1232px
- Generic sizing token scale for UI components.
- $size-icon-05
- Token value:
- 0.75rem
- 12px
- Maps to line-height tokens 1:1
- $size-icon-10
- Token value:
- 1rem
- 16px
- Maps to line-height tokens 1:1
- $size-icon-20
- Token value:
- 1.25rem
- 20px
- Maps to line-height tokens 1:1
- $size-icon-30
- Token value:
- 1.25rem
- 20px
- Maps to line-height tokens 1:1
- $size-icon-40
- Token value:
- 1.5rem
- 24px
- Maps to line-height tokens 1:1
- $size-icon-50
- Token value:
- 1.75rem
- 28px
- Maps to line-height tokens 1:1
- $size-icon-60
- Token value:
- 1.75rem
- 28px
- Maps to line-height tokens 1:1
- $size-icon-70
- Token value:
- 2rem
- 32px
- Maps to line-height tokens 1:1
- $size-icon-80
- Token value:
- 2.5rem
- 40px
- Maps to line-height tokens 1:1
- $size-icon-90
- Token value:
- 2.75rem
- 44px
- Maps to line-height tokens 1:1
- $size-icon-100
- Token value:
- 3.25rem
- 52px
- Maps to line-height tokens 1:1
- $size-icon-110
- Token value:
- 4rem
- 64px
- Maps to line-height tokens 1:1
- $size-sidebar
- Token value:
- 13.75rem
- 220px
- Sizing token for sidebar width.
- $size-square-0
- Token value:
- 0
- 0px
- Generic square sizing token scale for UI components.
- $size-square-10
- Token value:
- 0.125rem
- 2px
- Generic square sizing token scale for UI components.
- $size-square-20
- Token value:
- 0.25rem
- 4px
- Generic square sizing token scale for UI components.
- $size-square-25
- Token value:
- 0.375rem
- 6px
- Generic square sizing token scale for UI components.
- $size-square-30
- Token value:
- 0.5rem
- 8px
- Generic square sizing token scale for UI components.
- $size-square-40
- Token value:
- 0.75rem
- 12px
- Generic square sizing token scale for UI components.
- $size-square-50
- Token value:
- 1rem
- 16px
- Generic square sizing token scale for UI components.
- $size-square-60
- Token value:
- 1.25rem
- 20px
- Generic square sizing token scale for UI components.
- $size-square-70
- Token value:
- 1.5rem
- 24px
- Generic square sizing token scale for UI components.
- $size-square-80
- Token value:
- 1.75rem
- 28px
- Generic square sizing token scale for UI components.
- $size-square-90
- Token value:
- 2rem
- 32px
- Generic square sizing token scale for UI components.
- $size-square-100
- Token value:
- 2.25rem
- 36px
- Generic square sizing token scale for UI components.
- $size-square-110
- Token value:
- 2.5rem
- 40px
- Generic square sizing token scale for UI components.
- $size-square-120
- Token value:
- 2.75rem
- 44px
- Generic square sizing token scale for UI components.
- $size-square-130
- Token value:
- 3rem
- 48px
- Generic square sizing token scale for UI components.
- $size-square-140
- Token value:
- 3.25rem
- 52px
- Generic square sizing token scale for UI components.
- $size-square-150
- Token value:
- 3.5rem
- 56px
- Generic square sizing token scale for UI components.
- $size-square-160
- Token value:
- 3.75rem
- 60px
- Generic square sizing token scale for UI components.
- $size-square-170
- Token value:
- 4rem
- 64px
- Generic square sizing token scale for UI components.
- $size-square-180
- Token value:
- 4.25rem
- 68px
- Generic square sizing token scale for UI components.
- $size-square-190
- Token value:
- 4.5rem
- 72px
- Generic square sizing token scale for UI components.
- $size-square-200
- Token value:
- 4.75rem
- 76px
- Generic square sizing token scale for UI components.
- $space-0
- Token value:
- 0
- 0px
- $space-10
- Token value:
- 0.125rem
- 2px
- $space-20
- Token value:
- 0.25rem
- 4px
- $space-30
- Token value:
- 0.5rem
- 8px
- $space-40
- Token value:
- 0.75rem
- 12px
- $space-50
- Token value:
- 1rem
- 16px
- $space-60
- Token value:
- 1.25rem
- 20px
- $space-70
- Token value:
- 1.5rem
- 24px
- $space-80
- Token value:
- 1.75rem
- 28px
- $space-90
- Token value:
- 2rem
- 32px
- $space-100
- Token value:
- 2.25rem
- 36px
- $space-110
- Token value:
- 2.5rem
- 40px
- $space-120
- Token value:
- 2.75rem
- 44px
- $space-130
- Token value:
- 3rem
- 48px
- $space-140
- Token value:
- 3.25rem
- 52px
- $space-150
- Token value:
- 3.5rem
- 56px
- $space-160
- Token value:
- 3.75rem
- 60px
- $space-170
- Token value:
- 4rem
- 64px
- $space-180
- Token value:
- 4.25rem
- 68px
- $space-190
- Token value:
- 4.5rem
- 72px
- $space-200
- Token value:
- 4.75rem
- 76px
- $space-negative-10
- Token value:
- -0.125rem
- -2px
- $space-negative-20
- Token value:
- -0.25rem
- -4px
- $space-negative-30
- Token value:
- -0.5rem
- -8px
- $space-negative-40
- Token value:
- -0.75rem
- -12px
- $space-negative-50
- Token value:
- -1rem
- -16px
- $space-negative-60
- Token value:
- -1.25rem
- -20px
- $space-negative-70
- Token value:
- -1.5rem
- -24px
- $space-negative-80
- Token value:
- -1.75rem
- -28px
- $space-negative-90
- Token value:
- -2rem
- -32px
- $space-negative-100
- Token value:
- -2.25rem
- -36px
- $space-negative-110
- Token value:
- -2.5rem
- -40px
- $space-negative-120
- Token value:
- -2.75rem
- -44px
- $space-negative-130
- Token value:
- -3rem
- -48px
- $space-negative-140
- Token value:
- -3.25rem
- -52px
- $space-negative-150
- Token value:
- -3.5rem
- -56px
- $space-negative-160
- Token value:
- -3.75rem
- -60px
- $space-negative-170
- Token value:
- -4rem
- -64px
- $space-negative-180
- Token value:
- -4.25rem
- -68px
- $space-negative-190
- Token value:
- -4.5rem
- -72px
- $space-negative-200
- Token value:
- -4.75rem
- -76px
Text color tokens define both text and icon colors. We specifically have color-text-* andcolor-text-icon-* tokens, since icons have lower contrast requirements than text. This means that text color tokens can be used for icons, but icon color tokens cannot be used for text. Read the color guidelines to learn more about using text color tokens in Paste.
Example text:
Accessibility rating: AAA
- $color-text
- Token value:
- rgb(18, 28, 45)
- #121C2D
- Body text color
Example text:
Accessibility rating: AA Conditional
- $color-text-brand-highlight
- Token value:
- rgb(242, 47, 70)
- #F22F46
- Twilio brand red, accessible on large text only.
Example text:
Accessibility rating: AAA
- $color-text-brand-inverse
- Token value:
- rgb(255, 255, 255)
- #FFFFFF
- Text color used on any brand color
Example text:
Accessibility rating: AA
- $color-text-decorative-10
- Token value:
- rgb(96, 107, 133)
- #606B85
- Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
Example text:
Accessibility rating: AAA
- $color-text-decorative-20
- Token value:
- rgb(0, 20, 137)
- #001489
- Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
Example text:
Accessibility rating: AA
- $color-text-decorative-30
- Token value:
- rgb(14, 124, 58)
- #0E7C3A
- Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
Example text:
Accessibility rating: AAA
- $color-text-decorative-40
- Token value:
- rgb(109, 46, 209)
- #6D2ED1
- Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
Example text:
Accessibility rating: AA
- $color-text-error
- Token value:
- rgb(214, 31, 31)
- #D61F1F
- Error text for inputs and error misc
Example text:
Accessibility rating: AAA
- $color-text-error-strong
- Token value:
- rgb(173, 17, 17)
- #AD1111
- Strong error text for inputs and error misc
Example text:
Accessibility rating: AAA
- $color-text-error-stronger
- Token value:
- rgb(74, 11, 11)
- #4A0B0B
- Stronger error text for inputs and error misc
Example text:
Accessibility rating: AA Conditional
- $color-text-error-weak
- Token value:
- rgb(235, 86, 86)
- #EB5656
- Weak error text for inputs and error misc
Example text:
Accessibility rating: AA
- $color-text-icon
- Token value:
- rgb(96, 107, 133)
- #606B85
- Default icon color.
Example text:
Accessibility rating: AA
- $color-text-icon-available
- Token value:
- rgb(14, 124, 58)
- #0E7C3A
- Icon color for indicating a available status
Example text:
Accessibility rating: AA Conditional
- $color-text-icon-brand-highlight
- Token value:
- rgb(242, 47, 70)
- #F22F46
- Twilio brand red icon color used for the Twilio logo.
Example text:
Accessibility rating: AAA
- $color-text-icon-brand-inverse
- Token value:
- rgb(255, 255, 255)
- #FFFFFF
- Twilio brand icon color used for the Twilio logo on inverse backgrounds.
Example text:
Accessibility rating: AA Conditional
- $color-text-icon-busy
- Token value:
- rgb(227, 106, 25)
- #E36A19
- Icon color for indicating a busy status
Example text:
Accessibility rating: AA
- $color-text-icon-error
- Token value:
- rgb(214, 31, 31)
- #D61F1F
- Icon color for indicating an error.
Example text:
Accessibility rating: AA
- $color-text-icon-inverse
- Token value:
- rgb(136, 145, 170)
- #8891AA
- Default icon color for inverse backgrounds.
Example text:
Accessibility rating: AAA
- $color-text-icon-neutral
- Token value:
- rgb(0, 20, 137)
- #001489
- Icon color for being neutral.
Example text:
Accessibility rating: AA
- $color-text-icon-offline
- Token value:
- rgb(96, 107, 133)
- #606B85
- Icon color for indicating a offline status
Example text:
Accessibility rating: AA
- $color-text-icon-success
- Token value:
- rgb(14, 124, 58)
- #0E7C3A
- Icon color for indicating success.
Example text:
Accessibility rating: AA
- $color-text-icon-unavailable
- Token value:
- rgb(214, 31, 31)
- #D61F1F
- Icon color for indicating a unavailable status
Example text:
Accessibility rating: AA Conditional
- $color-text-icon-warning
- Token value:
- rgb(227, 106, 25)
- #E36A19
- Icon color for indicating a warning.
Example text:
Accessibility rating: AAA
- $color-text-inverse
- Token value:
- rgb(255, 255, 255)
- #FFFFFF
- Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.
Example text:
Accessibility rating: AAA
- $color-text-inverse-weak
- Token value:
- rgb(174, 178, 193)
- #AEB2C1
- Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.
Example text:
Accessibility rating: AA Conditional
- $color-text-inverse-weaker
- Token value:
- rgb(96, 107, 133)
- #606B85
- Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.
Example text:
Accessibility rating: AA
- $color-text-link
- Token value:
- rgb(2, 99, 224)
- #0263E0
- Link text
Example text:
Accessibility rating: AA
- $color-text-link-destructive
- Token value:
- rgb(214, 31, 31)
- #D61F1F
- Destructive link text
Example text:
Accessibility rating: AAA
- $color-text-link-destructive-strong
- Token value:
- rgb(173, 17, 17)
- #AD1111
- Strong shade of destructive link text to be used in interactions
Example text:
Accessibility rating: AAA
- $color-text-link-destructive-stronger
- Token value:
- rgb(74, 11, 11)
- #4A0B0B
- Stronger shade of destructive link text to be used in interactions
Example text:
Accessibility rating: AAA
- $color-text-link-destructive-strongest
- Token value:
- rgb(49, 12, 12)
- #310C0C
- Strongest shade of destructive link text to be used in interactions
Example text:
Accessibility rating: Fail
- $color-text-link-destructive-weak
- Token value:
- rgb(246, 177, 177)
- #F6B1B1
- Weak shade of destructive link text to be used in interactions
Example text:
Accessibility rating: AAA
- $color-text-link-strong
- Token value:
- rgb(0, 20, 137)
- #001489
- Strong shade of link text to be used in interactions
Example text:
Accessibility rating: AAA
- $color-text-link-stronger
- Token value:
- rgb(3, 11, 93)
- #030B5D
- Stronger shade of link text to be used in interactions
Example text:
Accessibility rating: AAA
- $color-text-link-strongest
- Token value:
- rgb(6, 3, 58)
- #06033A
- Strongest shade of link text to be used in interactions
Example text:
Accessibility rating: Fail
- $color-text-link-weak
- Token value:
- rgb(153, 205, 255)
- #99CDFF
- Weak shade of link text to be used in interactions
Example text:
Accessibility rating: AAA
- $color-text-neutral
- Token value:
- rgb(0, 20, 137)
- #001489
- Color for text indicating a neutral status.
Example text:
Accessibility rating: AAA
- $color-text-new
- Token value:
- rgb(109, 46, 209)
- #6D2ED1
- Color for text indicating a new status.
Example text:
Accessibility rating: AA
- $color-text-success
- Token value:
- rgb(14, 124, 58)
- #0E7C3A
- Text color for success text.
Example text:
Accessibility rating: AAA
- $color-text-warning
- Token value:
- rgb(141, 49, 24)
- #8D3118
- Color for warning text.
Example text:
Accessibility rating: AAA
- $color-text-warning-strong
- Token value:
- rgb(141, 49, 24)
- #8D3118
- Color for dark warning text.
Example text:
Accessibility rating: AA
- $color-text-weak
- Token value:
- rgb(96, 107, 133)
- #606B85
- Weak body text for visual hierarchy.
Example text:
Accessibility rating: Fail
- $color-text-weaker
- Token value:
- rgb(174, 178, 193)
- #AEB2C1
- Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.
Example text:
Accessibility rating: Fail
- $color-text-weakest
- Token value:
- rgb(255, 255, 255)
- #FFFFFF
- Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls.
Z indices define the vertical stacking order of UI elements that overlap.
- $z-index-0
- Token value:
- 0
- $z-index-10
- Token value:
- 10
- $z-index-20
- Token value:
- 20
- $z-index-30
- Token value:
- 30
- $z-index-40
- Token value:
- 40
- $z-index-50
- Token value:
- 50
- $z-index-60
- Token value:
- 60
- $z-index-70
- Token value:
- 70
- $z-index-80
- Token value:
- 80
- $z-index-90
- Token value:
- 90