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