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.

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

Text set in our primary brand color

#113731

cdr-color-text-sale

The color of sale text

#cc0000

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-input-default

Default text color used in form elements

rgba(12, 11, 8, 0.75)

cdr-color-text-input-label

Color of label text used in form elements

rgba(12, 11, 8, 0.75)

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

rgba(12, 11, 8, 0.75)

cdr-color-text-input-help

Help text color used in filled forms

rgba(12, 11, 8, 0.75)

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-text-tooltip-default

Text color for tooltips

#f9f8f6

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

#225c4e

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

#cc0000

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-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-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-tooltip-default

Background color for tooltips

#373734

cdr-color-border-tooltip-default

Border color for tooltips

#f9f8f6

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

#406eb5

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

Background color for success messages

#ecf9e6

cdr-color-background-warning

Background color for warning messages

#fdf6e2

cdr-color-background-error

Background color for error messages

#fcefe8

cdr-color-background-info

Background color for informational messages

#e2f4fe

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-background-input-default

Default background color on form elements

rgba(255, 255, 255, 0.75)

cdr-color-background-input-default-hover

Hover state of a form background

#f9f8f6

cdr-color-background-input-default-selected

Selected state of a form background

#406eb5

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

Hover state of a selected form background

#b7e0fa

cdr-color-background-input-default-disabled

Disabled form background

#f9f8f6

cdr-color-background-button-primary-rest

Background color for the primary button

#225c4e

cdr-color-background-button-primary-active

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

#225c4e

cdr-color-background-button-primary-hover

Background color for the hover state of the primary button

#c7dfd1

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

#cc0000

cdr-color-background-button-sale-active

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

#cc0000

cdr-color-background-button-sale-hover

Background color for the hover state of the sale button

#fde2e2

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-background-accordion-hover

Background color for the hover state of accordion

#f9f8f6

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

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

Alternate background color for the hover state of the icon button

#f9f8f6

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-background-modal-overlay

The background overlay for modal

rgba(244, 242, 237, 0.85)

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

#4b8b50

cdr-color-border-warning

Border color for warning elements

#c77523

cdr-color-border-error

Border color for error elements

#b5292b

cdr-color-border-info

Border color for informational elements

#406eb5

cdr-color-border-input-default

Default border color on form elements

#928b80

cdr-color-border-input-default-active

Active state of a form border

#406eb5

cdr-color-border-input-default-selected

Selected state of a form border

#406eb5

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

Hover state of a selected form border

#406eb5

cdr-color-border-input-default-hover

Hover state of a form border

#928b80

cdr-color-border-input-default-disabled

Disabled form border

#dcd6cb

cdr-color-border-button-primary-rest

Border color for the primary button

#225c4e

cdr-color-border-button-primary-active

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

#225c4e

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

Inset border for the active state of the primary button

#c7dfd1

cdr-color-border-button-primary-hover

Border color for the hover state of the primary button

#225c4e

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

#cc0000

cdr-color-border-button-sale-active

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

#cc0000

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

Inset border for the active state of the sale button

#fde2e2

cdr-color-border-button-sale-hover

Border color for the hover state of the sale button

#cc0000

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

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

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

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

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

# 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 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.