Color Usage
Colors are applied across the interface with meaningful usages.
Texts
| Token name | Palette & Hex value | Figma styles | Usage examples | |
|---|---|---|---|---|
| Neutral | ||||
| CdsColorTextNeutralHighEmphasis | Brand / Neutral 20 - #002C52 | Texts / Neutral / High Emphasis | Primary text ; Headers ; Body copy ; Input values Neutral chips states label | |
| CdsColorTextNeutralMediumEmphasis | Brand / Neutral 20 @ 64% - #002C52A3 | Texts / Neutral / Medium Emphasis | Secondary text ; Form items label ; Assistive texts ; Input placeholders ; Neutral outlined buttons label ; Default neutral chips label | |
| CdsColorTextNeutralDisabled | Brand / Neutral 20 @ 32% - #002C5252 | Texts / Neutral / Disabled | Disabled color for CdsColorTextNeutralHighEmphasis and CdsColorTextNeutralMediumEmphasis | |
| Primary | ||||
| CdsColorTextPrimaryHighEmphasis | Brand / Primary 50 - #0046FE | Texts / Primary / High Emphasis | Primary accent text ; Headers ; Primary outlined buttons label ; Selected chips label | |
| CdsColorTextPrimaryDisabled | Brand / Primary 50 @ 32% - #0046FE52 | Texts / Primary / Disabled | Disabled color for CdsColorTextPrimaryHighEmphasis | |
| Secondary | ||||
| CdsColorTextSecondaryHighEmphasis | Brand / Secondary 30 - #CC492A | Texts / Secondary / High Emphasis | Secondary accent text ; Secondary outlined buttons label | |
| CdsColorTextSecondaryDisabled | Brand / Secondary 30 @ 32% - #CC492A52 | Texts / Secondary / Disabled | Disabled color for CdsColorTextSecondaryHighEmphasis | |
| Info | ||||
| CdsColorTextInfoHighEmphasis | Extended / Blue 40 - #145AC1 | Texts / Info / High Emphasis | Informative message text ; Informative outlined buttons label | |
| CdsColorTextInfoDisabled | Extended / Blue 40 @ 32% - #145AC152 | Texts / Info / Disabled | Disabled color for CdsColorTextInfoHighEmphasis | |
| Critical | ||||
| CdsColorTextCriticalHighEmphasis | Extended / Strawberry 40 - #BC0F2D | Texts / Critical / High Emphasis | Critical message text ; Critical outlined buttons label ; Form items error label ; Error chips label | |
| CdsColorTextCriticalDisabled | Extended / Strawberry 40 @ 32% - #BC0F2D52 | Texts / Critical / Disabled | Disabled color for CdsColorTextCriticalHighEmphasis | |
| Warn | ||||
| CdsColorTextWarnHighEmphasis | Extended / Orange 40 - #8B5000 | Texts / Warn / High Emphasis | Warning message text ; Warning outlined buttons label | |
| CdsColorTextWarnDisabled | Extended / Orange 40 @ 32% - #8B500052 | Texts / Warn / Disabled | Disabled color for CdsColorTextWarnHighEmphasis | |
| Success | ||||
| CdsColorTextSuccessHighEmphasis | Extended / Green 40 - #376A1F | Texts / Success / High Emphasis | Success message text ; Success outlined buttons label | |
| CdsColorTextSuccessDisabled | Extended / Green 40 @ 32% - #376A1F52 | Texts / Success / Disabled | Disabled color for CdsColorTextSuccessHighEmphasis | |
| White | ||||
| CdsColorTextWhiteHighEmphasis | Extended / Grey 100 - #FFFFFF | Texts / White / High Emphasis | Counterpart of CdsColorTextNeutralHighEmphasis on colored background ; Contained buttons label | |
| CdsColorTextWhiteMediumEmphasis | Extended / Grey 100 @ 64% - #FFFFFFA3 | Texts / White / Medium Emphasis | Counterpart of CdsColorTextNeutralMediumEmphasis on colored background | |
| CdsColorTextWhiteDisabled | Extended / Grey 100 @ 32% - #FFFFFF52 | Texts / White / Disabled | Disabled color for CdsColorTextWhiteHighEmphasis and CdsColorTextWhiteMediumEmphasis | |
| Link (Neutral) | ||||
| CdsColorTextLinkNeutralResting | Brand / Neutral 20 @ 64% - #002C52A3 | Texts / Text Link / Neutral / Resting | Neutral links | |
| CdsColorTextLinkNeutralHover | Brand / Neutral 20 - #002C52 | Texts / Text Link / Neutral / Hover | Hover color for CdsColorTextLinkNeutralResting | |
| CdsColorTextLinkNeutralActive | Brand / Neutral 20 - #002C52 | Texts / Text Link / Neutral / Active | Active color for CdsColorTextLinkNeutralResting | |
| CdsColorTextLinkNeutralFocused | Brand / Neutral 20 - #002C52 | Texts / Text Link / Neutral / Focus | Focus color for CdsColorTextLinkNeutralResting | |
| CdsColorTextLinkNeutralVisited | Brand / Neutral 20 @ 64% - #002C52A3 | Texts / Text Link / Neutral / Visited | Visited color for CdsColorTextLinkNeutralResting | |
| CdsColorTextLinkNeutralDisabled | Brand Neutral 20 @ 32% - #002C5252 | Texts / Text Link / Neutral / Disabled | Disabled color for CdsColorTextLinkNeutralResting | |
| Link (Primary) | ||||
| CdsColorTextLinkPrimaryResting | Brand Primary 50 - #0046FE | Texts / Text Link / Primary / Resting | Primary links | |
| CdsColorTextLinkPrimaryHover | Brand Primary 30 - #002EAA | Texts / Text Link / Primary / Hover | Hover color for CdsColorTextLinkPrimaryResting | |
| CdsColorTextLinkPrimaryActive | Brand Primary 30 - #002EAA | Texts / Text Link / Primary / Active | Active color for CdsColorTextLinkPrimaryResting | |
| CdsColorTextLinkPrimaryFocused | Brand Primary 30 - #002EAA | Texts / Text Link / Primary / Focused | Focus color for CdsColorTextLinkPrimaryResting | |
| CdsColorTextLinkPrimaryVisited | Brand Primary 50 - #0046FE | Texts / Text Link / Primary / Visited | Visited color for CdsColorTextLinkPrimaryResting | |
| CdsColorTextLinkPrimaryDisabled | Brand Primary 50@ 32% - #0046FE52 | Texts / Text Link / Primary / Disabled | Disabled color for CdsColorTextLinkPrimaryResting |
Backgrounds
| Token name | Palette & Hex value | Figma styles | Usage examples | |
|---|---|---|---|---|
| Neutral | ||||
| CdsColorBackgroundNeutralMain | Brand / Neutral 20 - #002C52 | Backgrounds / Neutral / Main | Snackbars ; Tooltips ; Neutral buttons | |
| CdsColorBackgroundNeutralMainDisabled | Brand / Neutral 20 @ 32% - #002C5252 | Backgrounds / Neutral / Main Disabled | Disabled color for CdsColorBackgroundNeutralMain | |
| CdsColorBackgroundNeutralLight | Brand / Neutral 99 - #F7F8F9 | Backgrounds / Neutral / Light | Sections ; Neutral containers | |
| Primary | ||||
| CdsColorBackgroundPrimaryMain | Brand / Primary 50 - #0046FE | Backgrounds / Primary / Main | Primary buttons ; Notification badges ; Active cursor in switches | |
| CdsColorBackgroundPrimaryMainDisabled | Brand / Primary 50 @ 32% - #0046FE52 | Backgrounds / Primary / Main Disabled | Disabled color for CdsColorBackgroundPrimaryMain | |
| CdsColorBackgroundPrimaryLight | Brand / Primary 99 - #F7F9FE | Backgrounds / Primary / Light | Pages main background ; Primary containers | |
| Secondary | ||||
| CdsColorBackgroundSecondaryMain | Brand / Secondary 30 - #CC492A | Backgrounds / Secondary / Main | Secondary buttons | |
| CdsColorBackgroundSecondaryMainDisabled | Brand / Secondary 30 @ 32% - #CC492A52 | Backgrounds / Secondary / Main Disabled | Disabled color for CdsColorBackgroundSecondaryMain | |
| CdsColorBackgroundSecondaryLight | Brand / Secondary 99 - #FCF7F6 | Backgrounds / Secondary / Light | Secondary containers | |
| Info | ||||
| CdsColorBackgroundInfoDark | Extended / Blue 40 - #155AC1 | Backgrounds / Info / Dark | Informative buttons | |
| CdsColorBackgroundInfoDarkDisabled | Extended / Blue 40 @ 32% - #155AC152 | Backgrounds / Info / Dark Disabled | Disabled color for CdsColorBackgroundInfoDark | |
| CdsColorBackgroundInfoLight | Extended / Blue 95 - #EDF0FF | Backgrounds / Info / Light | Informative containers ; Informative status | |
| Critical | ||||
| CdsColorBackgroundCriticalDark | Extended / Strawberry 40 - #BC0F2D | Backgrounds / Critical / Dark | Critical Dark buttons (as seen in toasts) | |
| CdsColorBackgroundCriticalDarkDisabled | Extended / Strawberry 40 @ 32% - #BC0F2D52 | Backgrounds / Critical / Dark Disabled | Disabled color for CdsColorBackgroundCriticalDark | |
| CdsColorBackgroundCriticalMain | Extended / Strawberry 60 - #FF525D | Backgrounds / Critical / Main | Critical buttons ; Important notification badges | |
| CdsColorBackgroundCriticalMainDisabled | Extended / Strawberry 60 @ 32% - #FF525D52 | Backgrounds / Critical / Main Disabled | Disabled color for CdsColorBackgroundCriticalMain | |
| CdsColorBackgroundCriticalLight | Extended / Strawberry 95 - #FFEDEC | Backgrounds / Critical / Light | Critical containers ; Critical status | |
| Warn | ||||
| CdsColorBackgroundWarnDark | Extended / Orange 40 - #8B5000 | Backgrounds / Warn / Dark | Warning buttons | |
| CdsColorBackgroundWarnDarkDisabled | Extended / Orange 40 @ 32% - #8B500052 | Backgrounds / Warn / Dark Disabled | Disabled color for CdsColorBackgroundWarnDark | |
| CdsColorBackgroundWarnLight | Extended / Orange 95 - #FFEEE1 | Backgrounds / Warn / Light | Warning containers ; Warning status | |
| Success | ||||
| CdsColorBackgroundSuccessDark | Extended / Green 40 - #376A1F | Backgrounds / Success / Dark | Success buttons | |
| CdsColorBackgroundSuccessDarkDisabled | Extended / Green 40 @ 32% - #376A1F52 | Backgrounds / Success / Dark Disabled | Disabled color for CdsColorBackgroundSuccessDark | |
| CdsColorBackgroundSuccessLight | Specific - #E3FFD0 | Backgrounds / Success / Light | Success containers ; Success status | |
| White | ||||
| CdsColorBackgroundWhiteMain | Extended / Grey 100 - #FFFFFF | Backgrounds / White / Main | Cards ; Sections ; Popovers ; Menus ; | |
| CdsColorBackgroundWhiteMainDisabled | Extended / Grey 100 @ 32% - #FFFFFF52 | Backgrounds / White / Main Disabled | Disabled color for CdsColorBackgroundWhiteMain |
Icons & Actions
| Token name | Palette & Hex value | Figma styles | Usage examples | |
|---|---|---|---|---|
| Neutral | ||||
| CdsColorActionNeutralActive | Brand / Neutral 20 - #002C52 | Icons and Actions / Neutral / Active | Active state of neutral icons Icons in neutral buttons states | |
| CdsColorActionNeutralInactive | Brand / Neutral 20 @ 64% - #002C52A3 | Icons and Actions / Neutral / Inactive | Inactive state of neutral icons ; Icons in default neutral buttons ; Inactive radios and checkboxes | |
| CdsColorActionNeutralDisabled | Brand / Neutral 20 @ 32% - #002C5252 | Icons and Actions / Neutral / Disabled | Disabled color for CdsColorActionNeutralActive | |
| Primary | ||||
| CdsColorActionPrimaryActive | Brand / Primary 50 - #0046FE | Icons and Actions / Primary / Active | Active state of primary icons ; Icons in primary buttons ; Active radios and checkboxes | |
| CdsColorActionPrimaryDisabled | Brand / Primary 50 @ 32% - #0046FE52 | Icons and Actions / Primary / Disabled | Disabled color for CdsColorActionPrimaryActive | |
| Secondary | ||||
| CdsColorActionSecondaryActive | Brand / Secondary 30 - #CC492A | Icons and Actions / Secondary / Active | Active state of secondary icons ; Icons in secondary buttons | |
| CdsColorActionSecondaryDisabled | Brand / Secondary 30 @ 32% - #CC492A52 | Icons and Actions / Secondary / Disabled | Disabled color for CdsColorActionSecondaryActive | |
| Info | ||||
| CdsColorActionInfoDarkActive | Extended / Blue 40 - #145AC1 | Icons and Actions / Info / Dark / Active | Active state of informative icons ; Icons in informative buttons | |
| CdsColorActionInfoDarkDisabled | Extended / Blue 40 @ 32% - #145AC152 | Icons and Actions / Info / Dark / Disabled | Disabled color for CdsColorActionInfoDarkActive | |
| Critical | ||||
| CdsColorActionCriticalMainActive | Extended / Strawberry 60 - #FF525D | Icons and Actions / Critical / Main / Active | Active state of critical icons ; Icons in critical buttons | |
| CdsColorActionCriticalMainDisabled | Extended / Strawberry 60 @ 32% - #FF525D52 | Icons and Actions / Critical / Main / Disabled | Disabled color for CdsColorActionCriticalMainActive | |
| CdsColorActionCriticalDarkActive | Extended / Strawberry 40 - #BC0F2D | Icons and Actions / Critical / Dark / Active | Active state of dark critical icons Icons in dark critical buttons | |
| CdsColorActionCriticalDarkDisabled | Extended / Strawberry 40 @ 32% - #BC0F2D52 | Icons and Actions / Critical / Dark / Disabled | Disabled color for CdsColorActionCriticalDarkActive | |
| Warn | ||||
| CdsColorActionWarnDarkActive | Extended / Orange 40 - #8B5000 | Icons and Actions / Warn / Dark / Active | Active state of warning icons ; Icons in warning buttons | |
| CdsColorActionWarnDarkDisabled | Extended / Orange 40 @ 32% - #8B500052 | Icons and Actions / Warn / Dark / Disabled | Disabled color for CdsColorActionWarnDarkActive | |
| Success | ||||
| CdsColorActionSuccessDarkActive | Extended / Green 40 - #376A1F | Icons and Actions / Success / Dark / Active | Active state of success icons ; Icons in success buttons | |
| CdsColorActionSuccessDarkDisabled | Extended / Green 40 @ 32% - #376A1F52 | Icons and Actions / Success / Dark / Disabled | Disabled color for CdsColorActionSuccessDarkActive | |
| White | ||||
| CdsColorActionWhiteActive | Extended / Grey 100 - #FFFFFF | Icons and Actions / White / Active | Active state of icons on colord background ; | |
| CdsColorActionWhiteInactive | Extended / Grey 100 @ 64% - #FFFFFFA3 | Icons and Actions / White / Inactive | Inactive state of icons on colord background ; | |
| CdsColorActionWhiteDisabled | Extended / Grey 100 @ 32% - #FFFFFF52 | Icons and Actions / White / Disabled | Disabled color for CdsColorActionWhiteActive |
Borders
| Token name | Palette & Hex value | Figma styles | Usage examples | |
|---|---|---|---|---|
| Neutral | ||||
| CdsColorBorderNeutralHighEmphasis | Brand / Neutral 20 - #002C52 | Borders / Neutral / High Emphasis | Hover color for textfields | |
| CdsColorBorderNeutralMediumEmphasis | Brand / Neutral 20 @ 64% - #002C52A3 | Borders / Neutral / Medium Emphasis | Filled textfields | |
| CdsColorBorderNeutralDisabled | Brand / Neutral 20 @ 32% - #002C5252 | Borders / Neutral / Disabled | Disabled color for CdsColorBorderNeutralHighEmphasis and CdsColorBorderNeutralMediumEmphasis | |
| CdsColorBorderNeutralDecorative | Brand / Neutral 20 @ 20% - #002C5233 | Borders / Neutral / Decorative | Unfilled or read-only textfields ; Inactive tabs | |
| Primary | ||||
| CdsColorBorderPrimaryHighEmphasis | Brand / Primary 50 - #0046FE | Borders / Primary / High Emphasis | Focus color for textfields ; Active tabs | |
| CdsColorBorderPrimaryDisabled | Brand / Primary 50 @ 32% - #0046FE52 | Borders / Primary / Disabled | Disabled color for CdsColorBorderPrimaryHighEmphasis | |
| Critical | ||||
| CdsColorBorderCriticalMainHighEmphasis | Extended / Strawberry 60 - #FF525D | Borders / Critical / Main / High Emphasis | Error color for textfields | |
| CdsColorBorderCriticalMainDisabled | Extended / Strawberry 60 @ 32% - #FF525D52 | Borders / Critical / Main / Disabled | Disabled color for CdsColorBorderCriticalMainHighEmphasis | |
| CdsColorBorderCriticalDarkHighEmphasis | Extended / Strawberry 40 - #BC0F2D | Borders / Critical / Dark / High Emphasis | Banner ; Toast : Critical outlined buttons | |
| CdsColorBorderCriticalDarkDisabled | Extended / Strawberry 40 @ 32% - #BC0F2D52 | Borders / Critical / Dark / Disabled | Disabled color for CdsColorBorderCriticalDarkHighEmphasis | |
| White | ||||
| CdsColorBorderWhiteHighEmphasis | Extended / Grey 100 - #FFFFFF | Borders / White / High Emphasis | Tabs on colored backgrounds ; Counterpart of CdsColorBorderNeutralHighEmphasis on colored background | |
| CdsColorBorderWhiteMediumEmphasis | Extended / Grey 100 @ 64% - #FFFFFFA3 | Borders / White / Medium Emphasis | Counterpart of CdsColorBorderNeutralMediumEmphasis on colored background | |
| CdsColorBorderWhiteDisabled | Extended / Grey 100 @ 32% - #FFFFFF52 | Borders / White / Disabled | Disabled color for CdsColorBorderWhiteHighEmphasis and CdsColorBorderWhiteMediumEmphasis ; Counterpart of CdsColorBorderNeutralDisabled on colored background |
Specific
| Token name | Palette & Hex value | Figma styles | Usage examples | |
|---|---|---|---|---|
| CdsColorSpecificBackdropNeutral | Brand / Neutral 20 @ 25% - #002C5240 | Specific styles / Backdrop / Neutral | Backdrop for modal elements | |
| CdsColorSpecificSkeletonNeutral | Brand / Neutral 20 @ 12% - #002C521F | Specific styles / Skeleton / Neutral | Skeleton elements | |
| CdsColorSpecificSkeletonWhite | Extended / Grey 100 @ 12% - #FFFFFF1F | Specific styles / Skeleton / White | Skeleton elements on colored backgrounds | |
| CdsColorSpecificDividerNeutral | Brand / Neutral 20 @ 20% - #002C5233 | Specific styles / Divider / Neutral | Dividers (Not to be confused with "borders") | |
| Extended / Yellow 90 - #FFE081 | Specific styles / Highlight / Yellow | Highlighted text background |