# Color We use color to signal structure, highlight or emphasize important information or elements, and to display different states. ## Semantic colors | Token | Example | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | | `colorContentInteractive` Default colour for text and icons that are part of interactive elements. | | | `colorContentInteractiveOnInteractiveInverseLoud` Colour for default state of text and icons that are placed on Background Interactive Inverse Loud. | | | `colorContentInteractiveHover` Text and icons that are part of interactive elements in a hover state. | | | `colorContentInteractiveHoverOnInteractiveInverseLoud` Hover state colour for text and icons that are placed on Background Interactive Inverse Loud. | | | `colorContentInteractiveQuiet` Text and icons that are part of interactive elements that should attract less attention. | | | `colorContentInteractiveLink` Text and icons that are part of links. | | | `colorContentInteractiveLinkHover` Text and icons that are part of links in a hover state. | | | `colorContentInteractiveDisabled` Text and icons that are part of interactive elements in a disabled state. | | | `colorContentInteractiveInverse` Text and icons that are part of interactive elements with reversed background and foreground colours. | | | `colorContentInteractiveInverseHover` Text and icons that are part of interactive elements with reversed background and foreground colours in a hover state. | | | `colorContentInteractiveInverseQuiet` Text and icons that are part of interactive elements with reversed background and foreground colours and that should attract less attention. | | | `colorContentInteractiveSelected` Text and icons that are part of interactive elements in a selected state. | | | `colorContentInteractiveSelectedHover` Text and icons that are part of interactive elements in a selected and hover state. | | | `colorContentInteractivePlaceholder` Text and icons used as placeholders in form input elements. | | | `colorContentStatic` Default colour for text and icons that are part of non-interactive elements. | | | `colorContentStaticOnPresentationalPink` Default colour for text and icons that are part of non-interactive elements placed on Background Presentational Pink. | | | `colorContentStaticQuietOnPresentationalPink` Text and icons that are part of non-interactive elements placed on Background Presentational Pink that should attract less attention. | | | `colorContentStaticQuiet` Text and icons that are part of non-interactive elements that should attract less attention. | | | `colorContentStaticInverse` Text and icons that are part of non-interactive elements with reversed background and foreground colours. | | | `colorContentNeutral` Text and icons that signal something neutral. | | | `colorContentNegative` Text and icons that signal something negative. | | | `colorContentNegativeLoud` Text and icons that signal something negative. Only use on colorBackgroundNegativeQuiet. | | | `colorContentPositive` Text and icons that signal something has gone well. | | | `colorContentPositiveLoud` Text and icons that signal something has gone well. Only use on colorBackgroundPositiveQuiet. | | | `colorContentWarning` Text and icons that signal something requires urgent attention. | | | `colorContentWarningLoud` Text and icons that signal something requires urgent attention. Only use on colorBackgroundWarningQuiet. | | | `colorContentInfo` Text and icons that signal important information. | | | `colorContentInfoLoud` Text and icons that signal important information. Only use on colorBackgroundInfoQuiet. | | | `colorContentDiscover` Text and icons that signal something new in the product. | | | `colorContentDiscoverLoud` Text and icons that signal something new in the product. Only use on colorBackgroundDiscoverQuiet. | | | `colorContentCategoryEntertainment` Icons used to signal an expense belonging to the 'entertainment' category | | | `colorContentCategoryEquipment` Icons used to signal an expense belonging to the 'equipment' category | | | `colorContentCategoryMarketing` Icons used to signal an expense belonging to the 'marketing' category | | | `colorContentCategoryMealsAndDrinks` Icons used to signal an expense belonging to the 'meals and drinks' category | | | `colorContentCategoryOffice` Icons used to signal an expense belonging to the 'office' category | | | `colorContentCategoryPhoneAndInternet` Icons used to signal an expense belonging to the 'phone and internet' category | | | `colorContentCategorySoftware` Icons used to signal an expense belonging to the 'software' category | | | `colorContentCategoryTravel` Icons used to signal an expense belonging to the 'travel' category | | | `colorContentCategoryService` Icons used to signal an expense belonging to the 'service' category | | | `colorContentCategorySupplies` Icons used to signal an expense belonging to the 'supplies' category | | | `colorContentCategoryOther` Icons used to signal an expense belonging to the 'other' category | | | `colorContentCategoryNone` Icons used to signal an expense belonging to no category | | | `colorContentCategoryUnknown` Icons used to signal an expense whose category isn't known | | | `colorContentBrandLogo` Colour for brand logo elements. | | | `colorBackgroundInteractive` Default colour for backgrounds of interactive elements. | | | `colorBackgroundInteractiveLoud` Backgrounds of relatively large interactive elements. | | | `colorBackgroundInteractiveLouder` Backgrounds of relatively small interactive elements placed on top of loud or coloured backgrounds. | | | `colorBackgroundInteractiveHover` Backgrounds of relatively small interactive elements in a hover state. | | | `colorBackgroundInteractiveQuietHover` Backgrounds of relatively large interactive elements in a hover state. | | | `colorBackgroundInteractiveDisabled` Backgrounds of interactive elements in a disabled state. | | | `colorBackgroundInteractiveInverse` Backgrounds of interactive elements with reversed background and foreground colours. | | | `colorBackgroundInteractiveInverseHover` Backgrounds of interactive elements with reversed background and foreground colours in a hover state. | | | `colorBackgroundInteractiveInverseLoud` Backgrounds of interactive elements with reversed background and foreground colours that should attract attention. | | | `colorBackgroundInteractiveSelected` Backgrounds of interactive elements in a selected state. | | | `colorBackgroundInteractiveSelectedHover` Backgrounds of interactive elements in a selected and hover state. | | | `colorBackgroundInteractiveTransparent` Background of interactive elements placed on top of images or documents (e.g. invoices and receipts). | | | `colorBackgroundInteractiveTransparentHover` Semi-transparent backgrounds of interactive elements in a hover state. | | | `colorBackgroundStatic` Default colour for backgrounds of non-interactive containers. | | | `colorBackgroundStaticLoud` Backgrounds of non-interactive containers that should attract some attention. | | | `colorBackgroundStaticLouder` Backgrounds of non-interactive containers that should attract significant attention. | | | `colorBackgroundStaticLoudest` Backgrounds of non-interactive containers that should attract the most attention. | | | `colorBackgroundStaticPage` The background upon which everything else is placed. | | | `colorBackgroundStaticBackdrop` Semi-transparent backgrounds that sit between an overlay, such as a modal, and the rest of the underlying UI. | | | `colorBackgroundStaticInverse` Backgrounds of non-interactive containers with reversed background and foreground colours. | | | `colorBackgroundNeutral` Backgrounds of relatively small elements that signal something neutral. | | | `colorBackgroundNeutralQuiet` Backgrounds of relatively large elements that signal something neutral. | | | `colorBackgroundNegative` Backgrounds of relatively small elements that signal something negative. | | | `colorBackgroundNegativeQuiet` Backgrounds of relatively large elements that signal something negative. | | | `colorBackgroundNegativeHover` Backgrounds of relatively small elements that signal something negative and are in a hover state. | | | `colorBackgroundPositive` Backgrounds of relatively small elements that signal something has gone well. | | | `colorBackgroundPositiveQuiet` Backgrounds of relatively large elements that signal something has gone well. | | | `colorBackgroundWarning` Backgrounds of relatively small elements that signal something requires urgent attention. | | | `colorBackgroundWarningQuiet` Backgrounds of relatively large elements that signal something requires urgent attention. | | | `colorBackgroundInfo` Backgrounds of relatively small elements that signal important information. | | | `colorBackgroundInfoQuiet` Backgrounds of relatively large elements that signal important information. | | | `colorBackgroundDiscover` Backgrounds of relatively small elements that signal something new in the product. | | | `colorBackgroundDiscoverQuiet` Backgrounds of relatively large elements that signal something new in the product. | | | `colorBackgroundPresentationalGray` Final brand color for backgrounds of elements that need to attract attention and are differentiated based on colour. | | | `colorBackgroundPresentationalGreen` Tertiary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour. | | | `colorBackgroundPresentationalPink` Primary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour. | | | `colorBackgroundPresentationalPurple` Tertiary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour. | | | `colorBackgroundPresentationalYellow` Secondary brand color for backgrounds of elements that need to attract attention and are differentiated based on colour. | | | `colorBackgroundCategoryEntertainment` Backgrounds upon which icons are placed from the 'entertainment' expense category | | | `colorBackgroundCategoryEquipment` Backgrounds upon which icons are placed from the 'equipment' expense category | | | `colorBackgroundCategoryMarketing` Backgrounds upon which icons are placed from the 'marketing' expense category | | | `colorBackgroundCategoryMealsAndDrinks` Backgrounds upon which icons are placed from the 'meals and drinks' expense category | | | `colorBackgroundCategoryOffice` Backgrounds upon which icons are placed from the 'office' expense category | | | `colorBackgroundCategoryPhoneAndInternet` Backgrounds upon which icons are placed from the 'phone and internet' expense category | | | `colorBackgroundCategorySoftware` Backgrounds upon which icons are placed from the 'software' expense category | | | `colorBackgroundCategoryTravel` Backgrounds upon which icons are placed from the 'travel' expense category | | | `colorBackgroundCategoryService` Backgrounds upon which icons are placed from the 'service' expense category | | | `colorBackgroundCategorySupplies` Backgrounds upon which icons are placed from the 'supplies' expense category | | | `colorBackgroundCategoryOther` Backgrounds upon which icons are placed from the 'other' expense category | | | `colorBackgroundCategoryNone` Backgrounds upon which icons are placed when they do not have an expense category | | | `colorBackgroundCategoryUnknown` Backgrounds upon which icons are placed when the category isn't known | | | `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 | | | `colorBorderInteractive` Default border colour of interactive elements. | | | `colorBorderInteractiveQuiet` Borders of interactive elements that should attract less attention. | | | `colorBorderInteractiveLoud` Borders of interactive containers that should attract attention. | | | `colorBorderInteractiveLouder` Borders of interactive containers that should attract the most attention. | | | `colorBorderInteractiveHover` Borders of interactive elements in a hover state. | | | `colorBorderInteractiveDisabled` Borders of interactive elements in a disabled state. | | | `colorBorderInteractiveSelected` Borders of interactive elements in a selected state. | | | `colorBorderInteractiveSelectedHover` Borders of interactive elements in a selected and hover state. | | | `colorBorderInteractiveSelectedLoud` Borders of interactive elements in a selected state that should attract attention. | | | `colorBorderStatic` Borders of non-interactive containers. | | | `colorBorderStaticLoud` Borders or separators of non-interactive elements that should attract attention or are used on top of loud static backgrounds. | | | `colorBorderNeutral` Borders of elements that signal something neutral. | | | `colorBorderNegative` Borders of elements that signal something negative. | | | `colorBorderNegativeHover` Borders of interactive elements that signal something negative and are in a hover state. | | | `colorBorderPositive` Borders of elements that signal something has gone well. | | | `colorBorderWarning` Borders of elements that signal something requires urgent attention. | | | `colorBorderInfo` Borders of elements that signal important information. | | | `colorBorderDiscover` Borders of elements that signal something new in the product. | | | `colorShadowFocus` Default focus ring colour. | | | `colorShadowFocusInvalid` Focus ring colour for interactive elements in an invalid state. | | | `colorShadowDepth` Default shadow colour for elevations. | | | `colorShadowDepthQuiet` Shadow colour for subtle elevations. | | | `colorShadowDepthLoud` Shadow colour for strong elevations. | | | `colorBackgroundCardDisabled` Background colour of a disabled Pleo Card. | | | `colorBackgroundCardPhysical` Background colour of the physical Pleo Card. | | | `colorBackgroundCardVendor` Background colour of the vendor Pleo Card. | | | `colorBackgroundCardVirtual` Background colour of the virtual Pleo Card. | | | `colorBackgroundCardDecorativeSurfaceVendor` Background colour of the vendor Pleo Card (quiet). | | | `colorBackgroundCardDecorativeSurfaceVirtual` Background colour of the virtual Pleo Card (quiet). | | | `colorBorderCardDisabled` Border colour of a disabled Pleo Card. | | | `colorBorderCardPhysical` Border colour of the physical Pleo Card. | | | `colorBorderCardVendor` Border colour of the vendor Pleo Card. | | | `colorBorderCardVirtual` Border colour of the virtual Pleo Card. | | | `colorContentCardDisabled` Content colour of a disabled Pleo Card. | | | `colorContentCardPhysical` Content colour of the physical Pleo Card. | | | `colorContentCardVendor` Content colour of the vendor Pleo Card. | | | `colorContentCardVirtual` Content colour of the virtual Pleo Card. | | ## Core colors | Token | Value | Example | | -------------------- | ------- | ------- | | `blue100` | #d4effa | | | `blue200` | #a8d9ff | | | `blue300` | #81c9ff | | | `blue400` | #407cd6 | | | `blue500` | #2d5693 | | | `blue600` | #1f375a | | | `brandPink` | #feb6fe | | | `green100` | #d7f9e5 | | | `green200` | #b5f2cd | | | `green300` | #7ae1a2 | | | `green400` | #21c663 | | | `green500` | #227f47 | | | `green600` | #1e472e | | | `maroon100` | #f2d5d9 | | | `maroon200` | #ffb3bf | | | `maroon300` | #ff90a1 | | | `maroon400` | #f15a71 | | | `maroon500` | #923544 | | | `maroon600` | #421f25 | | | `neutralGray300` | #e1e6e6 | | | `neutralGray400` | #b0b6b6 | | | `neutralGray500` | #7f8686 | | | `neutralGray600` | #6b7070 | | | `neutralGray700` | #2e3030 | | | `neutralOffBlack800` | #212222 | | | `neutralOffBlack900` | #131414 | | | `neutralOffWhite100` | #fafcfc | | | `neutralOffWhite200` | #eef4f4 | | | `yellow100` | #fffbcb | | | `yellow200` | #fff790 | | | `yellow300` | #f0e556 | | | `yellow400` | #dbc713 | | | `yellow500` | #7d7532 | | | `yellow600` | #453e21 | |