This is Cedar’s legacy site. Information may be outdated.
Go to Cedar's new documentation site for the latest features and support.

Color

# Overview

Color is one of the most important attributes of brand expression. The Cedar Design System color palette focuses on a primary color of natural and comforting green, with a supporting set of secondary colors that reflects REI's brand expression of the colors of nature. These brand colors are reflected through color tokens in our UI and other places.

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

The color values in Cedar have been carefully selected and tested to meet WCAG accessibility requirements for contrast and color. Using colors outside of this palette may result in an inaccessible experience for some users, and should be avoided when possible. Learn more about accessibility in the Cedar Design System in the Accessibility Foundation article as well as throughout the component guidelines.



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
  • For Android: cdr_color_text_primary
  • For iOS: CdrColorTextPrimary

For more information on naming structure for design token, visit the Design Tokens overview.

Button Color Tokens

cdr-color-text-button-primary

Text color for primary buttons

#f9f8f6

cdr-color-text-button-primary-hover

Text color for the hover state of primary buttons

#1f513f

cdr-color-text-button-primary-active

Text color for the active state of primary buttons

#f9f8f6

cdr-color-text-button-primary-disabled

Text color for disabled primary buttons

#ffffff

cdr-color-text-button-secondary

Text color for secondary buttons

#4e4d49

cdr-color-text-button-secondary-hover

Text color for the hover state of secondary buttons

#4e4d49

cdr-color-text-button-secondary-active

Text color for the active state of secondary buttons

#f9f8f6

cdr-color-text-button-secondary-disabled

Text color for disabled secondary buttons

#d1cbbd

cdr-color-text-button-dark

Text color for the dark button

#f9f8f6

cdr-color-text-button-dark-hover

Text color for the hover state of the dark button

#4e4d49

cdr-color-text-button-dark-active

Text color for the active state of the dark button

#f9f8f6

cdr-color-text-button-dark-disabled

Text color for disabled dark buttons

#ffffff

cdr-color-text-button-sale

Text color for the sale button

#ffffff

cdr-color-text-button-sale-hover

Text color for the hover state of the sale button

#c7370f

cdr-color-text-button-sale-active

Text color for the active state of the sale button

#ffffff

cdr-color-text-button-sale-disabled

Text color for disabled sale buttons

#ffffff

cdr-color-background-button-primary-rest

Background color for the primary button

#1f513f

cdr-color-background-button-primary-active

Background color for the active and pressed states of the primary button

#1f513f

cdr-color-background-button-primary-hover

Background color for the hover state of the primary button

#f4f2ed

cdr-color-background-button-primary-icon-alt-hover

Alternate background color for the hover state of the icon button

#f9f8f6

cdr-color-background-button-secondary-rest

Background color for the secondary button

#f9f8f6

cdr-color-background-button-secondary-active

Background color for the active and pressed states of the secondary button

#928b80

cdr-color-background-button-secondary-hover

Background color for the hover state of the secondary button

#f4f2ed

cdr-color-background-button-secondary-disabled

Background color for the disabled state of the secondary button

#f9f8f6

cdr-color-background-button-dark-rest

Background color for the dark button

#4e4d49

cdr-color-background-button-dark-active

Background color for the active and pressed states of the dark button

#4e4d49

cdr-color-background-button-dark-hover

Background color for the hover state of the dark button

#edeae3

cdr-color-background-button-sale-rest

Background color for the sale button

#c7370f

cdr-color-background-button-sale-active

Background color for the active and pressed states of the sale button

#c7370f

cdr-color-background-button-sale-hover

Background color for the hover state of the sale button

#f4f2ed

cdr-color-background-button-default-disabled

Default disabled border color

#dcd6cb

cdr-color-background-button-icon-only-active

Background color for the icon only button active and focus states

#f4f2ed

cdr-color-border-button-primary-rest

Border color for the primary button

#1f513f

cdr-color-border-button-primary-active

Border color for the active and pressed states of the primary button

#1f513f

cdr-color-border-button-primary-active-inset

Inset border for the active state of the primary button

#f4f2ed

cdr-color-border-button-primary-hover

Border color for the hover state of the primary button

#1f513f

cdr-color-border-button-secondary-rest

Border color for the secondary button

#928b80

cdr-color-border-button-secondary-active

Border color for the active and pressed states of the secondary button

#928b80

cdr-color-border-button-secondary-active-inset

