Skip to content
Change the site theme
Figma
(information)

Token List

All tokens that are available in the Paste token system.


Description of icon

Background colors

Background colors page anchor

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.
  • Scroll to top

    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
  • Black lives matter.