Color

Color builds an emotional connection to our REI Co-op brand

Understanding brand expression

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

Color swatches featuring REI's primary and secondary brand palettes.

Cedar offers a systematic, digital-first way to apply color. For a closer look at how color is expressed throughout the co-op, check out the REI Brand Guidelines.

Collage of REI brand collateral, featuring images, illustrations, and

Color in Cedar

We manage and distribute color in Cedar by using design tokens. These atomic pieces of information codify design-related values such as colors, fonts, spaces, animations and more.

Color design tokens

Cedar uses tokens to assign specific jobs to specific colors. This process decouples the role a color plays from its hex value. It allows designers to quickly identify the right color by referencing the token name. For example, instead of coding all instances of a background color as #F4F2ED, engineers might use the token cdr-color-background-secondary.

Tokens are useful for a few reasons:

They eliminate the need to hard-code hex values and any errors associated with that process
Their naming conventions provide guidance on how to apply color
They make it much easier to update colors as the brand evolves
They open the door to functionality like theming

For more info on how to apply color tokens, see our Cedar Color Tutorial in Figma.

Best practices

An abstraction of a web page with a larger dark section compared to a smaller white section below.

Don't