Inset border for the active state of the secondary button

#f4f2ed

cdr-color-border-button-secondary-hover

Border color for the hover state of the secondary button

#4e4d49

cdr-color-border-button-dark-rest

Border color for the dark button

#4e4d49

cdr-color-border-button-dark-active

Border color for the active and pressed states of the dark button

#4e4d49

cdr-color-border-button-dark-active-inset

Inset border for the active state of the dark button

#edeae3

cdr-color-border-button-dark-hover

Border color for the hover state of the dark button

#4e4d49

cdr-color-border-button-sale-rest

Border color for the sale button

#c7370f

cdr-color-border-button-sale-active

Border color for the active and pressed states of the sale button

#c7370f

cdr-color-border-button-sale-active-inset

Inset border for the active state of the sale button

#f4f2ed

cdr-color-border-button-sale-hover

Border color for the hover state of the sale button

#c7370f

cdr-color-border-button-default-disabled

Default disabled border color

#dcd6cb

cdr-color-border-button-icon-only-active

Border color for the icon only button active and focus states

#928b80

Chip Color Tokens

cdr-color-text-chip-default

Text color for default chips

#4e4d49

cdr-color-text-chip-disabled

Text color for default chips

#d1cbbd

cdr-color-background-chip-default-rest

Background color for chips

#ffffff

cdr-color-background-chip-default-disabled

Background color for disabled chips

#ffffff

cdr-color-background-chip-default-hover

Background color for hovered chips

#f9f8f6

cdr-color-background-chip-default-focus

Background color for focused chips

#ffffff

cdr-color-background-chip-default-active

Background color for active chips

#edeae3

cdr-color-background-chip-default-selected

Background color for selected chips

#edeae3

cdr-color-background-chip-default-selected-hover

Background color for hovered selected chips

#edeae3

cdr-color-background-chip-default-selected-focus

Background color for focused selected chips

#edeae3

cdr-color-border-chip-default-rest

Border color for chips

#928b80

cdr-color-border-chip-default-disabled

Border color for disabled chips

#dcd6cb

cdr-color-border-chip-default-hover

Border color for hovered chips

#928b80

cdr-color-border-chip-default-focus

Border color for focused chips

#4e4d49

cdr-color-border-chip-default-active

Border color for active chips

#4e4d49

cdr-color-border-chip-default-selected-rest

Border color for selected chips

#4e4d49

cdr-color-border-chip-default-selected-hover

Border color for hovered selected chips

#726d64

cdr-color-border-chip-default-selected-focus

Border color for focused selected chips

#4e4d49

Text Color Tokens

cdr-color-text-primary

The default, primary text color

rgba(12, 11, 8, 0.75)

cdr-color-text-secondary

The secondary text color

rgba(66, 59, 47, 0.75)

cdr-color-text-emphasis

The emphasis text color

rgba(3, 3, 1, 0.9)

cdr-color-text-brand

Text set in our primary brand color

#1f513f

cdr-color-text-sale

The color of sale text

#c7370f

cdr-color-text-inverse

Text color on dark background

#f9f8f6

cdr-color-text-disabled

The color of text when it is disabled

#d1cbbd

cdr-color-text-success

Color of success messages

#2e6b34

cdr-color-text-warning

Color of warning messages

#854714

cdr-color-text-error

Color of error messages

#811823

cdr-color-text-info

Color of informational messages

#1b437e

cdr-color-text-message-error

Color of error messages

#bb4045

Input Color Tokens

cdr-color-text-input-default

Default text color used in form elements

#20201d

cdr-color-text-input-label

Color of label text used in form elements

rgba(12, 11, 8, 0.75)

cdr-color-text-input-label-disabled

Color of label text used in disabled form elements

#b2ab9f

cdr-color-text-input-placeholder

Text color of placeholder text within forms

rgba(66, 59, 47, 0.75)

cdr-color-text-input-required

Text color of required label within forms

rgba(12, 11, 8, 0.75)

cdr-color-text-input-optional

Text color of optional label within forms

rgba(66, 59, 47, 0.75)

cdr-color-text-input-disabled

Disabled text color used in form elements

#d1cbbd

cdr-color-text-input-filled

Text color used in filled forms

#20201d

cdr-color-text-input-help

Help text color used in forms

rgba(66, 59, 47, 0.75)

cdr-color-text-input-error

Error text color used in forms

#b33322

