Token List

All tokens that are available in the Paste token system.

Filter tokens

Theme

Format

Background colors

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-inverse-stronger
Token value:
- rgb(57, 71, 98)
- #394762
Stronger inverse background color for any container. Must be used on color-background-body-inverse.
$color-background-inverse-strongest
Token value:
- rgb(255, 255, 255)
- #FFFFFF
Strongest 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-new-weakest
Token value:
- rgb(250, 247, 253)
- #FAF7FD
Weakest background color for indicating 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, 251, 234)
- #FFFBEA
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.
$color-background-weak
Token value:
- rgb(249, 249, 250)
- #F9F9FA
Weak background color used for containers.

Border colors

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-strongest
Token value:
- rgb(49, 12, 12)
- #310C0C
Strongest 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-user
Token value:
- rgb(231, 220, 250)
- #E7DCFA
User avatar 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
$color-border-weakest
Token value:
- rgb(255, 255, 255)
- #FFFFFF
Weakest border color

Border widths

$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

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-inverse-new-weaker
Token value:
- 0 1px 0 #5817bd
Bottom shadow border for the sidebar beta badge
$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-primary
Token value:
- 0 1px 0 #006dfa
Bottom shadow border for primary status
$shadow-border-bottom-subaccount
Token value:
- 0 1px 0 #ffdd35
Bottom shadow border for subaccount badge
$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-decorative-10-weaker
Token value:
- 0 0 0 1px #e1e3ea
Weaker shadow border for decorative 10
$shadow-border-decorative-20-weaker
Token value:
- 0 0 0 1px #cce4ff
Weaker shadow border for decorative 20
$shadow-border-decorative-30-weaker
Token value:
- 0 0 0 1px #d1fae0
Weaker shadow border for decorative 30
$shadow-border-decorative-40-weaker
Token value:
- 0 0 0 1px #e7dcfa
Weaker shadow border for decorative 40
$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-strongest
Token value:
- 0 0 0 1px #310c0c
Strongest 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-error-weaker
Token value:
- 0 0 0 1px #fccfcf
Weaker shadow border for error inputs.
$shadow-border-inverse
Token value:
- 0 0 0 1px #8891aa
Shadow border on interactive elements on inverse backgrounds.
$shadow-border-inverse-new-weaker
Token value:
- 0 0 0 1px #5817bd
Shadow border for the sidebar beta badge.
$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-neutral-weaker
Token value:
- 0 0 0 1px #cce4ff
Weaker shadow border for neutral inputs.
$shadow-border-new-weaker
Token value:
- 0 0 0 1px #e7dcfa
Weaker shadow border for new status inputs.
$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-right-inverse-strong
Token value:
- 1px 0px #e1e3ea
Right shadow border for hover status of vertical tabs on inverse backgrounds
$shadow-border-strong
Token value:
- 0 0 0 1px #606b85
Strong shadow border for inputs.
$shadow-border-subaccount
Token value:
- 0 0 0 1px #fff1b3
Shadow border for subaccount badge.
$shadow-border-success-weaker
Token value:
- 0 0 0 1px #d1fae0
Weaker shadow border for success inputs.
$shadow-border-top-inverse-strongest
Token value:
- 0px -1px 0 #cce4ff
Top shadow border for for selected status of horizontal tabs on inverse backgrounds
$shadow-border-top-primary
Token value:
- 0px -1px 0 #006dfa
Top shadow border for selected status of horizontal tabs
$shadow-border-top-primary-strongest
Token value:
- 0px -1px 0 #030b5d
Top shadow border for selected hover status of horizontal tabs
$shadow-border-user
Token value:
- 0 0 0 1px #8c5bd8
Shadow border for user.
$shadow-border-warning-weaker
Token value:
- 0 0 0 1px #fddcc4
Weaker shadow border for warning 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-focus-inverse-inset
Token value:
- inset 0 0 0 2px rgba(255, 255, 255, 0.4)
Shadow for inset focus ring on interactive elements on inverse backgrounds.
$shadow-focus-shadow-border
Token value:
- 0 0 0 4px rgba(2, 99, 224, 0.7), 0 0 0 1px #8891aa
Shadow for simultaneous focus and border.
$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.

Color schemes

$color-scheme
Token value:
- light

Data visualization

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.

Fonts

