A complete list of all design tokens used in our design system.
Choose category...
Aa
Color Content Interactive
Default colour for text and icons that are part of interactive elements.
AA 14.34
colorContentInteractive when rendered on top of colorBackgroundInteractive. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Interactive On Interactive Inverse Loud
Colour for default state of text and icons that are placed on Background Interactive Inverse Loud.
AA 10.13
colorContentInteractiveOnInteractiveInverseLoud when rendered on top of colorBackgroundInteractiveInverseLoud. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Interactive Hover
Text and icons that are part of interactive elements in a hover state.
AA 14.64
colorContentInteractiveHover when rendered on top of colorBackgroundInteractiveHover. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack900)
Raw value:
#131414
Referenced by tokens:
None
Aa
Color Content Interactive Hover On Interactive Inverse Loud
Hover state colour for text and icons that are placed on Background Interactive Inverse Loud.
AA 11.72
colorContentInteractiveHoverOnInteractiveInverseLoud when rendered on top of colorBackgroundInteractiveInverseLoud. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack900)
Raw value:
#131414
Referenced by tokens:
None
Aa
Color Content Interactive Quiet
Text and icons that are part of interactive elements that should attract less attention.
AA 4.52
colorContentInteractiveQuiet when rendered on top of colorBackgroundInteractive. A minimum score of 4.5 is our target.Value:
var(--neutralGray600)
Raw value:
#6b7070
Referenced by tokens:
None
Aa
Color Content Interactive Link
Text and icons that are part of links.
AA 15.49
colorContentInteractiveLink when rendered on top of colorBackgroundStatic. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Interactive Link Hover
Text and icons that are part of links in a hover state.
AA 17.92
colorContentInteractiveLinkHover when rendered on top of colorBackgroundStatic. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack900)
Raw value:
#131414
Referenced by tokens:
None
Aa
Color Content Interactive Disabled
Text and icons that are part of interactive elements in a disabled state.
AA 4.52
colorContentInteractiveDisabled when rendered on top of colorBackgroundInteractiveDisabled. A minimum score of 4.5 is our target.Value:
var(--neutralGray600)
Raw value:
#6b7070
Referenced by tokens:
None
Aa
Color Content Interactive Inverse
Text and icons that are part of interactive elements with reversed background and foreground colours.
AA 14.34
colorContentInteractiveInverse when rendered on top of colorBackgroundInteractiveInverse. A minimum score of 4.5 is our target.Value:
var(--neutralOffWhite200)
Raw value:
#eef4f4
Referenced by tokens:
None
Aa
Color Content Interactive Inverse Hover
Text and icons that are part of interactive elements with reversed background and foreground colours in a hover state.
AA 17.92
colorContentInteractiveInverseHover when rendered on top of colorBackgroundInteractiveInverseHover. A minimum score of 4.5 is our target.Value:
var(--neutralOffWhite100)
Raw value:
#fafcfc
Referenced by tokens:
None
Aa
Color Content Interactive Inverse Quiet
Text and icons that are part of interactive elements with reversed background and foreground colours and that should attract less attention.
AA 12.66
colorContentInteractiveInverseQuiet when rendered on top of colorBackgroundInteractiveInverse. A minimum score of 4.5 is our target.Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Aa
Color Content Interactive Selected
Text and icons that are part of interactive elements in a selected state.
AA 14.34
colorContentInteractiveSelected when rendered on top of colorBackgroundInteractiveSelected. A minimum score of 4.5 is our target.Value:
var(--neutralOffWhite200)
Raw value:
#eef4f4
Referenced by tokens:
None
Aa
Color Content Interactive Selected Hover
Text and icons that are part of interactive elements in a selected and hover state.
AA 17.92
colorContentInteractiveSelectedHover when rendered on top of colorBackgroundInteractiveSelectedHover. A minimum score of 4.5 is our target.Value:
var(--neutralOffWhite100)
Raw value:
#fafcfc
Referenced by tokens:
None
Aa
Color Content Interactive Placeholder
Text and icons used as placeholders in form input elements.
AA 4.52
colorContentInteractivePlaceholder when rendered on top of colorBackgroundInteractive. A minimum score of 4.5 is our target.Value:
var(--neutralGray600)
Raw value:
#6b7070
Referenced by tokens:
None
Aa
Color Content Static
Default colour for text and icons that are part of non-interactive elements.
AA 15.49
colorContentStatic when rendered on top of colorBackgroundStatic. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Static On Presentational Pink
Default colour for text and icons that are part of non-interactive elements placed on Background Presentational Pink.
AA 10.13
colorContentStaticOnPresentationalPink when rendered on top of colorBackgroundPresentationalPink. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Static Quiet On Presentational Pink
Text and icons that are part of non-interactive elements placed on Background Presentational Pink that should attract less attention.
AA 3.19
colorContentStaticQuietOnPresentationalPink when rendered on top of colorBackgroundPresentationalPink. A minimum score of 4.5 is our target.Value:
var(--neutralGray600)
Raw value:
#6b7070
Referenced by tokens:
None
Aa
Color Content Static Quiet
Text and icons that are part of non-interactive elements that should attract less attention.
AA 4.88
colorContentStaticQuiet when rendered on top of colorBackgroundStatic. A minimum score of 4.5 is our target.Value:
var(--neutralGray600)
Raw value:
#6b7070
Referenced by tokens:
None
Aa
Color Content Static Inverse
Text and icons that are part of non-interactive elements with reversed background and foreground colours.
AA 15.49
colorContentStaticInverse when rendered on top of colorBackgroundStaticInverse. A minimum score of 4.5 is our target.Value:
var(--neutralOffWhite100)
Raw value:
#fafcfc
Referenced by tokens:
None
Aa
Color Content Neutral
Text and icons that signal something neutral.
AA 15.49
colorContentNeutral when rendered on top of colorBackgroundStatic. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Negative
Text and icons that signal something negative.
AA 3.17
colorContentNegative when rendered on top of colorBackgroundStatic. A minimum score of 4.5 is our target.Value:
var(--maroon400)
Raw value:
#f15a71
Referenced by tokens:
None
Aa
Color Content Negative Loud
Text and icons that signal something negative. Only use on colorBackgroundNegativeQuiet.
AA 4.42
colorContentNegativeLoud when rendered on top of colorBackgroundNegativeQuiet. A minimum score of 4.5 is our target.Value:
var(--maroon500)
Raw value:
#923544
Referenced by tokens:
None
Aa
Color Content Positive
Text and icons that signal something has gone well.
AA 4.86
colorContentPositive when rendered on top of colorBackgroundStatic. A minimum score of 4.5 is our target.Value:
var(--green500)
Raw value:
#227f47
Referenced by tokens:
None
Aa
Color Content Positive Loud
Text and icons that signal something has gone well. Only use on colorBackgroundPositiveQuiet.
AA 8.29
colorContentPositiveLoud when rendered on top of colorBackgroundPositiveQuiet. A minimum score of 4.5 is our target.Value:
var(--green600)
Raw value:
#1e472e
Referenced by tokens:
None
Aa
Color Content Warning
Text and icons that signal something requires urgent attention.
AA 15.49
colorContentWarning when rendered on top of colorBackgroundStatic. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Warning Loud
Text and icons that signal something requires urgent attention. Only use on colorBackgroundWarningQuiet.
AA 16.66
colorContentWarningLoud when rendered on top of colorBackgroundWarningQuiet. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack900)
Raw value:
#131414
Referenced by tokens:
None
Aa
Color Content Info
Text and icons that signal important information.
AA 4.88
colorContentInfo when rendered on top of colorBackgroundStatic. A minimum score of 4.5 is our target.Value:
var(--neutralGray600)
Raw value:
#6b7070
Referenced by tokens:
None
Aa
Color Content Info Loud
Text and icons that signal important information. Only use on colorBackgroundInfoQuiet.
AA 10.54
colorContentInfoLoud when rendered on top of colorBackgroundInfoQuiet. A minimum score of 4.5 is our target.Value:
var(--neutralGray700)
Raw value:
#2e3030
Referenced by tokens:
None
Aa
Color Content Discover
Text and icons that signal something new in the product.
AA 7.12
colorContentDiscover when rendered on top of colorBackgroundStatic. A minimum score of 4.5 is our target.Value:
var(--blue500)
Raw value:
#2d5693
Referenced by tokens:
None
Aa
Color Content Discover Loud
Text and icons that signal something new in the product. Only use on colorBackgroundDiscoverQuiet.
AA 8.01
colorContentDiscoverLoud when rendered on top of colorBackgroundDiscoverQuiet. A minimum score of 4.5 is our target.Value:
var(--blue600)
Raw value:
#1f375a
Referenced by tokens:
None
Aa
Color Content Category Entertainment
Icons used to signal an expense belonging to the 'entertainment' category
AA 12.66
colorContentCategoryEntertainment when rendered on top of colorBackgroundCategoryEntertainment. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Category Equipment
Icons used to signal an expense belonging to the 'equipment' category
AA 12.66
colorContentCategoryEquipment when rendered on top of colorBackgroundCategoryEquipment. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Category Marketing
Icons used to signal an expense belonging to the 'marketing' category
AA 12.66
colorContentCategoryMarketing when rendered on top of colorBackgroundCategoryMarketing. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Category Meals And Drinks
Icons used to signal an expense belonging to the 'meals and drinks' category
AA 12.66
colorContentCategoryMealsAndDrinks when rendered on top of colorBackgroundCategoryMealsAndDrinks. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Category Office
Icons used to signal an expense belonging to the 'office' category
AA 12.66
colorContentCategoryOffice when rendered on top of colorBackgroundCategoryOffice. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Category Phone And Internet
Icons used to signal an expense belonging to the 'phone and internet' category
AA 12.66
colorContentCategoryPhoneAndInternet when rendered on top of colorBackgroundCategoryPhoneAndInternet. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Category Software
Icons used to signal an expense belonging to the 'software' category
AA 12.66
colorContentCategorySoftware when rendered on top of colorBackgroundCategorySoftware. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Category Travel
Icons used to signal an expense belonging to the 'travel' category
AA 12.66
colorContentCategoryTravel when rendered on top of colorBackgroundCategoryTravel. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Category Service
Icons used to signal an expense belonging to the 'service' category
AA 12.66
colorContentCategoryService when rendered on top of colorBackgroundCategoryService. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Category Supplies
Icons used to signal an expense belonging to the 'supplies' category
AA 12.66
colorContentCategorySupplies when rendered on top of colorBackgroundCategorySupplies. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Category Other
Icons used to signal an expense belonging to the 'other' category
AA 12.66
colorContentCategoryOther when rendered on top of colorBackgroundCategoryOther. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Category None
Icons used to signal an expense belonging to no category
AA 12.66
colorContentCategoryNone when rendered on top of colorBackgroundCategoryNone. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Category Unknown
Icons used to signal an expense whose category isn't known
AA 12.66
colorContentCategoryUnknown when rendered on top of colorBackgroundCategoryUnknown. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Brand Logo
Colour for brand logo elements.
AA 17.92
colorContentBrandLogo when rendered on top of colorBackgroundStatic. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack900)
Raw value:
#131414
Referenced by tokens:
None
Color Background Interactive
Default colour for backgrounds of interactive elements.
Value:
var(--neutralOffWhite200)
Raw value:
#eef4f4
Referenced by tokens:
None
Color Background Interactive Loud
Backgrounds of relatively large interactive elements.
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Interactive Louder
Backgrounds of relatively small interactive elements placed on top of loud or coloured backgrounds.
Value:
var(--neutralGray400)
Raw value:
#b0b6b6
Referenced by tokens:
None
Color Background Interactive Hover
Backgrounds of relatively small interactive elements in a hover state.
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Interactive Quiet Hover
Backgrounds of relatively large interactive elements in a hover state.
Value:
var(--neutralOffWhite200)
Raw value:
#eef4f4
Referenced by tokens:
None
Color Background Interactive Disabled
Backgrounds of interactive elements in a disabled state.
Value:
var(--neutralOffWhite200)
Raw value:
#eef4f4
Referenced by tokens:
None
Color Background Interactive Inverse
Backgrounds of interactive elements with reversed background and foreground colours.
Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Color Background Interactive Inverse Hover
Backgrounds of interactive elements with reversed background and foreground colours in a hover state.
Value:
var(--neutralOffBlack900)
Raw value:
#131414
Referenced by tokens:
None
Color Background Interactive Inverse Loud
Backgrounds of interactive elements with reversed background and foreground colours that should attract attention.
Value:
var(--brandPink)
Raw value:
#feb6fe
Referenced by tokens:
None
Color Background Interactive Selected
Backgrounds of interactive elements in a selected state.
Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Color Background Interactive Selected Hover
Backgrounds of interactive elements in a selected and hover state.
Value:
var(--neutralOffBlack900)
Raw value:
#131414
Referenced by tokens:
None
Color Background Interactive Transparent
Background of interactive elements placed on top of images or documents (e.g. invoices and receipts).
Value:
rgba(19, 20, 20, 0.5)
Raw value:
rgba(19, 20, 20, 0.5)
Referenced by tokens:
None
Color Background Interactive Transparent Hover
Semi-transparent backgrounds of interactive elements in a hover state.
Value:
rgba(19, 20, 20, 0.08)
Raw value:
rgba(19, 20, 20, 0.08)
Referenced by tokens:
None
Color Background Static
Default colour for backgrounds of non-interactive containers.
Value:
var(--neutralOffWhite100)
Raw value:
#fafcfc
Referenced by tokens:
None
Color Background Static Loud
Backgrounds of non-interactive containers that should attract some attention.
Value:
var(--neutralOffWhite200)
Raw value:
#eef4f4
Referenced by tokens:
None
Color Background Static Louder
Backgrounds of non-interactive containers that should attract significant attention.
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Static Loudest
Backgrounds of non-interactive containers that should attract the most attention.
Value:
var(--neutralGray400)
Raw value:
#b0b6b6
Referenced by tokens:
None
Color Background Static Page
The background upon which everything else is placed.
Value:
var(--neutralOffWhite100)
Raw value:
#fafcfc
Referenced by tokens:
None
Color Background Static Backdrop
Semi-transparent backgrounds that sit between an overlay, such as a modal, and the rest of the underlying UI.
Value:
rgba(19, 20, 20, 0.5)
Raw value:
rgba(19, 20, 20, 0.5)
Referenced by tokens:
None
Color Background Static Inverse
Backgrounds of non-interactive containers with reversed background and foreground colours.
Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Color Background Neutral
Backgrounds of relatively small elements that signal something neutral.
Value:
var(--neutralGray400)
Raw value:
#b0b6b6
Referenced by tokens:
None
Color Background Neutral Quiet
Backgrounds of relatively large elements that signal something neutral.
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Negative
Backgrounds of relatively small elements that signal something negative.
Value:
var(--maroon400)
Raw value:
#f15a71
Referenced by tokens:
None
Color Background Negative Quiet
Backgrounds of relatively large elements that signal something negative.
Value:
var(--maroon200)
Raw value:
#ffb3bf
Referenced by tokens:
None
Color Background Negative Hover
Backgrounds of relatively small elements that signal something negative and are in a hover state.
Value:
var(--maroon500)
Raw value:
#923544
Referenced by tokens:
None
Color Background Positive
Backgrounds of relatively small elements that signal something has gone well.
Value:
var(--green400)
Raw value:
#21c663
Referenced by tokens:
None
Color Background Positive Quiet
Backgrounds of relatively large elements that signal something has gone well.
Value:
var(--green200)
Raw value:
#b5f2cd
Referenced by tokens:
None
Color Background Warning
Backgrounds of relatively small elements that signal something requires urgent attention.
Value:
var(--yellow300)
Raw value:
#f0e556
Referenced by tokens:
None
Color Background Warning Quiet
Backgrounds of relatively large elements that signal something requires urgent attention.
Value:
var(--yellow200)
Raw value:
#fff790
Referenced by tokens:
None
Color Background Info
Backgrounds of relatively small elements that signal important information.
Value:
var(--neutralGray400)
Raw value:
#b0b6b6
Referenced by tokens:
None
Color Background Info Quiet
Backgrounds of relatively large elements that signal important information.
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Discover
Backgrounds of relatively small elements that signal something new in the product.
Value:
var(--blue300)
Raw value:
#81c9ff
Referenced by tokens:
None
Color Background Discover Quiet
Backgrounds of relatively large elements that signal something new in the product.
Value:
var(--blue200)
Raw value:
#a8d9ff
Referenced by tokens:
None
Color Background Presentational Gray
Final brand color for backgrounds of elements that need to attract attention and are differentiated based on colour.
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Presentational Green
Tertiary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour.
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Presentational Pink
Primary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour.
Value:
var(--brandPink)
Raw value:
#feb6fe
Referenced by tokens:
None
Color Background Presentational Purple
Tertiary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour.
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Presentational Yellow
Secondary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour.
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Category Entertainment
Backgrounds upon which icons are placed from the 'entertainment' expense category
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Category Equipment
Backgrounds upon which icons are placed from the 'equipment' expense category
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Category Marketing
Backgrounds upon which icons are placed from the 'marketing' expense category
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Category Meals And Drinks
Backgrounds upon which icons are placed from the 'meals and drinks' expense category
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Category Office
Backgrounds upon which icons are placed from the 'office' expense category
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Category Phone And Internet
Backgrounds upon which icons are placed from the 'phone and internet' expense category
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Category Software
Backgrounds upon which icons are placed from the 'software' expense category
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Category Travel
Backgrounds upon which icons are placed from the 'travel' expense category
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Category Service
Backgrounds upon which icons are placed from the 'service' expense category
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Category Supplies
Backgrounds upon which icons are placed from the 'supplies' expense category
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Category Other
Backgrounds upon which icons are placed from the 'other' expense category
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Category None
Backgrounds upon which icons are placed when they do not have an expense category
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Category Unknown
Backgrounds upon which icons are placed when the category isn't known
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Notification
New: ExperimentalBackground of relatively small UI elements that signal something new and actionable, such as a dot for new features or a count of items the user needs to take action on
Value:
var(--maroon500)
Raw value:
#923544
Referenced by tokens:
None
Color Border Interactive
Default border colour of interactive elements.
Value:
var(--neutralGray600)
Raw value:
#6b7070
Referenced by tokens:
borderInteractive
borderInteractiveQuiet
borderInteractiveLoud
borderInteractiveHover
borderInteractiveDisabled
borderInteractiveSelected
borderInteractiveSelectedHover
Color Border Interactive Quiet
Borders of interactive elements that should attract less attention.
Value:
var(--neutralGray500)
Raw value:
#7f8686
Referenced by tokens:
borderInteractiveQuiet
Color Border Interactive Loud
Borders of interactive containers that should attract attention.
Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
borderInteractiveLoud
Color Border Interactive Louder
Borders of interactive containers that should attract the most attention.
Value:
var(--brandPink)
Raw value:
#feb6fe
Referenced by tokens:
None
Color Border Interactive Hover
Borders of interactive elements in a hover state.
Value:
var(--neutralOffBlack900)
Raw value:
#131414
Referenced by tokens:
borderInteractiveHover
Color Border Interactive Disabled
Borders of interactive elements in a disabled state.
Value:
var(--neutralGray500)
Raw value:
#7f8686
Referenced by tokens:
borderInteractiveDisabled
Color Border Interactive Selected
Borders of interactive elements in a selected state.
Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
borderInteractiveSelected
borderInteractiveSelectedHover
Color Border Interactive Selected Hover
Borders of interactive elements in a selected and hover state.
Value:
var(--neutralOffBlack900)
Raw value:
#131414
Referenced by tokens:
borderInteractiveSelectedHover
Color Border Interactive Selected Loud
Borders of interactive elements in a selected state that should attract attention.
Value:
var(--brandPink)
Raw value:
#feb6fe
Referenced by tokens:
None
Color Border Static
Borders of non-interactive containers.
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
borderStatic
borderStaticLoud
Color Border Static Loud
Borders or separators of non-interactive elements that should attract attention or are used on top of loud static backgrounds.
Value:
var(--neutralGray500)
Raw value:
#7f8686
Referenced by tokens:
borderStaticLoud
Color Border Neutral
Borders of elements that signal something neutral.
Value:
var(--neutralGray600)
Raw value:
#6b7070
Referenced by tokens:
borderNeutral
Color Border Negative
Borders of elements that signal something negative.
Value:
var(--maroon400)
Raw value:
#f15a71
Referenced by tokens:
borderNegative
borderNegativeHover
Color Border Negative Hover
Borders of interactive elements that signal something negative and are in a hover state.
Value:
var(--maroon500)
Raw value:
#923544
Referenced by tokens:
borderNegativeHover
Color Border Positive
Borders of elements that signal something has gone well.
Value:
var(--green500)
Raw value:
#227f47
Referenced by tokens:
borderPositive
Color Border Warning
Borders of elements that signal something requires urgent attention.
Value:
var(--yellow300)
Raw value:
#f0e556
Referenced by tokens:
borderWarning
Color Border Info
Borders of elements that signal important information.
Value:
var(--neutralGray600)
Raw value:
#6b7070
Referenced by tokens:
borderInfo
Color Border Discover
Borders of elements that signal something new in the product.
Value:
var(--blue400)
Raw value:
#407cd6
Referenced by tokens:
borderDiscover
Color Shadow Focus
Default focus ring colour.
Value:
var(--neutralOffBlack900)
Raw value:
#131414
Referenced by tokens:
shadowFocusRegular
shadowFocusRegularInvalid
shadowFocusInset
shadowFocusInsetInvalid
Color Shadow Focus Invalid
Focus ring colour for interactive elements in an invalid state.
Value:
var(--maroon400)
Raw value:
#f15a71
Referenced by tokens:
shadowFocusRegularInvalid
shadowFocusInsetInvalid
Color Shadow Depth
Default shadow colour for elevations.
Value:
rgba(19, 20, 20, 0.1)
Raw value:
rgba(19, 20, 20, 0.1)
Referenced by tokens:
shadowElevate
shadowElevateLoud
shadowElevateQuiet
shadowRaise
shadowRaiseQuiet
Color Shadow Depth Quiet
Shadow colour for subtle elevations.
Value:
rgba(19, 20, 20, 0.05)
Raw value:
rgba(19, 20, 20, 0.05)
Referenced by tokens:
shadowElevateQuiet
Color Shadow Depth Loud
Shadow colour for strong elevations.
Value:
rgba(19, 20, 20, 0.6)
Raw value:
rgba(19, 20, 20, 0.6)
Referenced by tokens:
shadowElevateLoud
Shadow Elevate
Shadow that elevates elements from their bottom edge.
Value:
0 8px 12px -4px var(--colorShadowDepth)
Raw value:
0 8px 12px -4px rgba(19, 20, 20, 0.1)
Referenced by tokens:
None
Shadow Elevate Loud
Shadow that strongly elevates elements from their bottom edge.
Value:
0 2px 8px -6px var(--colorShadowDepthLoud)
Raw value:
0 2px 8px -6px rgba(19, 20, 20, 0.6)
Referenced by tokens:
None
Shadow Elevate Quiet
Shadow that subtly elevates elements subtly from their bottom edge.
Value:
0 8px 12px -4px var(--colorShadowDepthQuiet)
Raw value:
0 8px 12px -4px rgba(19, 20, 20, 0.05)
Referenced by tokens:
None
Shadow Raise
Shadow that raises elements off the page from all edges.
Value:
0 6px 24px 0 var(--colorShadowDepth)
Raw value:
0 6px 24px 0 rgba(19, 20, 20, 0.1)
Referenced by tokens:
None
Shadow Raise Quiet
Shadow that subtly raises elements off the page from all edges.
Value:
0 3px 12px 0 var(--colorShadowDepth)
Raw value:
0 3px 12px 0 rgba(19, 20, 20, 0.1)
Referenced by tokens:
None
Shadow Focus Regular
Default focus ring for interactive elements. However, use Telescope's `focusRing` utility for focus states, instead.
Value:
0 0 0 3px var(--colorShadowFocus)
Raw value:
0 0 0 3px #131414
Referenced by tokens:
None
Shadow Focus Regular Invalid
Default focus ring for invalid interactive elements. However, use Telescope's `focusRing` utility for focus states, instead.
Value:
0 0 0 3px var(--colorShadowFocusInvalid)
Raw value:
0 0 0 3px #f15a71
Referenced by tokens:
None
Shadow Focus Inset
Inset focus ring for interactive elements with no space around them. However, use Telescope's `focusRing` utility for focus states, instead.
Value:
inset 0 0 0 3px var(--colorShadowFocus)
Raw value:
inset 0 0 0 3px #131414
Referenced by tokens:
None
Shadow Focus Inset Invalid
Inset focus ring for invalid interactive elements with no space around them. However, use Telescope's `focusRing` utility for focus states, instead.
Value:
inset 0 0 0 3px var(--colorShadowFocusInvalid)
Raw value:
inset 0 0 0 3px #f15a71
Referenced by tokens:
None
Border Interactive
Default border of interactive elements.
Value:
var(--sizeBorderDefault) solid var(--colorBorderInteractive)
Raw value:
1px solid #6b7070
Referenced by tokens:
None
Border Interactive Quiet
Borders of interactive elements that should attract less attention.
Value:
var(--sizeBorderDefault) solid var(--colorBorderInteractiveQuiet)
Raw value:
1px solid #7f8686
Referenced by tokens:
None
Border Interactive Loud
Borders of interactive containers that should attract attention.
Value:
var(--sizeBorderDefault) solid var(--colorBorderInteractiveLoud)
Raw value:
1px solid #212222
Referenced by tokens:
None
Border Interactive Hover
Borders of interactive elements in a hover state.
Value:
var(--sizeBorderDefault) solid var(--colorBorderInteractiveHover)
Raw value:
1px solid #131414
Referenced by tokens:
None
Border Interactive Disabled
Borders of interactive elements in a disabled state.
Value:
var(--sizeBorderDefault) solid var(--colorBorderInteractiveDisabled)
Raw value:
1px solid #7f8686
Referenced by tokens:
None
Border Interactive Selected
Borders of interactive elements in a selected state.
Value:
var(--sizeBorderDefault) solid var(--colorBorderInteractiveSelected)
Raw value:
1px solid #212222
Referenced by tokens:
None
Border Interactive Selected Hover
Borders of interactive elements in a selected and hover state.
Value:
var(--sizeBorderDefault) solid var(--colorBorderInteractiveSelectedHover)
Raw value:
1px solid #131414
Referenced by tokens:
None
Border Static
Borders of non-interactive containers.
Value:
var(--sizeBorderDefault) solid var(--colorBorderStatic)
Raw value:
1px solid #e1e6e6
Referenced by tokens:
None
Border Static Loud
Borders or separators of non-interactive elements that should attract attention or are used on top of loud static backgrounds.
Value:
var(--sizeBorderDefault) solid var(--colorBorderStaticLoud)
Raw value:
1px solid #7f8686
Referenced by tokens:
None
Border Neutral
Borders of elements that signal something neutral.
Value:
var(--sizeBorderDefault) solid var(--colorBorderNeutral)
Raw value:
1px solid #6b7070
Referenced by tokens:
None
Border Negative
Borders of elements that signal something negative.
Value:
var(--sizeBorderDefault) solid var(--colorBorderNegative)
Raw value:
1px solid #f15a71
Referenced by tokens:
None
Border Negative Hover
Borders of interactive elements that signal something negative and are in a hover state.
Value:
var(--sizeBorderDefault) solid var(--colorBorderNegativeHover)
Raw value:
1px solid #923544
Referenced by tokens:
None
Border Positive
Borders of elements that signal something has gone well.
Value:
var(--sizeBorderDefault) solid var(--colorBorderPositive)
Raw value:
1px solid #227f47
Referenced by tokens:
None
Border Warning
Borders of elements that signal something requires urgent attention.
Value:
var(--sizeBorderDefault) solid var(--colorBorderWarning)
Raw value:
1px solid #f0e556
Referenced by tokens:
None
Border Info
Borders of elements that signal important information.
Value:
var(--sizeBorderDefault) solid var(--colorBorderInfo)
Raw value:
1px solid #6b7070
Referenced by tokens:
None
Border Discover
Borders of elements that signal something new in the product.
Value:
var(--sizeBorderDefault) solid var(--colorBorderDiscover)
Raw value:
1px solid #407cd6
Referenced by tokens:
None
Color Background Card Disabled
Background colour of a disabled Pleo Card.
Value:
var(--blue300)
Raw value:
#81c9ff
Referenced by tokens:
None
Color Background Card Physical
Background colour of the physical Pleo Card.
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Background Card Vendor
Background colour of the vendor Pleo Card.
Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Color Background Card Virtual
Background colour of the virtual Pleo Card.
Value:
var(--yellow400)
Raw value:
#dbc713
Referenced by tokens:
None
Color Background Card Decorative Surface Vendor
Background colour of the vendor Pleo Card (quiet).
Value:
var(--neutralGray700)
Raw value:
#2e3030
Referenced by tokens:
None
Color Background Card Decorative Surface Virtual
Background colour of the virtual Pleo Card (quiet).
Value:
var(--yellow300)
Raw value:
#f0e556
Referenced by tokens:
None
Color Border Card Disabled
Border colour of a disabled Pleo Card.
Value:
var(--blue400)
Raw value:
#407cd6
Referenced by tokens:
None
Color Border Card Physical
Border colour of the physical Pleo Card.
Value:
var(--neutralGray400)
Raw value:
#b0b6b6
Referenced by tokens:
None
Color Border Card Vendor
Border colour of the vendor Pleo Card.
Value:
var(--neutralGray300)
Raw value:
#e1e6e6
Referenced by tokens:
None
Color Border Card Virtual
Border colour of the virtual Pleo Card.
Value:
var(--yellow500)
Raw value:
#7d7532
Referenced by tokens:
None
Aa
Color Content Card Disabled
Content colour of a disabled Pleo Card.
AA 2.81
colorContentCardDisabled when rendered on top of colorBackgroundCardDisabled. A minimum score of 4.5 is our target.Value:
var(--neutralGray600)
Raw value:
#6b7070
Referenced by tokens:
None
Aa
Color Content Card Physical
Content colour of the physical Pleo Card.
AA 12.66
colorContentCardPhysical when rendered on top of colorBackgroundCardPhysical. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Aa
Color Content Card Vendor
Content colour of the vendor Pleo Card.
AA 14.34
colorContentCardVendor when rendered on top of colorBackgroundCardVendor. A minimum score of 4.5 is our target.Value:
var(--neutralOffWhite200)
Raw value:
#eef4f4
Referenced by tokens:
None
Aa
Color Content Card Virtual
Content colour of the virtual Pleo Card.
AA 9.26
colorContentCardVirtual when rendered on top of colorBackgroundCardVirtual. A minimum score of 4.5 is our target.Value:
var(--neutralOffBlack800)
Raw value:
#212222
Referenced by tokens:
None
Size Border Default
No description available
Value:
1px
Raw value:
1px
Referenced by tokens:
borderInteractive
borderInteractiveQuiet
borderInteractiveLoud
borderInteractiveHover
borderInteractiveDisabled
borderInteractiveSelected
borderInteractiveSelectedHover
borderStatic
borderStaticLoud
borderNeutral
borderNegative
borderNegativeHover
borderPositive
borderWarning
borderInfo
borderDiscover
Size Border Thick
No description available
Value:
2px
Raw value:
2px
Referenced by tokens:
None
Size Border Thickest
No description available
Value:
3px
Raw value:
3px
Referenced by tokens:
None
Size Border4x
No description available
Value:
4px
Raw value:
4px
Referenced by tokens:
None
Aa
Font Size Baseline10x
No description available
Value:
20px
Raw value:
20px
Referenced by tokens:
None
Aa
Font Size Baseline13x
No description available
Value:
26px
Raw value:
26px
Referenced by tokens:
None
Aa
Font Size Baseline15x
No description available
Value:
30px
Raw value:
30px
Referenced by tokens:
None
Aa
Font Size Baseline16x
No description available
Value:
32px
Raw value:
32px
Referenced by tokens:
None
Aa
Font Size Baseline18x
No description available
Value:
36px
Raw value:
36px
Referenced by tokens:
None
Aa
Font Size Baseline21x
No description available
Value:
42px
Raw value:
42px
Referenced by tokens:
None
Aa
Font Size Baseline22x
No description available
Value:
44px
Raw value:
44px
Referenced by tokens:
None
Aa
Font Size Baseline25x
No description available
Value:
50px
Raw value:
50px
Referenced by tokens:
None
Aa
Font Size Baseline29x
No description available
Value:
58px
Raw value:
58px
Referenced by tokens:
None
Aa
Font Size Baseline39x
No description available
Value:
78px
Raw value:
78px
Referenced by tokens:
None
Aa
Font Size Baseline7x
No description available
Value:
14px
Raw value:
14px
Referenced by tokens:
None
Aa
Font Size Baseline8x
No description available
Value:
16px
Raw value:
16px
Referenced by tokens:
None
Aa
Font Weight Regular
No description available
Value:
400
Raw value:
400
Referenced by tokens:
None
Aa
Font Weight Medium
No description available
Value:
500
Raw value:
500
Referenced by tokens:
None
Aa
Font Weight Semibold
No description available
Value:
600
Raw value:
600
Referenced by tokens:
None
Aa
Font Weight Bold
No description available
Value:
700
Raw value:
700
Referenced by tokens:
None
Aa
Line Height18
No description available
Value:
18px
Raw value:
18px
Referenced by tokens:
None
Aa
Line Height182
No description available
Value:
18.2px
Raw value:
18.2px
Referenced by tokens:
None
Aa
Line Height19
No description available
Value:
19px
Raw value:
19px
Referenced by tokens:
None
Aa
Line Height192
No description available
Value:
19.2px
Raw value:
19.2px
Referenced by tokens:
None
Aa
Line Height24
No description available
Value:
24px
Raw value:
24px
Referenced by tokens:
None
Aa
Line Height31
No description available
Value:
31px
Raw value:
31px
Referenced by tokens:
None
Aa
Line Height312
No description available
Value:
31.2px
Raw value:
31.2px
Referenced by tokens:
None
Aa
Line Height36
No description available
Value:
36px
Raw value:
36px
Referenced by tokens:
None
Aa
Line Height38
No description available
Value:
38px
Raw value:
38px
Referenced by tokens:
None
Aa
Line Height4176
No description available
Value:
41.76px
Raw value:
41.76px
Referenced by tokens:
None
Aa
Line Height4872
No description available
Value:
48.72px
Raw value:
48.72px
Referenced by tokens:
None
Aa
Line Height51
No description available
Value:
51px
Raw value:
51px
Referenced by tokens:
None
Aa
Line Height5104
No description available
Value:
51.04px
Raw value:
51.04px
Referenced by tokens:
None
Aa
Line Height56
No description available
Value:
56px
Raw value:
56px
Referenced by tokens:
None
Aa
Line Height67
No description available
Value:
67px
Raw value:
67px
Referenced by tokens:
None
Aa
Line Height6728
No description available
Value:
67.28px
Raw value:
67.28px
Referenced by tokens:
None
Aa
Line Height90
No description available
Value:
90px
Raw value:
90px
Referenced by tokens:
None
Motion Within Small Short
The easing and duration for motion happening to a small element over a short distance within the screen.
Value:
0.12s ease-in-out
Raw value:
0.12s ease-in-out
Referenced by tokens:
None
Motion Within Small Long
The easing and duration for motion happening to a small element over a long distance within the screen.
Value:
0.24s ease-in-out
Raw value:
0.24s ease-in-out
Referenced by tokens:
None
Motion Within Large Short
The easing and duration for motion happening to a large element over a short distance within the screen.
Value:
0.12s ease-in-out
Raw value:
0.12s ease-in-out
Referenced by tokens:
None
Motion Within Large Long
The easing and duration for motion happening to a large element over a long distance within the screen.
Value:
0.36s ease-in-out
Raw value:
0.36s ease-in-out
Referenced by tokens:
None
Motion Enter Small Short
The easing and duration for motion happening to a small element over a short distance when entering the screen.
Value:
0.24s ease-out
Raw value:
0.24s ease-out
Referenced by tokens:
None
Motion Enter Small Long
The easing and duration for motion happening to a small element over a long distance when entering the screen.
Value:
0.36s ease-out
Raw value:
0.36s ease-out
Referenced by tokens:
None
Motion Enter Large Short
The easing and duration for motion happening to a large element over a short distance when entering the screen.
Value:
0.36s ease-out
Raw value:
0.36s ease-out
Referenced by tokens:
None
Motion Enter Large Long
The easing and duration for motion happening to a large element over a long distance when entering the screen.
Value:
0.48s ease-out
Raw value:
0.48s ease-out
Referenced by tokens:
None
Motion Exit Small Short
The easing and duration for motion happening to a small element over a short distance when exiting the screen.
Value:
0.12s ease-in
Raw value:
0.12s ease-in
Referenced by tokens:
None
Motion Exit Small Long
The easing and duration for motion happening to a small element over a long distance when exiting the screen.
Value:
0.24s ease-in
Raw value:
0.24s ease-in
Referenced by tokens:
None
Motion Exit Large Short
The easing and duration for motion happening to a large element over a short distance when exiting the screen.
Value:
0.24s ease-in
Raw value:
0.24s ease-in
Referenced by tokens:
None
Motion Exit Large Long
The easing and duration for motion happening to a large element over a long distance when exiting the screen.
Value:
0.36s ease-in
Raw value:
0.36s ease-in
Referenced by tokens:
None
Opacity01
No description available
Value:
0.01
Raw value:
0.01
Referenced by tokens:
None
Opacity05
No description available
Value:
0.05
Raw value:
0.05
Referenced by tokens:
None
Opacity10
No description available
Value:
0.1
Raw value:
0.1
Referenced by tokens:
None
Opacity20
No description available
Value:
0.2
Raw value:
0.2
Referenced by tokens:
None
Opacity30
No description available
Value:
0.3
Raw value:
0.3
Referenced by tokens:
None
Opacity40
No description available
Value:
0.4
Raw value:
0.4
Referenced by tokens:
None
Opacity50
No description available
Value:
0.5
Raw value:
0.5
Referenced by tokens:
None
Opacity60
No description available
Value:
0.6
Raw value:
0.6
Referenced by tokens:
None
Opacity70
No description available
Value:
0.7
Raw value:
0.7
Referenced by tokens:
None
Opacity80
No description available
Value:
0.8
Raw value:
0.8
Referenced by tokens:
None
Opacity90
No description available
Value:
0.9
Raw value:
0.9
Referenced by tokens:
None
Arc0
No description available
Value:
0px
Raw value:
0px
Referenced by tokens:
None
Arc4
No description available
Value:
4px
Raw value:
4px
Referenced by tokens:
None
Arc8
No description available
Value:
8px
Raw value:
8px
Referenced by tokens:
None
Arc12
No description available
Value:
12px
Raw value:
12px
Referenced by tokens:
None
Arc16
No description available
Value:
16px
Raw value:
16px
Referenced by tokens:
None
Arc20
No description available
Value:
20px
Raw value:
20px
Referenced by tokens:
None
Arc99999
No description available
Value:
99999px
Raw value:
99999px
Referenced by tokens:
None
Circle
No description available
Value:
50%
Raw value:
50%
Referenced by tokens:
None
Spacing2
No description available
Value:
2px
Raw value:
2px
Referenced by tokens:
None
Spacing4
No description available
Value:
4px
Raw value:
4px
Referenced by tokens:
None
Spacing6
No description available
Value:
6px
Raw value:
6px
Referenced by tokens:
None
Spacing8
No description available
Value:
8px
Raw value:
8px
Referenced by tokens:
None
Spacing10
No description available
Value:
10px
Raw value:
10px
Referenced by tokens:
None
Spacing12
No description available
Value:
12px
Raw value:
12px
Referenced by tokens:
None
Spacing14
No description available
Value:
14px
Raw value:
14px
Referenced by tokens:
None
Spacing16
No description available
Value:
16px
Raw value:
16px
Referenced by tokens:
None
Spacing18
No description available
Value:
18px
Raw value:
18px
Referenced by tokens:
None
Spacing20
No description available
Value:
20px
Raw value:
20px
Referenced by tokens:
None
Spacing24
No description available
Value:
24px
Raw value:
24px
Referenced by tokens:
None
Spacing28
No description available
Value:
28px
Raw value:
28px
Referenced by tokens:
None
Spacing32
No description available
Value:
32px
Raw value:
32px
Referenced by tokens:
None
Spacing36
No description available
Value:
36px
Raw value:
36px
Referenced by tokens:
None
Spacing40
No description available
Value:
40px
Raw value:
40px
Referenced by tokens:
None
Spacing44
No description available
Value:
44px
Raw value:
44px
Referenced by tokens:
None
Spacing48
No description available
Value:
48px
Raw value:
48px
Referenced by tokens:
None
Spacing52
No description available
Value:
52px
Raw value:
52px
Referenced by tokens:
None
Spacing56
No description available
Value:
56px
Raw value:
56px
Referenced by tokens:
None
Spacing60
No description available
Value:
60px
Raw value:
60px
Referenced by tokens:
None
1
Z Index Surface
No description available
Value:
1
Raw value:
1
Referenced by tokens:
None
5
Z Index Overlay
No description available
Value:
5
Raw value:
5
Referenced by tokens:
None
10
Z Index Window
No description available
Value:
10
Raw value:
10
Referenced by tokens:
None
20
Z Index Dropdown
No description available
Value:
20
Raw value:
20
Referenced by tokens:
None
30
Z Index Tooltip
No description available
Value:
30
Raw value:
30
Referenced by tokens:
None
40
Z Index Navigation
No description available
Value:
40
Raw value:
40
Referenced by tokens:
None
50
Z Index Modal
No description available
Value:
50
Raw value:
50
Referenced by tokens:
None
60
Z Index Popover
No description available
Value:
60
Raw value:
60
Referenced by tokens:
None