# Design tokens A complete list of all design tokens used in our design system. Tabs: [Overview](/design-tokens/design-tokens.overview.md) · [About](/design-tokens/design-tokens.about.md) · [Code](/design-tokens/design-tokens.code.md) · [Design](/design-tokens/design-tokens.design.md) ## Light theme ### `colorContentInteractive` Default colour for text and icons that are part of interactive elements. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 14.34 when rendered on `colorBackgroundInteractive`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveOnInteractiveInverseLoud` Colour for default state of text and icons that are placed on Background Interactive Inverse Loud. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 10.13 when rendered on `colorBackgroundInteractiveInverseLoud`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveHover` Text and icons that are part of interactive elements in a hover state. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: None Contrast: AA 14.64 when rendered on `colorBackgroundInteractiveHover`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveHoverOnInteractiveInverseLoud` Hover state colour for text and icons that are placed on Background Interactive Inverse Loud. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: None Contrast: AA 11.72 when rendered on `colorBackgroundInteractiveInverseLoud`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveQuiet` Text and icons that are part of interactive elements that should attract less attention. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: None Contrast: AA 4.52 when rendered on `colorBackgroundInteractive`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveLink` Text and icons that are part of links. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 15.49 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveLinkHover` Text and icons that are part of links in a hover state. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: None Contrast: AA 17.92 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveDisabled` Text and icons that are part of interactive elements in a disabled state. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: None Contrast: AA 4.52 when rendered on `colorBackgroundInteractiveDisabled`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveInverse` Text and icons that are part of interactive elements with reversed background and foreground colours. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 14.34 when rendered on `colorBackgroundInteractiveInverse`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveInverseHover` Text and icons that are part of interactive elements with reversed background and foreground colours in a hover state. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: None Contrast: AA 17.92 when rendered on `colorBackgroundInteractiveInverseHover`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveInverseQuiet` Text and icons that are part of interactive elements with reversed background and foreground colours and that should attract less attention. Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundInteractiveInverse`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveSelected` Text and icons that are part of interactive elements in a selected state. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 14.34 when rendered on `colorBackgroundInteractiveSelected`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveSelectedHover` Text and icons that are part of interactive elements in a selected and hover state. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: None Contrast: AA 17.92 when rendered on `colorBackgroundInteractiveSelectedHover`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractivePlaceholder` Text and icons used as placeholders in form input elements. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: None Contrast: AA 4.52 when rendered on `colorBackgroundInteractive`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentStatic` Default colour for text and icons that are part of non-interactive elements. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 15.49 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentStaticOnPresentationalPink` Default colour for text and icons that are part of non-interactive elements placed on Background Presentational Pink. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 10.13 when rendered on `colorBackgroundPresentationalPink`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentStaticQuietOnPresentationalPink` Text and icons that are part of non-interactive elements placed on Background Presentational Pink that should attract less attention. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: None Contrast: AA 3.19 when rendered on `colorBackgroundPresentationalPink`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentStaticQuiet` Text and icons that are part of non-interactive elements that should attract less attention. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: None Contrast: AA 4.88 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentStaticInverse` Text and icons that are part of non-interactive elements with reversed background and foreground colours. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: None Contrast: AA 15.49 when rendered on `colorBackgroundStaticInverse`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentNeutral` Text and icons that signal something neutral. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 15.49 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentNegative` Text and icons that signal something negative. Value: `var(--maroon400)` Raw value: `#f15a71` Referenced by tokens: None Contrast: AA 3.17 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentNegativeLoud` Text and icons that signal something negative. Only use on colorBackgroundNegativeQuiet. Value: `var(--maroon500)` Raw value: `#923544` Referenced by tokens: None Contrast: AA 4.42 when rendered on `colorBackgroundNegativeQuiet`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentPositive` Text and icons that signal something has gone well. Value: `var(--green500)` Raw value: `#227f47` Referenced by tokens: None Contrast: AA 4.86 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentPositiveLoud` Text and icons that signal something has gone well. Only use on colorBackgroundPositiveQuiet. Value: `var(--green600)` Raw value: `#1e472e` Referenced by tokens: None Contrast: AA 8.29 when rendered on `colorBackgroundPositiveQuiet`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentWarning` Text and icons that signal something requires urgent attention. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 15.49 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentWarningLoud` Text and icons that signal something requires urgent attention. Only use on colorBackgroundWarningQuiet. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: None Contrast: AA 16.66 when rendered on `colorBackgroundWarningQuiet`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInfo` Text and icons that signal important information. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: None Contrast: AA 4.88 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInfoLoud` Text and icons that signal important information. Only use on colorBackgroundInfoQuiet. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None Contrast: AA 10.54 when rendered on `colorBackgroundInfoQuiet`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentDiscover` Text and icons that signal something new in the product. Value: `var(--blue500)` Raw value: `#2d5693` Referenced by tokens: None Contrast: AA 7.12 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentDiscoverLoud` Text and icons that signal something new in the product. Only use on colorBackgroundDiscoverQuiet. Value: `var(--blue600)` Raw value: `#1f375a` Referenced by tokens: None Contrast: AA 8.01 when rendered on `colorBackgroundDiscoverQuiet`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryEntertainment` Icons used to signal an expense belonging to the 'entertainment' category Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCategoryEntertainment`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryEquipment` Icons used to signal an expense belonging to the 'equipment' category Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCategoryEquipment`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryMarketing` Icons used to signal an expense belonging to the 'marketing' category Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCategoryMarketing`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryMealsAndDrinks` Icons used to signal an expense belonging to the 'meals and drinks' category Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCategoryMealsAndDrinks`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryOffice` Icons used to signal an expense belonging to the 'office' category Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCategoryOffice`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryPhoneAndInternet` Icons used to signal an expense belonging to the 'phone and internet' category Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCategoryPhoneAndInternet`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategorySoftware` Icons used to signal an expense belonging to the 'software' category Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCategorySoftware`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryTravel` Icons used to signal an expense belonging to the 'travel' category Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCategoryTravel`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryService` Icons used to signal an expense belonging to the 'service' category Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCategoryService`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategorySupplies` Icons used to signal an expense belonging to the 'supplies' category Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCategorySupplies`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryOther` Icons used to signal an expense belonging to the 'other' category Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCategoryOther`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryNone` Icons used to signal an expense belonging to no category Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCategoryNone`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryUnknown` Icons used to signal an expense whose category isn't known Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCategoryUnknown`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentBrandLogo` Colour for brand logo elements. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: None Contrast: AA 17.92 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorBackgroundInteractive` Default colour for backgrounds of interactive elements. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None ### `colorBackgroundInteractiveLoud` Backgrounds of relatively large interactive elements. Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundInteractiveLouder` Backgrounds of relatively small interactive elements placed on top of loud or coloured backgrounds. Value: `var(--neutralGray400)` Raw value: `#b0b6b6` Referenced by tokens: None ### `colorBackgroundInteractiveHover` Backgrounds of relatively small interactive elements in a hover state. Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundInteractiveQuietHover` Backgrounds of relatively large interactive elements in a hover state. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None ### `colorBackgroundInteractiveDisabled` Backgrounds of interactive elements in a disabled state. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None ### `colorBackgroundInteractiveInverse` Backgrounds of interactive elements with reversed background and foreground colours. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None ### `colorBackgroundInteractiveInverseHover` Backgrounds of interactive elements with reversed background and foreground colours in a hover state. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: None ### `colorBackgroundInteractiveInverseLoud` Backgrounds of interactive elements with reversed background and foreground colours that should attract attention. Value: `var(--brandPink)` Raw value: `#feb6fe` Referenced by tokens: None ### `colorBackgroundInteractiveSelected` Backgrounds of interactive elements in a selected state. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None ### `colorBackgroundInteractiveSelectedHover` Backgrounds of interactive elements in a selected and hover state. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: None ### `colorBackgroundInteractiveTransparent` 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 ### `colorBackgroundInteractiveTransparentHover` 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 ### `colorBackgroundStatic` Default colour for backgrounds of non-interactive containers. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: None ### `colorBackgroundStaticLoud` Backgrounds of non-interactive containers that should attract some attention. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None ### `colorBackgroundStaticLouder` Backgrounds of non-interactive containers that should attract significant attention. Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundStaticLoudest` Backgrounds of non-interactive containers that should attract the most attention. Value: `var(--neutralGray400)` Raw value: `#b0b6b6` Referenced by tokens: None ### `colorBackgroundStaticPage` The background upon which everything else is placed. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: None ### `colorBackgroundStaticBackdrop` 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 ### `colorBackgroundStaticInverse` Backgrounds of non-interactive containers with reversed background and foreground colours. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None ### `colorBackgroundNeutral` Backgrounds of relatively small elements that signal something neutral. Value: `var(--neutralGray400)` Raw value: `#b0b6b6` Referenced by tokens: None ### `colorBackgroundNeutralQuiet` Backgrounds of relatively large elements that signal something neutral. Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundNegative` Backgrounds of relatively small elements that signal something negative. Value: `var(--maroon400)` Raw value: `#f15a71` Referenced by tokens: None ### `colorBackgroundNegativeQuiet` Backgrounds of relatively large elements that signal something negative. Value: `var(--maroon200)` Raw value: `#ffb3bf` Referenced by tokens: None ### `colorBackgroundNegativeHover` 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 ### `colorBackgroundPositive` Backgrounds of relatively small elements that signal something has gone well. Value: `var(--green400)` Raw value: `#21c663` Referenced by tokens: None ### `colorBackgroundPositiveQuiet` Backgrounds of relatively large elements that signal something has gone well. Value: `var(--green200)` Raw value: `#b5f2cd` Referenced by tokens: None ### `colorBackgroundWarning` Backgrounds of relatively small elements that signal something requires urgent attention. Value: `var(--yellow300)` Raw value: `#f0e556` Referenced by tokens: None ### `colorBackgroundWarningQuiet` Backgrounds of relatively large elements that signal something requires urgent attention. Value: `var(--yellow200)` Raw value: `#fff790` Referenced by tokens: None ### `colorBackgroundInfo` Backgrounds of relatively small elements that signal important information. Value: `var(--neutralGray400)` Raw value: `#b0b6b6` Referenced by tokens: None ### `colorBackgroundInfoQuiet` Backgrounds of relatively large elements that signal important information. Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundDiscover` Backgrounds of relatively small elements that signal something new in the product. Value: `var(--blue300)` Raw value: `#81c9ff` Referenced by tokens: None ### `colorBackgroundDiscoverQuiet` Backgrounds of relatively large elements that signal something new in the product. Value: `var(--blue200)` Raw value: `#a8d9ff` Referenced by tokens: None ### `colorBackgroundPresentationalGray` 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 ### `colorBackgroundPresentationalGreen` 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 ### `colorBackgroundPresentationalPink` 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 ### `colorBackgroundPresentationalPurple` 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 ### `colorBackgroundPresentationalYellow` 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 ### `colorBackgroundCategoryEntertainment` Backgrounds upon which icons are placed from the 'entertainment' expense category Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCategoryEquipment` Backgrounds upon which icons are placed from the 'equipment' expense category Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCategoryMarketing` Backgrounds upon which icons are placed from the 'marketing' expense category Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCategoryMealsAndDrinks` Backgrounds upon which icons are placed from the 'meals and drinks' expense category Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCategoryOffice` Backgrounds upon which icons are placed from the 'office' expense category Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCategoryPhoneAndInternet` Backgrounds upon which icons are placed from the 'phone and internet' expense category Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCategorySoftware` Backgrounds upon which icons are placed from the 'software' expense category Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCategoryTravel` Backgrounds upon which icons are placed from the 'travel' expense category Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCategoryService` Backgrounds upon which icons are placed from the 'service' expense category Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCategorySupplies` Backgrounds upon which icons are placed from the 'supplies' expense category Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCategoryOther` Backgrounds upon which icons are placed from the 'other' expense category Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCategoryNone` Backgrounds upon which icons are placed when they do not have an expense category Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCategoryUnknown` Backgrounds upon which icons are placed when the category isn't known Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundNotification` Background 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 Experimental Value: `var(--maroon500)` Raw value: `#923544` Referenced by tokens: None ### `colorBorderInteractive` Default border colour of interactive elements. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: borderInteractive, borderInteractiveQuiet, borderInteractiveLoud, borderInteractiveHover, borderInteractiveDisabled, borderInteractiveSelected, borderInteractiveSelectedHover ### `colorBorderInteractiveQuiet` Borders of interactive elements that should attract less attention. Value: `var(--neutralGray500)` Raw value: `#7f8686` Referenced by tokens: borderInteractiveQuiet ### `colorBorderInteractiveLoud` Borders of interactive containers that should attract attention. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: borderInteractiveLoud ### `colorBorderInteractiveLouder` Borders of interactive containers that should attract the most attention. Value: `var(--brandPink)` Raw value: `#feb6fe` Referenced by tokens: None ### `colorBorderInteractiveHover` Borders of interactive elements in a hover state. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: borderInteractiveHover ### `colorBorderInteractiveDisabled` Borders of interactive elements in a disabled state. Value: `var(--neutralGray500)` Raw value: `#7f8686` Referenced by tokens: borderInteractiveDisabled ### `colorBorderInteractiveSelected` Borders of interactive elements in a selected state. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: borderInteractiveSelected, borderInteractiveSelectedHover ### `colorBorderInteractiveSelectedHover` Borders of interactive elements in a selected and hover state. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: borderInteractiveSelectedHover ### `colorBorderInteractiveSelectedLoud` Borders of interactive elements in a selected state that should attract attention. Value: `var(--brandPink)` Raw value: `#feb6fe` Referenced by tokens: None ### `colorBorderStatic` Borders of non-interactive containers. Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: borderStatic, borderStaticLoud ### `colorBorderStaticLoud` 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 ### `colorBorderNeutral` Borders of elements that signal something neutral. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: borderNeutral ### `colorBorderNegative` Borders of elements that signal something negative. Value: `var(--maroon400)` Raw value: `#f15a71` Referenced by tokens: borderNegative, borderNegativeHover ### `colorBorderNegativeHover` Borders of interactive elements that signal something negative and are in a hover state. Value: `var(--maroon500)` Raw value: `#923544` Referenced by tokens: borderNegativeHover ### `colorBorderPositive` Borders of elements that signal something has gone well. Value: `var(--green500)` Raw value: `#227f47` Referenced by tokens: borderPositive ### `colorBorderWarning` Borders of elements that signal something requires urgent attention. Value: `var(--yellow300)` Raw value: `#f0e556` Referenced by tokens: borderWarning ### `colorBorderInfo` Borders of elements that signal important information. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: borderInfo ### `colorBorderDiscover` Borders of elements that signal something new in the product. Value: `var(--blue400)` Raw value: `#407cd6` Referenced by tokens: borderDiscover ### `colorShadowFocus` Default focus ring colour. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: shadowFocusRegular, shadowFocusRegularInvalid, shadowFocusInset, shadowFocusInsetInvalid ### `colorShadowFocusInvalid` Focus ring colour for interactive elements in an invalid state. Value: `var(--maroon400)` Raw value: `#f15a71` Referenced by tokens: shadowFocusRegularInvalid, shadowFocusInsetInvalid ### `colorShadowDepth` 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 ### `colorShadowDepthQuiet` Shadow colour for subtle elevations. Value: `rgba(19, 20, 20, 0.05)` Raw value: `rgba(19, 20, 20, 0.05)` Referenced by tokens: shadowElevateQuiet ### `colorShadowDepthLoud` Shadow colour for strong elevations. Value: `rgba(19, 20, 20, 0.6)` Raw value: `rgba(19, 20, 20, 0.6)` Referenced by tokens: shadowElevateLoud ### `shadowElevate` 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 ### `shadowElevateLoud` 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 ### `shadowElevateQuiet` 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 ### `shadowRaise` 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 ### `shadowRaiseQuiet` 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 ### `shadowFocusRegular` 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 ### `shadowFocusRegularInvalid` 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 ### `shadowFocusInset` 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 ### `shadowFocusInsetInvalid` 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 ### `borderInteractive` Default border of interactive elements. Value: `var(--sizeBorderDefault) solid var(--colorBorderInteractive)` Raw value: `1px solid #6b7070` Referenced by tokens: None ### `borderInteractiveQuiet` Borders of interactive elements that should attract less attention. Value: `var(--sizeBorderDefault) solid var(--colorBorderInteractiveQuiet)` Raw value: `1px solid #7f8686` Referenced by tokens: None ### `borderInteractiveLoud` Borders of interactive containers that should attract attention. Value: `var(--sizeBorderDefault) solid var(--colorBorderInteractiveLoud)` Raw value: `1px solid #212222` Referenced by tokens: None ### `borderInteractiveHover` Borders of interactive elements in a hover state. Value: `var(--sizeBorderDefault) solid var(--colorBorderInteractiveHover)` Raw value: `1px solid #131414` Referenced by tokens: None ### `borderInteractiveDisabled` Borders of interactive elements in a disabled state. Value: `var(--sizeBorderDefault) solid var(--colorBorderInteractiveDisabled)` Raw value: `1px solid #7f8686` Referenced by tokens: None ### `borderInteractiveSelected` Borders of interactive elements in a selected state. Value: `var(--sizeBorderDefault) solid var(--colorBorderInteractiveSelected)` Raw value: `1px solid #212222` Referenced by tokens: None ### `borderInteractiveSelectedHover` 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 ### `borderStatic` Borders of non-interactive containers. Value: `var(--sizeBorderDefault) solid var(--colorBorderStatic)` Raw value: `1px solid #e1e6e6` Referenced by tokens: None ### `borderStaticLoud` 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 ### `borderNeutral` Borders of elements that signal something neutral. Value: `var(--sizeBorderDefault) solid var(--colorBorderNeutral)` Raw value: `1px solid #6b7070` Referenced by tokens: None ### `borderNegative` Borders of elements that signal something negative. Value: `var(--sizeBorderDefault) solid var(--colorBorderNegative)` Raw value: `1px solid #f15a71` Referenced by tokens: None ### `borderNegativeHover` 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 ### `borderPositive` Borders of elements that signal something has gone well. Value: `var(--sizeBorderDefault) solid var(--colorBorderPositive)` Raw value: `1px solid #227f47` Referenced by tokens: None ### `borderWarning` Borders of elements that signal something requires urgent attention. Value: `var(--sizeBorderDefault) solid var(--colorBorderWarning)` Raw value: `1px solid #f0e556` Referenced by tokens: None ### `borderInfo` Borders of elements that signal important information. Value: `var(--sizeBorderDefault) solid var(--colorBorderInfo)` Raw value: `1px solid #6b7070` Referenced by tokens: None ### `borderDiscover` 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 ### `colorBackgroundCardDisabled` Background colour of a disabled Pleo Card. Value: `var(--blue300)` Raw value: `#81c9ff` Referenced by tokens: None ### `colorBackgroundCardPhysical` Background colour of the physical Pleo Card. Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCardVendor` Background colour of the vendor Pleo Card. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None ### `colorBackgroundCardVirtual` Background colour of the virtual Pleo Card. Value: `var(--yellow400)` Raw value: `#dbc713` Referenced by tokens: None ### `colorBackgroundCardDecorativeSurfaceVendor` Background colour of the vendor Pleo Card (quiet). Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCardDecorativeSurfaceVirtual` Background colour of the virtual Pleo Card (quiet). Value: `var(--yellow300)` Raw value: `#f0e556` Referenced by tokens: None ### `colorBorderCardDisabled` Border colour of a disabled Pleo Card. Value: `var(--blue400)` Raw value: `#407cd6` Referenced by tokens: None ### `colorBorderCardPhysical` Border colour of the physical Pleo Card. Value: `var(--neutralGray400)` Raw value: `#b0b6b6` Referenced by tokens: None ### `colorBorderCardVendor` Border colour of the vendor Pleo Card. Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBorderCardVirtual` Border colour of the virtual Pleo Card. Value: `var(--yellow500)` Raw value: `#7d7532` Referenced by tokens: None ### `colorContentCardDisabled` Content colour of a disabled Pleo Card. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: None Contrast: AA 2.81 when rendered on `colorBackgroundCardDisabled`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCardPhysical` Content colour of the physical Pleo Card. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 12.66 when rendered on `colorBackgroundCardPhysical`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCardVendor` Content colour of the vendor Pleo Card. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 14.34 when rendered on `colorBackgroundCardVendor`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCardVirtual` Content colour of the virtual Pleo Card. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 9.26 when rendered on `colorBackgroundCardVirtual`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ## Dark theme ### `colorContentInteractive` Default colour for text and icons that are part of interactive elements. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 14.34 when rendered on `colorBackgroundInteractive`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveOnInteractiveInverseLoud` Colour for default state of text and icons that are placed on Background Interactive Inverse Loud. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 10.13 when rendered on `colorBackgroundInteractiveInverseLoud`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveHover` Text and icons that are part of interactive elements in a hover state. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: None Contrast: AA 12.89 when rendered on `colorBackgroundInteractiveHover`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveHoverOnInteractiveInverseLoud` Hover state colour for text and icons that are placed on Background Interactive Inverse Loud. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: None Contrast: AA 11.72 when rendered on `colorBackgroundInteractiveInverseLoud`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveQuiet` Text and icons that are part of interactive elements that should attract less attention. Value: `var(--neutralGray400)` Raw value: `#b0b6b6` Referenced by tokens: None Contrast: AA 7.76 when rendered on `colorBackgroundInteractive`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveLink` Text and icons that are part of links. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 16.59 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveLinkHover` Text and icons that are part of links in a hover state. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: None Contrast: AA 17.92 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveDisabled` Text and icons that are part of interactive elements in a disabled state. Value: `var(--neutralGray400)` Raw value: `#b0b6b6` Referenced by tokens: None Contrast: AA 7.76 when rendered on `colorBackgroundInteractiveDisabled`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveInverseHover` Text and icons that are part of interactive elements with reversed background and foreground colours in a hover state. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: None Contrast: AA 17.92 when rendered on `colorBackgroundInteractiveInverseHover`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveInverseQuiet` Text and icons that are part of interactive elements with reversed background and foreground colours and that should attract less attention. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundInteractiveInverse`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveInverse` Text and icons that are part of interactive elements with reversed background and foreground colours. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 14.34 when rendered on `colorBackgroundInteractiveInverse`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveSelected` Text and icons that are part of interactive elements in a selected state. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 14.34 when rendered on `colorBackgroundInteractiveSelected`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractiveSelectedHover` Text and icons that are part of interactive elements in a selected and hover state. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: None Contrast: AA 17.92 when rendered on `colorBackgroundInteractiveSelectedHover`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInteractivePlaceholder` Text and icons used as placeholders in form input elements. Value: `var(--neutralGray400)` Raw value: `#b0b6b6` Referenced by tokens: None Contrast: AA 7.76 when rendered on `colorBackgroundInteractive`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentStatic` Default colour for text and icons that are part of non-interactive elements. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 16.59 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentStaticOnPresentationalPink` Default colour for text and icons that are part of non-interactive elements placed on Background Presentational Pink. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 10.13 when rendered on `colorBackgroundPresentationalPink`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentStaticQuietOnPresentationalPink` Text and icons that are part of non-interactive elements placed on Background Presentational Pink that should attract less attention. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: None Contrast: AA 3.19 when rendered on `colorBackgroundPresentationalPink`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentStaticQuiet` Text and icons that are part of non-interactive elements that should attract less attention. Value: `var(--neutralGray400)` Raw value: `#b0b6b6` Referenced by tokens: None Contrast: AA 8.98 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentStaticInverse` Text and icons that are part of non-interactive elements with reversed background and foreground colours. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: None Contrast: AA 16.59 when rendered on `colorBackgroundStaticInverse`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentNeutral` Text and icons that signal something neutral. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 16.59 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentNegative` Text and icons that signal something negative. Value: `var(--maroon300)` Raw value: `#ff90a1` Referenced by tokens: None Contrast: AA 8.57 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentNegativeLoud` Text and icons that signal something negative. Only use on colorBackgroundNegativeQuiet. Value: `var(--maroon200)` Raw value: `#ffb3bf` Referenced by tokens: None Contrast: AA 4.42 when rendered on `colorBackgroundNegativeQuiet`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentPositive` Text and icons that signal something has gone well. Value: `var(--green200)` Raw value: `#b5f2cd` Referenced by tokens: None Contrast: AA 14.54 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentPositiveLoud` Text and icons that signal something has gone well. Only use on colorBackgroundPositiveQuiet. Value: `var(--green100)` Raw value: `#d7f9e5` Referenced by tokens: None Contrast: AA 4.43 when rendered on `colorBackgroundPositiveQuiet`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentWarning` Text and icons that signal something requires urgent attention. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 16.59 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentWarningLoud` Text and icons that signal something requires urgent attention. Only use on colorBackgroundWarningQuiet. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: None Contrast: AA 4.57 when rendered on `colorBackgroundWarningQuiet`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInfo` Text and icons that signal important information. Value: `var(--neutralGray400)` Raw value: `#b0b6b6` Referenced by tokens: None Contrast: AA 8.98 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentInfoLoud` Text and icons that signal important information. Only use on colorBackgroundInfoQuiet. Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None Contrast: AA 10.54 when rendered on `colorBackgroundInfoQuiet`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentDiscover` Text and icons that signal something new in the product. Value: `var(--blue200)` Raw value: `#a8d9ff` Referenced by tokens: None Contrast: AA 12.33 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentDiscoverLoud` Text and icons that signal something new in the product. Only use on colorBackgroundDiscoverQuiet. Value: `var(--blue100)` Raw value: `#d4effa` Referenced by tokens: None Contrast: AA 6.12 when rendered on `colorBackgroundDiscoverQuiet`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryEntertainment` Icons used to signal an expense belonging to the 'entertainment' category Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCategoryEntertainment`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryEquipment` Icons used to signal an expense belonging to the 'equipment' category Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCategoryEquipment`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryMarketing` Icons used to signal an expense belonging to the 'marketing' category Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCategoryMarketing`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryMealsAndDrinks` Icons used to signal an expense belonging to the 'meals and drinks' category Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCategoryMealsAndDrinks`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryOffice` Icons used to signal an expense belonging to the 'office' category Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCategoryOffice`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryPhoneAndInternet` Icons used to signal an expense belonging to the 'phone and internet' category Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCategoryPhoneAndInternet`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategorySoftware` Icons used to signal an expense belonging to the 'software' category Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCategorySoftware`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryTravel` Icons used to signal an expense belonging to the 'travel' category Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCategoryTravel`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryService` Icons used to signal an expense belonging to the 'service' category Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCategoryService`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategorySupplies` Icons used to signal an expense belonging to the 'supplies' category Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCategorySupplies`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryOther` Icons used to signal an expense belonging to the 'other' category Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCategoryOther`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryNone` Icons used to signal an expense belonging to no category Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCategoryNone`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCategoryUnknown` Icons used to signal an expense whose category isn't known Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCategoryUnknown`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentBrandLogo` Colour for brand logo elements. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: None Contrast: AA 17.92 when rendered on `colorBackgroundStatic`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorBackgroundInteractive` Default colour for backgrounds of interactive elements. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None ### `colorBackgroundInteractiveLoud` Backgrounds of relatively large interactive elements. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundInteractiveLouder` Backgrounds of relatively small interactive elements placed on top of loud or coloured backgrounds. Value: `var(--neutralGray500)` Raw value: `#7f8686` Referenced by tokens: None ### `colorBackgroundInteractiveHover` Backgrounds of relatively small interactive elements in a hover state. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundInteractiveQuietHover` Backgrounds of relatively large interactive elements in a hover state. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None ### `colorBackgroundInteractiveDisabled` Backgrounds of interactive elements in a disabled state. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None ### `colorBackgroundInteractiveInverse` Backgrounds of interactive elements with reversed background and foreground colours. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None ### `colorBackgroundInteractiveInverseHover` Backgrounds of interactive elements with reversed background and foreground colours in a hover state. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: None ### `colorBackgroundInteractiveInverseLoud` Backgrounds of interactive elements with reversed background and foreground colours that should attract attention. Value: `var(--brandPink)` Raw value: `#feb6fe` Referenced by tokens: None ### `colorBackgroundInteractiveSelected` Backgrounds of interactive elements in a selected state. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None ### `colorBackgroundInteractiveSelectedHover` Backgrounds of interactive elements in a selected and hover state. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: None ### `colorBackgroundInteractiveTransparent` Background of interactive elements placed on top of images or documents (e.g. invoices and receipts). Value: `rgba(250, 252, 252, 0.5)` Raw value: `rgba(250, 252, 252, 0.5)` Referenced by tokens: None ### `colorBackgroundInteractiveTransparentHover` Semi-transparent backgrounds of interactive elements in a hover state. Value: `rgba(250, 252, 252, 0.08)` Raw value: `rgba(250, 252, 252, 0.08)` Referenced by tokens: None ### `colorBackgroundStatic` Default colour for backgrounds of non-interactive containers. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: None ### `colorBackgroundStaticLoud` Backgrounds of non-interactive containers that should attract some attention. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None ### `colorBackgroundStaticLouder` Backgrounds of non-interactive containers that should attract significant attention. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundStaticLoudest` Backgrounds of non-interactive containers that should attract the most attention. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: None ### `colorBackgroundStaticPage` The background upon which everything else is placed. Value: `var(--neutralOffBlack900)` Raw value: `#131414` Referenced by tokens: None ### `colorBackgroundStaticBackdrop` Semi-transparent backgrounds that sit between an overlay, such as a modal, and the rest of the underlying UI. Value: `rgba(250, 252, 252, 0.5)` Raw value: `rgba(250, 252, 252, 0.5)` Referenced by tokens: None ### `colorBackgroundStaticInverse` Backgrounds of non-interactive containers with reversed background and foreground colours. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None ### `colorBackgroundNeutral` Backgrounds of relatively small elements that signal something neutral. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: None ### `colorBackgroundNeutralQuiet` Backgrounds of relatively large elements that signal something neutral. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundNegative` Backgrounds of relatively small elements that signal something negative. Value: `var(--maroon300)` Raw value: `#ff90a1` Referenced by tokens: None ### `colorBackgroundNegativeQuiet` Backgrounds of relatively large elements that signal something negative. Value: `var(--maroon500)` Raw value: `#923544` Referenced by tokens: None ### `colorBackgroundNegativeHover` Backgrounds of relatively small elements that signal something negative and are in a hover state. Value: `var(--maroon200)` Raw value: `#ffb3bf` Referenced by tokens: None ### `colorBackgroundPositive` Backgrounds of relatively small elements that signal something has gone well. Value: `var(--green300)` Raw value: `#7ae1a2` Referenced by tokens: None ### `colorBackgroundPositiveQuiet` Backgrounds of relatively large elements that signal something has gone well. Value: `var(--green500)` Raw value: `#227f47` Referenced by tokens: None ### `colorBackgroundWarning` Backgrounds of relatively small elements that signal something requires urgent attention. Value: `var(--yellow400)` Raw value: `#dbc713` Referenced by tokens: None ### `colorBackgroundWarningQuiet` Backgrounds of relatively large elements that signal something requires urgent attention. Value: `var(--yellow500)` Raw value: `#7d7532` Referenced by tokens: None ### `colorBackgroundInfo` Backgrounds of relatively small elements that signal important information. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: None ### `colorBackgroundInfoQuiet` Backgrounds of relatively large elements that signal important information. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundDiscover` Backgrounds of relatively small elements that signal something new in the product. Value: `var(--blue400)` Raw value: `#407cd6` Referenced by tokens: None ### `colorBackgroundDiscoverQuiet` Backgrounds of relatively large elements that signal something new in the product. Value: `var(--blue500)` Raw value: `#2d5693` Referenced by tokens: None ### `colorBackgroundPresentationalGray` Final brand color for backgrounds of elements that need to attract attention and are differentiated based on colour. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundPresentationalGreen` Tertiary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundPresentationalPink` 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 ### `colorBackgroundPresentationalPurple` Tertiary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundPresentationalYellow` Secondary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCategoryEntertainment` Backgrounds upon which icons are placed from the 'entertainment' expense category Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCategoryEquipment` Backgrounds upon which icons are placed from the 'equipment' expense category Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCategoryMarketing` Backgrounds upon which icons are placed from the 'marketing' expense category Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCategoryMealsAndDrinks` Backgrounds upon which icons are placed from the 'meals and drinks' expense category Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCategoryOffice` Backgrounds upon which icons are placed from the 'office' expense category Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCategoryPhoneAndInternet` Backgrounds upon which icons are placed from the 'phone and internet' expense category Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCategorySoftware` Backgrounds upon which icons are placed from the 'software' expense category Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCategoryTravel` Backgrounds upon which icons are placed from the 'travel' expense category Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCategoryService` Backgrounds upon which icons are placed from the 'service' expense category Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCategorySupplies` Backgrounds upon which icons are placed from the 'supplies' expense category Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCategoryOther` Backgrounds upon which icons are placed from the 'other' expense category Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCategoryNone` Backgrounds upon which icons are placed when they do not have an expense category Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCategoryUnknown` Backgrounds upon which icons are placed when the category isn't known Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundNotification` Background 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(--maroon200)` Raw value: `#ffb3bf` Referenced by tokens: None ### `colorBorderInteractive` Default border colour of interactive elements. Value: `var(--neutralGray400)` Raw value: `#b0b6b6` Referenced by tokens: borderInteractive, borderInteractiveQuiet, borderInteractiveLoud, borderInteractiveHover, borderInteractiveDisabled, borderInteractiveSelected, borderInteractiveSelectedHover ### `colorBorderInteractiveQuiet` Borders of interactive elements that should attract less attention. Value: `var(--neutralGray500)` Raw value: `#7f8686` Referenced by tokens: borderInteractiveQuiet ### `colorBorderInteractiveLoud` Borders of interactive containers that should attract attention. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: borderInteractiveLoud ### `colorBorderInteractiveLouder` Borders of interactive containers that should attract the most attention. Value: `var(--brandPink)` Raw value: `#feb6fe` Referenced by tokens: None ### `colorBorderInteractiveHover` Borders of interactive elements in a hover state. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: borderInteractiveHover ### `colorBorderInteractiveDisabled` Borders of interactive elements in a disabled state. Value: `var(--neutralGray500)` Raw value: `#7f8686` Referenced by tokens: borderInteractiveDisabled ### `colorBorderInteractiveSelected` Borders of interactive elements in a selected state. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: borderInteractiveSelected, borderInteractiveSelectedHover ### `colorBorderInteractiveSelectedLoud` Borders of interactive elements in a selected state that should attract attention. Value: `var(--brandPink)` Raw value: `#feb6fe` Referenced by tokens: None ### `colorBorderInteractiveSelectedHover` Borders of interactive elements in a selected and hover state. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: borderInteractiveSelectedHover ### `colorBorderStatic` Borders of non-interactive containers. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: borderStatic, borderStaticLoud ### `colorBorderStaticLoud` 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 ### `colorBorderNeutral` Borders of elements that signal something neutral. Value: `var(--neutralGray400)` Raw value: `#b0b6b6` Referenced by tokens: borderNeutral ### `colorBorderNegative` Borders of elements that signal something negative. Value: `var(--maroon300)` Raw value: `#ff90a1` Referenced by tokens: borderNegative, borderNegativeHover ### `colorBorderNegativeHover` Borders of interactive elements that signal something negative and are in a hover state. Value: `var(--maroon200)` Raw value: `#ffb3bf` Referenced by tokens: borderNegativeHover ### `colorBorderPositive` Borders of elements that signal something has gone well. Value: `var(--green200)` Raw value: `#b5f2cd` Referenced by tokens: borderPositive ### `colorBorderWarning` Borders of elements that signal something requires urgent attention. Value: `var(--yellow400)` Raw value: `#dbc713` Referenced by tokens: borderWarning ### `colorBorderInfo` Borders of elements that signal important information. Value: `var(--neutralGray400)` Raw value: `#b0b6b6` Referenced by tokens: borderInfo ### `colorBorderDiscover` Borders of elements that signal something new in the product. Value: `var(--blue300)` Raw value: `#81c9ff` Referenced by tokens: borderDiscover ### `borderInteractive` Default border of interactive elements. Value: `var(--sizeBorderDefault) solid var(--colorBorderInteractive)` Raw value: `1px solid #b0b6b6` Referenced by tokens: None ### `borderInteractiveQuiet` Borders of interactive elements that should attract less attention. Value: `var(--sizeBorderDefault) solid var(--colorBorderInteractiveQuiet)` Raw value: `1px solid #7f8686` Referenced by tokens: None ### `borderInteractiveLoud` Borders of interactive containers that should attract attention. Value: `var(--sizeBorderDefault) solid var(--colorBorderInteractiveLoud)` Raw value: `1px solid #eef4f4` Referenced by tokens: None ### `borderInteractiveHover` Borders of interactive elements in a hover state. Value: `var(--sizeBorderDefault) solid var(--colorBorderInteractiveHover)` Raw value: `1px solid #fafcfc` Referenced by tokens: None ### `borderInteractiveDisabled` Borders of interactive elements in a disabled state. Value: `var(--sizeBorderDefault) solid var(--colorBorderInteractiveDisabled)` Raw value: `1px solid #7f8686` Referenced by tokens: None ### `borderInteractiveSelected` Borders of interactive elements in a selected state. Value: `var(--sizeBorderDefault) solid var(--colorBorderInteractiveSelected)` Raw value: `1px solid #eef4f4` Referenced by tokens: None ### `borderInteractiveSelectedHover` Borders of interactive elements in a selected and hover state. Value: `var(--sizeBorderDefault) solid var(--colorBorderInteractiveSelectedHover)` Raw value: `1px solid #fafcfc` Referenced by tokens: None ### `borderStatic` Borders of non-interactive containers. Value: `var(--sizeBorderDefault) solid var(--colorBorderStatic)` Raw value: `1px solid #2e3030` Referenced by tokens: None ### `borderStaticLoud` 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 ### `borderNeutral` Borders of elements that signal something neutral. Value: `var(--sizeBorderDefault) solid var(--colorBorderNeutral)` Raw value: `1px solid #b0b6b6` Referenced by tokens: None ### `borderNegative` Borders of elements that signal something negative. Value: `var(--sizeBorderDefault) solid var(--colorBorderNegative)` Raw value: `1px solid #ff90a1` Referenced by tokens: None ### `borderNegativeHover` Borders of interactive elements that signal something negative and are in a hover state. Value: `var(--sizeBorderDefault) solid var(--colorBorderNegativeHover)` Raw value: `1px solid #ffb3bf` Referenced by tokens: None ### `borderPositive` Borders of elements that signal something has gone well. Value: `var(--sizeBorderDefault) solid var(--colorBorderPositive)` Raw value: `1px solid #b5f2cd` Referenced by tokens: None ### `borderWarning` Borders of elements that signal something requires urgent attention. Value: `var(--sizeBorderDefault) solid var(--colorBorderWarning)` Raw value: `1px solid #dbc713` Referenced by tokens: None ### `borderInfo` Borders of elements that signal important information. Value: `var(--sizeBorderDefault) solid var(--colorBorderInfo)` Raw value: `1px solid #b0b6b6` Referenced by tokens: None ### `borderDiscover` Borders of elements that signal something new in the product. Value: `var(--sizeBorderDefault) solid var(--colorBorderDiscover)` Raw value: `1px solid #81c9ff` Referenced by tokens: None ### `colorShadowFocus` Default focus ring colour. Value: `var(--neutralOffWhite100)` Raw value: `#fafcfc` Referenced by tokens: shadowFocusRegular, shadowFocusRegularInvalid, shadowFocusInset, shadowFocusInsetInvalid ### `colorShadowFocusInvalid` Focus ring colour for interactive elements in an invalid state. Value: `var(--maroon300)` Raw value: `#ff90a1` Referenced by tokens: shadowFocusRegularInvalid, shadowFocusInsetInvalid ### `colorShadowDepth` Default shadow colour for elevations. Value: `rgba(250, 252, 252, 0.1)` Raw value: `rgba(250, 252, 252, 0.1)` Referenced by tokens: shadowElevate, shadowElevateLoud, shadowElevateQuiet, shadowRaise, shadowRaiseQuiet ### `colorShadowDepthQuiet` Shadow colour for subtle elevations. Value: `rgba(250, 252, 252, 0.05)` Raw value: `rgba(250, 252, 252, 0.05)` Referenced by tokens: shadowElevateQuiet ### `colorShadowDepthLoud` Shadow colour for strong elevations. Value: `rgba(250, 252, 252, 0.6)` Raw value: `rgba(250, 252, 252, 0.6)` Referenced by tokens: shadowElevateLoud ### `shadowElevate` Shadow that elevates elements from their bottom edge. Value: `0 8px 12px -4px var(--colorShadowDepth)` Raw value: `0 8px 12px -4px rgba(250, 252, 252, 0.1)` Referenced by tokens: None ### `shadowElevateLoud` Shadow that strongly elevates elements from their bottom edge. Value: `0 2px 8px -6px var(--colorShadowDepthLoud)` Raw value: `0 2px 8px -6px rgba(250, 252, 252, 0.6)` Referenced by tokens: None ### `shadowElevateQuiet` Shadow that subtly elevates elements subtly from their bottom edge. Value: `0 8px 12px -4px var(--colorShadowDepthQuiet)` Raw value: `0 8px 12px -4px rgba(250, 252, 252, 0.05)` Referenced by tokens: None ### `shadowRaise` Shadow that raises elements off the page from all edges. Value: `0 6px 24px 0 var(--colorShadowDepth)` Raw value: `0 6px 24px 0 rgba(250, 252, 252, 0.1)` Referenced by tokens: None ### `shadowRaiseQuiet` 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(250, 252, 252, 0.1)` Referenced by tokens: None ### `shadowFocusRegular` 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 #fafcfc` Referenced by tokens: None ### `shadowFocusRegularInvalid` 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 #ff90a1` Referenced by tokens: None ### `shadowFocusInset` 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 #fafcfc` Referenced by tokens: None ### `shadowFocusInsetInvalid` 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 #ff90a1` Referenced by tokens: None ### `colorBackgroundCardDisabled` Background colour of a disabled Pleo Card. Value: `var(--blue400)` Raw value: `#407cd6` Referenced by tokens: None ### `colorBackgroundCardPhysical` Background colour of the physical Pleo Card. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBackgroundCardVendor` Background colour of the vendor Pleo Card. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None ### `colorBackgroundCardVirtual` Background colour of the virtual Pleo Card. Value: `var(--yellow500)` Raw value: `#7d7532` Referenced by tokens: None ### `colorBackgroundCardDecorativeSurfaceVendor` Background colour of the vendor Pleo Card (quiet). Value: `var(--neutralGray300)` Raw value: `#e1e6e6` Referenced by tokens: None ### `colorBackgroundCardDecorativeSurfaceVirtual` Background colour of the virtual Pleo Card (quiet). Value: `var(--yellow400)` Raw value: `#dbc713` Referenced by tokens: None ### `colorBorderCardDisabled` Border colour of a disabled Pleo Card. Value: `var(--blue600)` Raw value: `#1f375a` Referenced by tokens: None ### `colorBorderCardPhysical` Border colour of the physical Pleo Card. Value: `var(--neutralGray600)` Raw value: `#6b7070` Referenced by tokens: None ### `colorBorderCardVendor` Border colour of the vendor Pleo Card. Value: `var(--neutralGray700)` Raw value: `#2e3030` Referenced by tokens: None ### `colorBorderCardVirtual` Border colour of the virtual Pleo Card. Value: `var(--yellow600)` Raw value: `#453e21` Referenced by tokens: None ### `colorContentCardDisabled` Content colour of a disabled Pleo Card. Value: `var(--neutralGray500)` Raw value: `#7f8686` Referenced by tokens: None Contrast: AA 1.12 when rendered on `colorBackgroundCardDisabled`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCardPhysical` Content colour of the physical Pleo Card. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 11.94 when rendered on `colorBackgroundCardPhysical`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCardVendor` Content colour of the vendor Pleo Card. Value: `var(--neutralOffBlack800)` Raw value: `#212222` Referenced by tokens: None Contrast: AA 14.34 when rendered on `colorBackgroundCardVendor`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ### `colorContentCardVirtual` Content colour of the virtual Pleo Card. Value: `var(--neutralOffWhite200)` Raw value: `#eef4f4` Referenced by tokens: None Contrast: AA 4.23 when rendered on `colorBackgroundCardVirtual`. A [minimum score of 4.5](https://www.w3.org/TR/WCAG20-TECHS/G18.html) is our target. ## Other tokens ### `sizeBorderDefault` 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 ### `sizeBorderThick` No description available Value: `2px` Raw value: `2px` Referenced by tokens: None ### `sizeBorderThickest` No description available Value: `3px` Raw value: `3px` Referenced by tokens: None ### `sizeBorder4x` No description available Value: `4px` Raw value: `4px` Referenced by tokens: None ### `fontSizeBaseline10x` No description available Value: `20px` Raw value: `20px` Referenced by tokens: None ### `fontSizeBaseline13x` No description available Value: `26px` Raw value: `26px` Referenced by tokens: None ### `fontSizeBaseline15x` No description available Value: `30px` Raw value: `30px` Referenced by tokens: None ### `fontSizeBaseline16x` No description available Value: `32px` Raw value: `32px` Referenced by tokens: None ### `fontSizeBaseline18x` No description available Value: `36px` Raw value: `36px` Referenced by tokens: None ### `fontSizeBaseline21x` No description available Value: `42px` Raw value: `42px` Referenced by tokens: None ### `fontSizeBaseline22x` No description available Value: `44px` Raw value: `44px` Referenced by tokens: None ### `fontSizeBaseline25x` No description available Value: `50px` Raw value: `50px` Referenced by tokens: None ### `fontSizeBaseline29x` No description available Value: `58px` Raw value: `58px` Referenced by tokens: None ### `fontSizeBaseline39x` No description available Value: `78px` Raw value: `78px` Referenced by tokens: None ### `fontSizeBaseline7x` No description available Value: `14px` Raw value: `14px` Referenced by tokens: None ### `fontSizeBaseline8x` No description available Value: `16px` Raw value: `16px` Referenced by tokens: None ### `fontWeightRegular` No description available Value: `400` Raw value: `400` Referenced by tokens: None ### `fontWeightMedium` No description available Value: `500` Raw value: `500` Referenced by tokens: None ### `fontWeightSemibold` No description available Value: `600` Raw value: `600` Referenced by tokens: None ### `fontWeightBold` No description available Value: `700` Raw value: `700` Referenced by tokens: None ### `lineHeight18` No description available Value: `18px` Raw value: `18px` Referenced by tokens: None ### `lineHeight182` No description available Value: `18.2px` Raw value: `18.2px` Referenced by tokens: None ### `lineHeight19` No description available Value: `19px` Raw value: `19px` Referenced by tokens: None ### `lineHeight192` No description available Value: `19.2px` Raw value: `19.2px` Referenced by tokens: None ### `lineHeight24` No description available Value: `24px` Raw value: `24px` Referenced by tokens: None ### `lineHeight31` No description available Value: `31px` Raw value: `31px` Referenced by tokens: None ### `lineHeight312` No description available Value: `31.2px` Raw value: `31.2px` Referenced by tokens: None ### `lineHeight36` No description available Value: `36px` Raw value: `36px` Referenced by tokens: None ### `lineHeight38` No description available Value: `38px` Raw value: `38px` Referenced by tokens: None ### `lineHeight4176` No description available Value: `41.76px` Raw value: `41.76px` Referenced by tokens: None ### `lineHeight4872` No description available Value: `48.72px` Raw value: `48.72px` Referenced by tokens: None ### `lineHeight51` No description available Value: `51px` Raw value: `51px` Referenced by tokens: None ### `lineHeight5104` No description available Value: `51.04px` Raw value: `51.04px` Referenced by tokens: None ### `lineHeight56` No description available Value: `56px` Raw value: `56px` Referenced by tokens: None ### `lineHeight67` No description available Value: `67px` Raw value: `67px` Referenced by tokens: None ### `lineHeight6728` No description available Value: `67.28px` Raw value: `67.28px` Referenced by tokens: None ### `lineHeight90` No description available Value: `90px` Raw value: `90px` Referenced by tokens: None ### `motionWithinSmallShort` 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 ### `motionWithinSmallLong` 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 ### `motionWithinLargeShort` 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 ### `motionWithinLargeLong` 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 ### `motionEnterSmallShort` 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 ### `motionEnterSmallLong` 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 ### `motionEnterLargeShort` 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 ### `motionEnterLargeLong` 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 ### `motionExitSmallShort` 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 ### `motionExitSmallLong` 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 ### `motionExitLargeShort` 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 ### `motionExitLargeLong` 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 ### `zIndexSurface` No description available Value: `1` Raw value: `1` Referenced by tokens: None ### `zIndexOverlay` No description available Value: `5` Raw value: `5` Referenced by tokens: None ### `zIndexWindow` No description available Value: `10` Raw value: `10` Referenced by tokens: None ### `zIndexDropdown` No description available Value: `20` Raw value: `20` Referenced by tokens: None ### `zIndexTooltip` No description available Value: `30` Raw value: `30` Referenced by tokens: None ### `zIndexNavigation` No description available Value: `40` Raw value: `40` Referenced by tokens: None ### `zIndexModal` No description available Value: `50` Raw value: `50` Referenced by tokens: None ### `zIndexPopover` No description available Value: `60` Raw value: `60` Referenced by tokens: None