Example text:
$font-family-code
Token value:
- 'TwilioSansMono', Courier, monospace
Example text:
$font-family-display
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
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 sizes

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-size-base
Token value:
- 100%
- 1600px
Base font size applied to the html element, used for rem calculations
Example text:
$font-size-display-10
Token value:
- 2rem
- 32px
Constant typography token for font size display 10
Example text:
$font-size-display-20
Token value:
- 3rem
- 48px
Constant typography token for font size display 20
Example text:
$font-size-display-30
Token value:
- 4rem
- 64px
Constant typography token for font size display 30

Font weights

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
Example text:
$font-weight-extrabold
Token value:
- 800
Font weight for extrabold weight

Line heights

$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.5rem
- 40px
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
$line-height-display-10
Token value:
- 2.5rem
- 40px
Constant line-height token for line-height-display 10
$line-height-display-20
Token value:
- 3.75rem
- 60px
Constant line-height token for line-height-display 20
$line-height-display-30
Token value:
- 5rem
- 80px
Constant line-height token for line-height-display 30

Radii

$border-radius-0
Token value:
- 0
Border radius reset
$border-radius-10
Token value:
- 2px
Smallest border radius
$border-radius-20
Token value:
- 4px
Small border radius
$border-radius-30
Token value:
- 8px
Small-medium border radius
$border-radius-40
Token value:
- 12px
Medium border radius
$border-radius-50
Token value:
- 16px
Medium-large border radius
$border-radius-60
Token value:
- 20px
Large border radiusr
$border-radius-70
Token value:
- 24px
Larger border radius
$border-radius-80
Token value:
- 28px
Extra-large border radius
$border-radius-90
Token value:
- 32px
Largest border radius
$border-radius-circle
Token value:
- 50%
Circular border radius
$border-radius-pill
Token value:
- 100px
Pill border radius

Sizings

$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.5rem
- 40px
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:
- 15rem
- 240px
Sizing token for sidebar width.
$size-sidebar-compact
Token value:
- 4.75rem
- 76px
Sizing token for the compact 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.
$size-topbar
Token value:
- 4.75rem
- 76px
Sizing token for the minimum topbar height.

Spacings

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

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-destructive
Token value:
- rgb(214, 31, 31)
- #D61F1F
Destructive text.
Example text:
Accessibility rating: AAA
$color-text-destructive-strong
Token value:
- rgb(173, 17, 17)
- #AD1111
Strong shade of destructive text.
Example text:
Accessibility rating: AAA
$color-text-destructive-stronger
Token value:
- rgb(74, 11, 11)
- #4A0B0B
Stronger shade of destructive text.
Example text:
Accessibility rating: AAA
$color-text-destructive-strongest
Token value:
- rgb(49, 12, 12)
- #310C0C
Strongest shade of destructive text.
Example text:
Accessibility rating: Fail
$color-text-destructive-weak
Token value:
- rgb(246, 177, 177)
- #F6B1B1
Weak shade of destructive text.
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: AAA
$color-text-error-strongest
Token value:
- rgb(49, 12, 12)
- #310C0C
Strongest 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: AAA
$color-text-icon-new
Token value:
- rgb(109, 46, 209)
- #6D2ED1
Icon color for indicating a new status.
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-new
Token value:
- rgb(200, 175, 240)
- #C8AFF0
Inverse color for indicating a new status.
Example text:
Accessibility rating: AAA
$color-text-inverse-weak
Token value:
- rgb(202, 205, 216)
- #CACDD8
Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.
Example text:
Accessibility rating: AA
$color-text-inverse-weaker
Token value:
- rgb(136, 145, 170)
- #8891AA
Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.
Example text:
Accessibility rating: Fail
$color-text-inverse-weakest
Token value:
- rgb(75, 86, 113)
- #4B5671
Weakest 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-primary
Token value:
- rgb(2, 99, 224)
- #0263E0
Primary text.
Example text:
Accessibility rating: AAA
$color-text-primary-strong
Token value:
- rgb(0, 20, 137)
- #001489
Strong primary text.
Example text:
Accessibility rating: AAA
$color-text-primary-stronger
Token value:
- rgb(3, 11, 93)
- #030B5D
Stronger primary text.
Example text:
Accessibility rating: AAA
$color-text-primary-strongest
Token value:
- rgb(6, 3, 58)
- #06033A
Strongest primary text.
Example text:
Accessibility rating: Fail
$color-text-primary-weak
Token value:
- rgb(153, 205, 255)
- #99CDFF
Weak primary text.
Example text:
Accessibility rating: AAA
$color-text-subaccount
Token value:
- rgb(84, 51, 8)
- #543308
Text color for the subaccount badge
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-user
Token value:
- rgb(18, 28, 45)
- #121C2D
Text color for user avatar.
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

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

Scroll to top