Color

Color design tokens represent the fundamental decisions of Cedar’s visual language:

  • Stores color specifications using variable names, not hard-coded values such as hex values for color
  • Specifies a hierarchical and semantically defined system


Below is a list of color tokens with descriptions and values. Web and mobile color tokens have identical hex values but the naming pattern differs. For example, color token names are:

  • For Web: cdr-color-text-primary-lightmode
  • For Android: cdr_color_text_primary_lightmode
  • For iOS: CdrColorTextPrimaryLightmode

Background Colors

cdr-color-background-lightest
Only use for light background color - lightest value
#ffffff
r255 g255 b255
cdr-color-background-lighter
Only use for light background color - value is between light and lightest
#fafafa
r250 g250 b250
cdr-color-background-light
Only use for light background color
#f7f7f7
r247 g247 b247
cdr-color-background-dark
Only use for dark background color
#292929
r41 g41 b41
cdr-color-background-darker
Only use for dark background color - darkest value
#1a1a1a
r26 g26 b26

Typography Colors

For Light Backgrounds

cdr-color-text-primary-lightmode
Primary body text color on a light background
#292929
r41 g41 b41
cdr-color-text-secondary-lightmode
Secondary or supplemental text color on a light background
#616161
r97 g97 b97
cdr-color-text-link-lightmode
Link text color on a light background
#3278ae
r50 g120 b174
cdr-color-text-error-lightmode
Error text color on a light background
#b5292b
r181 g41 b43
cdr-color-text-disabled-lightmode
Disabled text color for interactive UI elements on a light background
#b8b8b8
r184 g184 b184

For Dark Backgrounds

cdr-color-text-primary-darkmode
Primary body text color on a dark background
#fafafa
r250 g250 b250
cdr-color-text-secondary-darkmode
Secondary or supplemental text color on a dark background
#999999
r153 g153 b153
cdr-color-text-link-darkmode
Link text color on a dark background
#5197cd
r81 g151 b205
cdr-color-text-error-darkmode
Error text color on a dark background
#e86868
r232 g104 b104
cdr-color-text-disabled-darkmode
Disabled text color for interactive UI elements on a dark background
#616161
r97 g97 b97

Icon Colors

For Light Backgrounds

cdr-color-icon-emphasis-lightmode
Emphasis or darkest icon color on a light background
#292929
r41 g41 b41
cdr-color-icon-primary-lightmode
Primary icon color on a light background
#616161
r97 g97 b97

For Dark Backgrounds

cdr-color-icon-emphasis-darkmode
Emphasis or lightest icon color on a dark background
#fafafa
r250 g250 b250
cdr-color-icon-primary-darkmode
Primary icon color on a dark background
#999999
r153 g153 b153

Form Colors

For Light Backgrounds

cdr-color-text-form-label-lightmode
Label text color for forms on a light background. Can also be used for input entry text
#292929
r41 g41 b41
cdr-color-text-form-placeholder-lightmode
Placeholder text color for forms on a light background
#616161
r97 g97 b97
cdr-color-text-form-disabled-lightmode
Disabled text color for forms on a light background
#b8b8b8
r184 g184 b184
cdr-color-background-form-lightmode
Light background color for forms
#ffffff
r255 g255 b255
cdr-color-background-form-input-lightmode
Light background color for input control
#ffffff
r255 g255 b255

For Dark Backgrounds

cdr-color-text-form-label-darkmode
Label text color for forms on a dark background. Can also be used for input entry text
#fafafa
r250 g250 b250
cdr-color-text-form-placeholder-darkmode
Placeholder text color for forms on a dark background
#999999
r153 g153 b153
cdr-color-text-form-disabled-darkmode
Disabled text color for forms on a dark background
#616161
r97 g97 b97
cdr-color-background-form-darkmode
Dark background color for forms
#292929
r41 g41 b41
cdr-color-background-form-input-darkmode
Dark background color for input control
#292929
r41 g41 b41

Border Colors

For Light Backgrounds

cdr-color-border-primary-lightmode
Primary border color for light background
#616161
r97 g97 b97
cdr-color-border-secondary-lightmode
Secondary border color for light background
#b8b8b8
r184 g184 b184
cdr-color-border-disabled-lightmode
Border color for disabled state for light background
#dadada
r218 g218 b218
cdr-color-border-error-lightmode
Border color for error validation state for light background
#e86868
r232 g104 b104
cdr-color-border-selected-lightmode #2b6692
r43 g102 b146

For Dark Backgrounds

cdr-color-border-secondary-darkmode
Secondary border color for dark background
#999999
r153 g153 b153