Color

# Overview

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-dark

Only use for dark background color

#292929

cdr-color-background-darker

Only use for dark background color - darkest value

#1a1a1a

cdr-color-background-light

Only use for light background color

#f7f7f7

cdr-color-background-lighter

Only use for light background color - value is between light and lightest

#fafafa

cdr-color-background-lightest

Only use for light background color - lightest value

#ffffff

cdr-color-background-form-lightmode

Light background color for forms

#ffffff

cdr-color-background-form-darkmode

Dark background color for forms

#292929

cdr-color-background-form-input-lightmode

Light background color for input control

#ffffff

cdr-color-background-form-input-darkmode

Dark background color for input control

#292929

# Typography Colors

# For Light Backgrounds

cdr-color-text-primary-lightmode

Primary body text color on a light background

#292929

cdr-color-text-secondary-lightmode

Secondary or supplemental text color on a light background

#616161

cdr-color-text-disabled-lightmode

Disabled text color for interactive UI elements on a light background

#b8b8b8

cdr-color-text-link-lightmode

Link text color on a light background

#3278ae

cdr-color-text-error-lightmode

Error text color on a light background

#b5292b

cdr-color-text-form-label-lightmode

Label text color for forms on a light background. Can also be used for input entry text

#292929

cdr-color-text-form-placeholder-lightmode

Placeholder text color for forms on a light background

#616161

cdr-color-text-form-disabled-lightmode

Disabled text color for forms on a light background

#b8b8b8

# For Dark Backgrounds

cdr-color-text-primary-darkmode

Primary body text color on a dark background

#fafafa

cdr-color-text-secondary-darkmode

Secondary or supplemental text color on a dark background

#999999

cdr-color-text-disabled-darkmode

Disabled text color for interactive UI elements on a dark background

#616161

cdr-color-text-link-darkmode

Link text color on a dark background

#5197cd

cdr-color-text-error-darkmode

Error text color on a dark background

#e86868

cdr-color-text-form-label-darkmode

Label text color for forms on a dark background. Can also be used for input entry text

#fafafa

cdr-color-text-form-placeholder-darkmode

Placeholder text color for forms on a dark background

#999999

cdr-color-text-form-disabled-darkmode

Disabled text color for forms on a dark background

#616161

# Icon Colors

# For Light Backgrounds

cdr-color-icon-primary-lightmode

Primary icon color on a light background

#616161

cdr-color-icon-emphasis-lightmode

Emphasis or darkest icon color on a light background

#292929

# For Dark Backgrounds

cdr-color-icon-primary-darkmode

Primary icon color on a dark background

#999999

cdr-color-icon-emphasis-darkmode

Emphasis or lightest icon color on a dark background

#fafafa

# Border Colors

# For Light Backgrounds

cdr-color-border-primary-lightmode

Primary border color for light background

#616161

cdr-color-border-secondary-lightmode

Secondary border color for light background

#b8b8b8

cdr-color-border-disabled-lightmode

Border color for disabled state for light background

#dadada

cdr-color-border-error-lightmode

Border color for error validation state for light background

#e86868

cdr-color-border-selected-lightmode

Border color for selected state for light background

#2b6692

# For Dark Backgrounds

cdr-color-border-primary-darkmode

Primary border color for dark background

#fafafa

cdr-color-border-secondary-darkmode

Secondary border color for dark background

#999999

cdr-color-border-disabled-darkmode

Border color for disabled state for dark background

#dadada

# Guidelines

Cedar offers a range of colors designed to be accessed, understood, and used by all people regardless of their age, background, or ability. We meet or exceed color contrast WCAG AA accessibility standards.

# Examples

Do use approved background colors to separate content areas
Don't use accent colors as backgrounds

Do arrange background colors to promote page hierarchy by minimizing shifts in background
Don't alternate background colors in visually jarring ways

# Accessibility

Text choices should be paired with their corresponding background color to ensure accessibility. Legend descriptions for WCAG contrast ratios requirements are:

  • AAA: 7:1 for normal text and 4.5:1 for large text
  • AA: 4.5:1 for normal text and 3:1 for large text
  • AA-LG: Only for large text, graphical objects and user interface components