cdr-color-background-label-default-hover

Hover state of a checkbox or radio label background

#f9f8f6

cdr-color-background-label-default-active

Active state of a checkbox or radio label background

#edeae3

cdr-color-background-label-default-focus

Focused state of a checkbox or radio label background

#f9f8f6

cdr-color-background-label-secondary-hover

Hover state of a checkbox or radio label background on secondary

rgba(255, 255, 255, 0.75)

cdr-color-background-label-secondary-active

Active state of a checkbox or radio label background on secondary

#ffffff

cdr-color-background-label-secondary-focus

Focused state of a checkbox or radio label background on secondary

rgba(255, 255, 255, 0.75)

cdr-color-background-input-default

Default background color on form elements

rgba(244, 242, 237, 0.15)

cdr-color-background-input-secondary

Default background color on form elements

rgba(255, 255, 255, 0.85)

cdr-color-background-input-error

Error background color on form elements

rgba(255, 242, 242, 0.75)

cdr-color-background-input-default-hover

Hover state of a checkbox or radio element background

#f9f8f6

cdr-color-background-input-default-active

Active state of a form element background

#f9f8f6

cdr-color-background-input-default-selected

Selected state of a checkbox or radio element background

#4e4d49

cdr-color-background-input-secondary-active

Active state of an input or select element background on secondary

#ffffff

cdr-color-background-input-default-selected-hover

Hover state of a selected checkbox or radio element background

#928b80

cdr-color-background-input-default-disabled

Disabled form element background

#f9f8f6

cdr-color-background-input-default-selected-focus

Selected focus state of checkbox or radio element background

#928b80

cdr-color-background-input-default-focus

Focused checkbox or radio form element background

#f9f8f6

cdr-color-border-label-default-focus

Focused border color on checkbox or radio labels

#20201d

cdr-color-border-input-default

Default border color on form elements

#928b80

cdr-color-border-input-error

Error border color on form elements

#b33322

cdr-color-border-input-default-active

Hover/active/focus state of a checkbox or radio element border

#4e4d49

cdr-color-border-input-default-selected

Selected state of a checkbox or radio element border

#4e4d49

cdr-color-border-input-default-focus

Focus state of an input or select element border

#20201d

cdr-color-border-input-default-selected-hover

Hover state of a selected checkbox or radio element border

#4e4d49

cdr-color-border-input-default-hover

Hover state of a checkbox or radio element border

#20201d

cdr-color-border-input-default-disabled

Disabled form element border

#d1cbbd

cdr-color-icon-checkbox-default-selected

Rest state of a selected form icon

#ffffff

cdr-color-icon-checkbox-default-selected-hover

Hover state of a selected form icon

#ffffff

cdr-color-icon-checkbox-default-selected-active

Hover state of a selected form icon

#4e4d49

Link Color Tokens

cdr-color-text-link-rest

Text color for links

#406eb5

cdr-color-text-link-hover

Text color for the hover state of links

#406eb5

cdr-color-text-link-active

Text color for the active and pressed states of links

#0b2d60

cdr-color-text-link-disabled

Disabled text color of links

#d1cbbd

cdr-color-text-link-visited

Text color of visited links

#406eb5

cdr-color-border-link-rest

Border color for underlined links

#406eb5

cdr-color-border-link-hover

Border color for the hover state of underlined links

#406eb5

cdr-color-border-link-active

Border color for the active and pressed states of underlined links

#0b2d60

cdr-color-border-link-disabled

Disabled border color of underlined links

#dcd6cb

cdr-color-border-link-visited

Border color of visited underlined links

#406eb5

Rating Color Tokens

cdr-color-text-rating-default

Text color for ratings

rgba(12, 11, 8, 0.75)

cdr-color-text-rating-hover

Text color for the hover state of ratings

#406eb5

cdr-color-text-rating-separator

Text color for the separator in ratings

#b2ab9f

cdr-color-background-rating-star-default

The defaul background color of the rating star icon

#f9f8f6

cdr-color-background-rating-star-highlighted

Background color for the highlighted rating icon

#ffd280

cdr-color-border-rating-star-default

Default border color for the unhighlighted rating icon

#928b80

cdr-color-border-rating-star-highlighted

Border color for the highlighted rating icon

#bd7b2d

Tabs Color Tokens

cdr-color-text-tab-rest

Text color for tabs

rgba(66, 59, 47, 0.75)

