Foundations

Color

Overview

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

Semantic colors

Token	Example
`colorContentInteractive`
`colorContentInteractiveOnInteractiveInverseLoud`
`colorContentInteractiveHover`
`colorContentInteractiveHoverOnInteractiveInverseLoud`
`colorContentInteractiveQuiet`
`colorContentInteractiveLink`
`colorContentInteractiveLinkHover`
`colorContentInteractiveDisabled`
`colorContentInteractiveInverse`
`colorContentInteractiveInverseHover`
`colorContentInteractiveInverseQuiet`
`colorContentInteractiveSelected`
`colorContentInteractiveSelectedHover`
`colorContentInteractivePlaceholder`
`colorContentStatic`
`colorContentStaticOnPresentationalPink`
`colorContentStaticQuietOnPresentationalPink`
`colorContentStaticQuiet`
`colorContentStaticInverse`
`colorContentNeutral`
`colorContentNegative`
`colorContentNegativeLoud`
`colorContentPositive`
`colorContentPositiveLoud`
`colorContentWarning`
`colorContentWarningLoud`
`colorContentInfo`
`colorContentInfoLoud`
`colorContentDiscover`
`colorContentDiscoverLoud`
`colorContentCategoryEntertainment`
`colorContentCategoryEquipment`
`colorContentCategoryMarketing`
`colorContentCategoryMealsAndDrinks`
`colorContentCategoryOffice`
`colorContentCategoryPhoneAndInternet`
`colorContentCategorySoftware`
`colorContentCategoryTravel`
`colorContentCategoryService`
`colorContentCategorySupplies`
`colorContentCategoryOther`
`colorContentCategoryNone`
`colorContentCategoryUnknown`
`colorContentBrandLogo`
`colorBackgroundInteractive`
`colorBackgroundInteractiveLoud`
`colorBackgroundInteractiveLouder`
`colorBackgroundInteractiveHover`
`colorBackgroundInteractiveQuietHover`
`colorBackgroundInteractiveDisabled`
`colorBackgroundInteractiveInverse`
`colorBackgroundInteractiveInverseHover`
`colorBackgroundInteractiveInverseLoud`
`colorBackgroundInteractiveSelected`
`colorBackgroundInteractiveSelectedHover`
`colorBackgroundInteractiveTransparent`
`colorBackgroundInteractiveTransparentHover`
`colorBackgroundStatic`
`colorBackgroundStaticLoud`
`colorBackgroundStaticLouder`
`colorBackgroundStaticLoudest`
`colorBackgroundStaticPage`
`colorBackgroundStaticBackdrop`
`colorBackgroundStaticInverse`
`colorBackgroundNeutral`
`colorBackgroundNeutralQuiet`
`colorBackgroundNegative`
`colorBackgroundNegativeQuiet`
`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`
`colorBorderInteractiveLouder`
`colorBorderInteractiveHover`
`colorBorderInteractiveDisabled`
`colorBorderInteractiveSelected`
`colorBorderInteractiveSelectedHover`
`colorBorderInteractiveSelectedLoud`
`colorBorderStatic`
`colorBorderStaticLoud`
`colorBorderNeutral`
`colorBorderNegative`
`colorBorderNegativeHover`
`colorBorderPositive`
`colorBorderWarning`
`colorBorderInfo`
`colorBorderDiscover`
`colorShadowFocus`
`colorShadowFocusInvalid`
`colorShadowDepth`
`colorShadowDepthQuiet`
`colorShadowDepthLoud`
`colorBackgroundCardDisabled`
`colorBackgroundCardPhysical`
`colorBackgroundCardVendor`
`colorBackgroundCardVirtual`
`colorBackgroundCardDecorativeSurfaceVendor`
`colorBackgroundCardDecorativeSurfaceVirtual`
`colorBorderCardDisabled`
`colorBorderCardPhysical`
`colorBorderCardVendor`
`colorBorderCardVirtual`
`colorContentCardDisabled`
`colorContentCardPhysical`
`colorContentCardVendor`
`colorContentCardVirtual`

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

Didn't find what you were looking for?

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

Edit this page