Note: Large text is defined as 18 point (typically 24px) or larger, or with bold style, 14 point (typically 18.66px) or larger.


# For Light Backgrounds

WCAG color contrast ratios for frequently used Cedar color tokens for text or foreground colors on light background colors.

# cdr-color-background-lightest

(Values for cdr-color-background-lightest: #ffffff or r255 g255 b255)

AAA 14.55:1 cdr-color-text-primary-lightmode
Values: #292929   /   r41 g41 b41
AA 6.19:1 cdr-color-text-secondary-lightmode
Values: #616161   /   r97 g97 b97
AA 4.74:1 cdr-color-text-link-lightmode
Values: #3278ae   /   r50 g120 b174
AA 6.33:1 cdr-color-text-error-lightmode
Values: #b5292b   /   r181 g41 b43
N/A* cdr-color-text-disabled-lightmode
Values: #b8b8b8   /   r184 g184 b184
When text is disabled

# cdr-color-background-lighter

(Values for cdr-color-background-lighter: #fafafa or r250 g250 b250)

AAA 13.94:1 cdr-color-text-primary-lightmode
Values: #292929   /   r41 g41 b41
AA 5.93:1 cdr-color-text-secondary-lightmode
Values: #616161   /   r97 g97 b97
AA 4.54:1 cdr-color-text-link-lightmode
Values: #3278ae   /   r50 g120 b174
AA 6.07:1 cdr-color-text-error-lightmode
Values: #b5292b   /   r181 g41 b43
N/A* cdr-color-text-disabled-lightmode
Values: #b8b8b8   /   r184 g184 b184
When text is disabled

# cdr-color-background-light

(Values for cdr-color-background-light: #f7f7f7 or r247 g247 b247)

AAA 13.58:1 cdr-color-text-primary-lightmode
Values: #292929   /   r41 g41 b41
AA 5.78:1 cdr-color-text-secondary-lightmode
Values: #616161   /   r97 g97 b97
AA-LG 4.42:1 cdr-color-text-link-lightmode
Values: #3278ae   /   r50 g120 b174
AA 5.91:1 cdr-color-text-error-lightmode
Values: #b5292b   /   r181 g41 b43
N/A* cdr-color-text-disabled-lightmode
Values: #b8b8b8   /   r184 g184 b184
When text is disabled

# For Dark Backgrounds

WCAG color contrast ratios for frequently used Cedar color tokens for text or foreground colors on dark background colors.

# cdr-color-background-dark

(Values for cdr-color-background-dark: #292929 or r41 g41 b41)

AAA 13.94:1 cdr-color-text-primary-darkmode
Values: #fafafa   /   r250 g250 b250
AA 5.11:1 cdr-color-text-secondary-darkmode
Values: #999999   /   r153 g153 b153
AA 4.61:1 cdr-color-text-link-darkmode
Values: #5197cd   /   r81 g151 b205
AA 4.58:1 cdr-color-text-error-darkmode
Values: #e86868   /   r232 g104 b104
N/A* cdr-color-text-disabled-darkmode
Values: #616161   /   r97 g97 b97
When text is disabled

# cdr-color-background-darker

(Values for cdr-color-background-darker: #1a1a1a or r26 g26 b26)

AAA 16.67:1 cdr-color-text-primary-darkmode
Values: #fafafa   /   r250 g250 b250
AA 6.11:1 cdr-color-text-secondary-darkmode
Values: #999999   /   r153 g153 b153
AA 5.52:1 cdr-color-text-link-darkmode
Values: #5197cd   /   r81 g151 b205
AA 5.48:1 cdr-color-text-error-darkmode
Values: #e86868   /   r232 g104 b104
N/A* cdr-color-text-disabled-darkmode
Values: #616161   /   r97 g97 b97
When text is disabled

# Brand Palette

These values should not be used standalone to create custom UI.

Colors from REI’s brand color palette are used throughout Cedar components and design recommendations.

Use these values when:

  • Requesting an update to an existing Cedar component
  • Requesting a new token
  • Developing a new component that will be adopted by Cedar Design System
  • Creating a custom or product-specific solution that will not be reused

Don't use these values when:

  • Creating a broad solution that can be shared across teams. Instead, develop a new component or utility
  • Wanting the benefit of dynamically-updated styles when there are changes in the brand guidelines. Instead, use tokens
  • Color values are repeated throughout the page. Instead, request a new token

Note that the values on this page:

  • May not have a long lifespan
  • May alter more frequently
  • May be used for a wide variety of purposes

Requesting a Token
If you have a request for a token that is missing, you can submit a request using the Feature Request Form, or ask in the #cedar-user-support Slack channel. View requirements in the Adding Tokens to the Repository section on the Tokens article.

Developing or Updating Cedar Components
The Cedar team welcomes contributions from the digital community at REI. If you are interested in contributing design or code, please reach out at in Slack at #cedar-user-support, email cedar@rei.com, or talk to your manager.



# Grey Colors

Grey colors support the cohesive use of typography, backgrounds, and borders across the digital ecosystem.

#ffffff
r255 g255 b255


Tokens:
cdr-color-background-lightest
cdr-color-background-form-lightmode
cdr-color-background-form-input-lightmode

#fafafa
r250 g250 b250



Tokens:
cdr-color-background-lighter
cdr-color-text-primary-darkmode
cdr-color-text-form-label-darkmode
cdr-color-border-primary-darkmode

#f7f7f7
r247 g247 b247
Tokens:
cdr-color-background-light

#dadada
r218 g218 b218
Tokens:
cdr-color-border-disabled-lightmode

#b8b8b8
r184 g184 b184


Tokens:
cdr-color-text-disabled-lightmode
cdr-color-text-form-disabled-lightmode
cdr-color-border-secondary-lightmode

#999999
r153 g153 b153


Tokens:
cdr-color-text-secondary-darkmode
cdr-color-text-form-placeholder-darkmode
cdr-color-border-secondary-darkmode

#7a7a7a
r122 g122 b122
Tokens:
N/A

#616161
r97 g97 b97




Tokens:
cdr-color-text-secondary-lightmode
cdr-color-text-form-placeholder-lightmode
cdr-color-text-disabled-darkmode
cdr-color-text-form-disabled-darkmode
cdr-color-border-primary-lightmode

#434343
r67 g67 b67
Tokens:
N/A

#292929
r41 g41 b41




Tokens:
cdr-color-background-dark
cdr-color-background-form-darkmode
cdr-color-background-form-input-darkmode
cdr-color-text-primary-lightmode
cdr-color-text-form-label-lightmode

#1a1a1a
r26 g26 b26
Tokens:
cdr-color-background-darker


# Tan Colors

Tan or brand colors are core to the co-op. They’re often used as backgrounds when an experience calls for a stronger brand impression.

#faf9f5
r250 g249 b245
Tokens:
N/A

#f1efe4
r241 g239 b228
Tokens:
N/A


# Blue Colors

Blue colors are used in a variety of scenarios such as prompting user actions, communicating informational messaging, and indicating links within body copy.

#5197cd
r81 g151 b205
Tokens:
cdr-color-text-link-darkmode

#3278ae
r50 g120 b174
Tokens:
cdr-color-text-link-lightmode

#2b6692
r43 g102 b146
Tokens:
cdr-color-border-selected-lightmode

#1e4e72
r30 g78 b114
Tokens:
N/A


# Green Colors

Green colors are used in a variety of scenarios such as providing feedback for successful form submission.

#edf7ee
r237 g247 b238
Tokens:
N/A

#6c9f71
r108 g159 b113
Tokens:
N/A

#367c3c
r54 g124 b60
Tokens:
N/A


# Red Colors

Red colors are used in a variety of scenarios such as announcing sale items and communicating error messaging.

#e86868
r232 g104 b104
Tokens:
cdr-color-text-error-darkmode
cdr-color-border-error-lightmode

#c83232
r200 g50 b50
Tokens:
N/A

#b5292b
r181 g41 b43
Tokens:
cdr-color-text-error-lightmode

#a12024
r161 g32 b36
Tokens:
N/A


# Yellow Colors

Yellow colors are used in a variety of scenarios such as providing feedback for warning messages.

#fff5be
r255 g245 b190
Tokens:
N/A

#f8b877
r248 g184 b119
Tokens:
N/A

#c77523
r199 g117 b35
Tokens:
N/A