cdr-color-text-tab-active

Text color for the active and pressed states of tabs

rgba(12, 11, 8, 0.75)

cdr-color-text-tab-hover

Text color for the hover state of tabs

#406eb5

cdr-color-text-tab-disabled

Disabled text color of tabs

#d1cbbd

cdr-color-border-tab-keyline-rest

The border color of tab keyline

#928b80

cdr-color-border-tab-keyline-active

Border color for the active tab keyline

#406eb5

cdr-color-border-tab-keyline-active-alt

Alternative border color for the active tab keyline

#78b1e8

cdr-color-border-tab-keyline-hover

Border color for the tab keyline hover state

#406eb5

cdr-color-border-tab-keyline-hover-alt

Alternative border color for the tab keyline hover state

#78b1e8

cdr-color-border-tab-keyline-disabled

Border color for the disabled tab keyline

#d1cbbd

Toggle button Color Tokens

cdr-color-text-toggle-button-default-rest

The text color of a toggle button on rest

#4e4d49

cdr-color-background-toggle-button-default-rest

The background color of a toggle button on rest

#f9f8f6

cdr-color-background-toggle-button-default-hover

The background color of a toggle button on hover

#edeae3

cdr-color-background-toggle-button-default-focus

The background color of a toggle button on focus

#edeae3

cdr-color-background-toggle-button-default-selected-rest

The background color of a selected toggle button on rest

#ffffff

cdr-color-background-toggle-button-default-selected-hover

The background color of a selected toggle button on hover

#ffffff

cdr-color-border-toggle-button-default-focus

Border color for a toggle button that is not selected on focus

#4e4d49

cdr-color-border-toggle-button-default-selected-rest

Border color for a selected toggle button on rest

#4e4d49

cdr-color-border-toggle-button-default-selected-focus

Border color for a selected toggle on focus

#4e4d49

Tooltip Color Tokens

cdr-color-text-tooltip-default

Text color for tooltips

#f9f8f6

cdr-color-background-tooltip-default

Background color for tooltips

#373734

cdr-color-border-tooltip-default

Border color for tooltips

#f9f8f6

Background Color Tokens

cdr-color-background-primary

The default, primary background color of most pages

#ffffff

cdr-color-background-secondary

An alternate, secondary background color used on some pages

#f4f2ed

cdr-color-background-brand-spruce

An alternate, spruce brand background color used on some pages

#1f513f

cdr-color-background-message-default-01

Background color variant for default messages

#f9f8f6

cdr-color-background-message-default-02

Background color variant for default messages

#e8e0ce

cdr-color-background-message-success

Background color for success messages

#ecf9e6

cdr-color-background-message-success-01

Background color variant for success messages

#f4fbf5

cdr-color-background-message-success-02

Background color variant for success messages

#d5e6cb

cdr-color-background-message-warning

Background color for warning messages

#fdf6e2

cdr-color-background-message-warning-01

Background color variant for warning messages

#fefcf1

cdr-color-background-message-warning-02

Background color variant for warning messages

#f5e9b7

cdr-color-background-message-error

Background color for error messages

#fcefe8

cdr-color-background-message-error-01

Background color variant for error messages

#fdf7f7

cdr-color-background-message-error-02

Background color variant for error messages

#eecbc1

cdr-color-background-message-info

Background color for informational messages

#e2f4fe

cdr-color-background-message-info-01

Background color variant for informational messages

#edf4f5

cdr-color-background-message-info-02

Background color variant for informational messages

#c2d8db

cdr-color-background-message-sale

Background color for sale messages

#c7370f

Accordion Color Tokens

cdr-color-background-accordion-hover

Background color for the hover state of accordion

#f9f8f6

Pagination Color Tokens

cdr-color-background-pagination-hover

Background color for the hover state of pagination

#f9f8f6

cdr-color-background-pagination-keyline

Background color for the pagination keyline

#406eb5

Modal Color Tokens

cdr-color-background-modal-overlay

The background overlay for modal

rgba(244, 242, 237, 0.85)

Switch Color Tokens

cdr-color-background-switch-default-rest

The background color of a switch on rest

#f9f8f6

cdr-color-background-switch-default-hover

The background color of a switch on hover

#f9f8f6

cdr-color-background-switch-default-focus

The background color of a switch on focus

#f9f8f6

cdr-color-background-switch-selected-default-rest

The background color of a selected switch on rest

#4e4d49

