Color

Guidelines

We use color to signal structure, highlight or emphasize important information or elements, and to display different states.

Information:

You can find our WIP semantic tokens guidelines in Notion.

Semantic colors

Token	Example
`colorContentInteractive`
`colorContentInteractiveHover`
`colorContentInteractiveQuiet`
`colorContentInteractiveLink`
`colorContentInteractiveLinkHover`
`colorContentInteractiveDisabled`
`colorContentInteractiveInverse`
`colorContentInteractiveInverseHover`
`colorContentInteractiveInverseQuiet`
`colorContentInteractiveSelected`
`colorContentInteractiveSelectedHover`
`colorContentInteractivePlaceholder`
`colorContentStatic`
`colorContentStaticQuiet`
`colorContentStaticInverse`
`colorContentNeutral`
`colorContentNegative`
`colorContentNegativeHover`
`colorContentNegativeLoud`
`colorContentPositive`
`colorContentPositiveLoud`
`colorContentWarning`
`colorContentWarningLoud`
`colorContentInfo`
`colorContentInfoLoud`
`colorContentDiscover`
`colorContentDiscoverLoud`
`colorContentCategoryEntertainment`
`colorContentCategoryEquipment`
`colorContentCategoryMarketing`
`colorContentCategoryMealsAndDrinks`
`colorContentCategoryOffice`
`colorContentCategoryPhoneAndInternet`
`colorContentCategorySoftware`
`colorContentCategoryTravel`
`colorContentCategoryService`
`colorContentCategorySupplies`
`colorContentCategoryOther`
`colorContentCategoryNone`
`colorContentCategoryUnknown`
`colorBackgroundInteractive`
`colorBackgroundInteractiveLoud`
`colorBackgroundInteractiveLouder`
`colorBackgroundInteractiveHover`
`colorBackgroundInteractiveQuietHover`
`colorBackgroundInteractiveDisabled`
`colorBackgroundInteractiveInverse`
`colorBackgroundInteractiveInverseHover`
`colorBackgroundInteractiveSelected`
`colorBackgroundInteractiveSelectedHover`
`colorBackgroundInteractiveTransparent`
`colorBackgroundInteractiveTransparentHover`
`colorBackgroundStatic`
`colorBackgroundStaticLoud`
`colorBackgroundStaticLouder`
`colorBackgroundStaticLoudest`
`colorBackgroundStaticPage`
`colorBackgroundStaticBackdrop`
`colorBackgroundStaticInverse`
`colorBackgroundNeutral`
`colorBackgroundNeutralQuiet`
`colorBackgroundNegative`
`colorBackgroundNegativeQuiet`
`colorBackgroundNegativeQuietHover`
`colorBackgroundNegativeHover`
`colorBackgroundPositive`
`colorBackgroundPositiveQuiet`
`colorBackgroundWarning`
`colorBackgroundWarningQuiet`
`colorBackgroundInfo`
`colorBackgroundInfoQuiet`
`colorBackgroundDiscover`
`colorBackgroundDiscoverQuiet`
`colorBackgroundPresentationalGray`
`colorBackgroundPresentationalGreen`
`colorBackgroundPresentationalPink`
`colorBackgroundPresentationalPurple`
`colorBackgroundPresentationalYellow`
`colorBackgroundCategoryEntertainment`
`colorBackgroundCategoryEquipment`
`colorBackgroundCategoryMarketing`
`colorBackgroundCategoryMealsAndDrinks`
`colorBackgroundCategoryOffice`
`colorBackgroundCategoryPhoneAndInternet`
`colorBackgroundCategorySoftware`
`colorBackgroundCategoryTravel`
`colorBackgroundCategoryService`
`colorBackgroundCategorySupplies`
`colorBackgroundCategoryOther`
`colorBackgroundCategoryNone`
`colorBackgroundCategoryUnknown`
`colorBackgroundNotification`
`colorBorderInteractive`
`colorBorderInteractiveQuiet`
`colorBorderInteractiveLoud`
`colorBorderInteractiveHover`
`colorBorderInteractiveDisabled`
`colorBorderInteractiveSelected`
`colorBorderInteractiveSelectedHover`
`colorBorderStatic`
`colorBorderStaticLoud`
`colorBorderNeutral`
`colorBorderNegative`
`colorBorderNegativeHover`
`colorBorderPositive`
`colorBorderWarning`
`colorBorderInfo`
`colorBorderDiscover`
`colorShadowFocus`
`colorShadowFocusInvalid`
`colorShadowDepth`
`colorShadowDepthQuiet`
`colorShadowDepthLoud`

Core colors

Token	Value	Example
`blue000`	#fafcfe
`blue100`	#f5f8fd
`blue200`	#e8f1fc
`blue300`	#d2e3f9
`blue400`	#bbd4f7
`blue500`	#9cc1f3
`blue600`	#6da4ed
`blue700`	#4588e3
`blue800`	#286ecc
`blue900`	#27589b
`green000`	#fbfefc
`green100`	#f4f9f6
`green200`	#ecf9f0
`green300`	#d9f2e1
`green400`	#c6ecd2
`green500`	#ace3bd
`green600`	#85d69e
`green700`	#6abe84
`green800`	#2c8354
`green900`	#255937
`pink000`	#fffafb
`pink100`	#fff5f6
`pink200`	#ffebed
`pink300`	#ffdee2
`pink400`	#ffc8d0
`pink500`	#f39ca8
`pink600`	#dc818e
`pink700`	#cb727f
`pink800`	#b2535f
`pink900`	#7b3840
`purple000`	#fbfbfe
`purple100`	#f8f7fd
`purple200`	#edebf9
`purple300`	#dcd7f4
`purple400`	#b3a9e7
`purple500`	#a69ae3
`purple600`	#8474d8
`purple700`	#7363c5
`purple800`	#5442b3
`purple900`	#43387a
`red000`	#fffafa
`red100`	#fff5f5
`red200`	#fee6e6
`red300`	#fecdcd
`red400`	#fdb5b5
`red500`	#fc9090
`red600`	#fb6060
`red700`	#e91c1c
`red800`	#d61f1f
`red900`	#a51d1d
`shade000`	#ffffff
`shade100`	#fafafa
`shade200`	#f5f5f5
`shade300`	#ececec
`shade400`	#cccccc
`shade500`	#b3b3b3
`shade600`	#737373
`shade700`	#333333
`shade800`	#222222
`shade900`	#000000
`yellow000`	#fffefa
`yellow100`	#fffdf5
`yellow200`	#fcf9e4
`yellow300`	#fef6cd
`yellow400`	#fbefaf
`yellow500`	#fcea88
`yellow600`	#fbe360
`yellow700`	#dfc538
`yellow800`	#dbbd1a
`yellow900`	#b39a0f

Usage in code

import {tokens} from '@pleo-io/telescope'

const element = styled.div`
    color: ${tokens.shade900};
`

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

Edit this page

On this page