cdr-color-background-switch-selected-default-hover

The background color of a selected switch on hover

#373734

cdr-color-background-switch-selected-default-focus

The background color of a selected switch on focus

#373734

cdr-color-background-switch-handle-default-rest

Background color of a switch handle background when the switch is not selected on rest

#dcd6cb

cdr-color-background-switch-handle-default-hover

Color of a switch handle background when the switch is not selected on hover

#edeae3

cdr-color-background-switch-handle-default-focus

Color of a switch handle background when the switch is not selected on focus

#dcd6cb

cdr-color-background-switch-handle-selected-default-rest

Color of a switch handle background when the switch is not selected on rest

#dcd6cb

cdr-color-background-switch-handle-selected-default-hover

Color of a switch handle background when the switch is not selected on hover

#dcd6cb

cdr-color-background-switch-handle-selected-default-focus

Color of a switch handle background when the switch is not selected on focus

#dcd6cb

cdr-color-border-switch-default-hover

Border color for a switch that is not selected on hover

#4e4d49

cdr-color-border-switch-handle-default-rest

Color of a switch handle border when the switch is not selected on rest

#dcd6cb

cdr-color-border-switch-handle-default-hover

Color of a switch handle border when the switch is not selected on hover

#4e4d49

cdr-color-border-switch-handle-default-focus

Color of a switch handle border when the switch is not selected on focus

#dcd6cb

cdr-color-icon-switch-selected-default-rest

Color of a switch icon when the switch is selected

#dcd6cb

cdr-color-icon-switch-selected-default-hover

Color of a switch icon when the switch is selected on hover

#dcd6cb

cdr-color-icon-switch-selected-default-focus

Color of a switch icon when the switch is selected on focus

#dcd6cb

Table Color Tokens

cdr-color-background-table-header

The background color of table headers

#f4f2ed

cdr-color-background-table-row

The background color of table rows

#ffffff

cdr-color-background-table-row-alt

An alternate row color to aid grouping row data

#f9f8f6

cdr-color-border-table-default

The border color of table rows and their corresponding data cells

#dcd6cb

cdr-color-border-table-head

Border color separating complex table heads

#928b80

Toggle group Color Tokens

cdr-color-background-toggle-group-default-rest

The background color of a toggle group on rest

#f9f8f6

Border Color Tokens

cdr-color-border-primary

Default border color for separating content

#dcd6cb

cdr-color-border-secondary

An alternate, secondary background color used on some pages

#928b80

cdr-color-border-success

Border color for success elements

#3b8349

cdr-color-border-warning

Border color for warning elements

#b68b37

cdr-color-border-error

Border color for error elements

#bb4045

cdr-color-border-info

Border color for informational elements

#406eb5

cdr-color-border-message-default-01

Border color variant for default messages

#726d64

cdr-color-border-message-default-02

Border color variant for default messages

#e8e0ce

cdr-color-border-message-success-01

Border color variant for success messages

#3b8349

cdr-color-border-message-success-02

Border color variant for success messages

#d5e6cb

cdr-color-border-message-warning-01

Border color variant for warning messages

#b68b37

cdr-color-border-message-warning-02

Border color variant for warning messages

#f5e9b7

cdr-color-border-message-error-01

Border color variant for error messages

#bb4045

cdr-color-border-message-error-02

Border color variant for error messages

#eecbc1

cdr-color-border-message-info-01

Border color variant for informational messages

#408e86

cdr-color-border-message-info-02

Border color variant for informational messages

#c2d8db

Icon Color Tokens

cdr-color-icon-default

The default icon color

#928b80

cdr-color-icon-emphasis

Emphasis or darkest icon color on a light background

#4e4d49

cdr-color-icon-link

The icon link color

#406eb5

cdr-color-icon-disabled

The disabled icon color

#dcd6cb

cdr-color-icon-message-default

The default message icon color

#726d64

cdr-color-icon-message-success

The success message icon color

#3b8349

cdr-color-icon-message-warning

The warning message icon color

#b68b37

cdr-color-icon-message-error

The error message icon color

#bb4045

cdr-color-icon-message-info

The informational message icon color

#408e86

# 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 (opens new window).

# 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 color and background color tokens have been chosen to ensure that any combination of them is accessible. By using color tokens semantically you can ensure that your application remains accessible as the system is updated. Mixing in non-Cedar color values may result in inaccessible combinations. 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.