FAQs

What is Cedar?

Read about what we offer as a design system and as a team.

Why aren't my styles showing up?

Read about how to install required core Cedar styles.

I am on a team that doesn’t directly consume Cedar, what do I use?

If your team cannot directly use and consume Vue components, you can use component variables or tokens

What browsers are currently supported?

View Cedar's browser targets on GitHub.

How can I best load CSS on my page?

Cedar distributes its CSS as individual assets and how you include CSS depends on your tech stack. Typically we recommend loading each required asset once in your page's entry point. Read more about CSS.

What are tokens?

Tokens are an evergreen set of variables mapped to the style attributes that define the foundation of REI's visual language, including color, typography, and spacing. Tokens are maintained and distributed by Cedar—just fetch the latest version to stay in sync with the visual language of the co-op. Read more about tokens.

How do I know when to use tokens vs components vs patterns?

• Use tokens when you are customizing the style and functionality of specific elements on a page. For example, if you are designing for a desktop web experience and adding text into a card component, use our text tokens to specify the font family, size, style, weight, height and spacing of the text. Read more about tokens
• Use components when you are adding a functional and reusable element to the page such as buttons, cards, radio buttons and tabs. Customize component styles with modifiers and tokens
• Use patterns to guide your decisions when you need to solve a common design problem such as presenting alerts, deciding on form input types, offering form validation and etc. Patterns may recommend you use different components in response to common design problem variations

How can I stop Cedar styles from overriding my custom styles?

We see this fairly often and it's typically from one of two causes:

1. Check to make sure your app and all its dependencies are loading the same version of cedar. Extra versions of Cedar will typically bundle their CSS lower in the cascade and result in styles being overridden.
2. Similarly, check that you are only importing a Cedar component's style asset once per page. For example, if you are importing cdr-button.css in your page's entry point but also in a child component you may run in to overridden style issues.

How can I contribute to Cedar?

Read more about contributing to Cedar.

What if Cedar doesn't have what I'm looking for/ how can I build my own Cedar-compatible components?

If you don’t see what you’re looking for in components and it’s not outlined in patterns, feel free to reach out to us on Slack. You can also attend our weekly office hours to make sure we don’t have any direct solutions for you. If no components or patterns are recommended, you can learn how to build your own Cedar-compatible components or customize styling on a page with tokens.

When should I override Cedar?

Read more about overriding Cedar.

Where can I find mobile native typefaces?

Our two primary typefaces, Stuart and Graphik are available in Self-Service (be sure to get the Digital-specific TTF version).

Download the iOS native typeface SF Pro from Apple. Then call IT to approve the download.

How can I access Cedar libraries in Figma?

All Cedar-provided libraries are pre-loaded when you create a new file within the REI Figma ecosystem. For more information on Cedar UI libraries, check out this tutorial.

How can I add a new icon to the library?

1. Ask yourself if this icon has value being a shared resource—will other teams use it?
2. Then make sure we don’t cover your use case with one of our other icons.

If none of the icons satisfy your use case, copy and paste our standard icon grid into your own Figma file. Then, go ahead and design your icon according to the icon design standards we currently follow. Let the Cedar team know what you would like to add by messaging us in our Slack channel or attending our office hours.

Do you store past Cedar version release notes?

Find past release notes in the What's new section.

Do we have information about our deprecated items?

Yes! View a list of deprecated items.

Do we have guidelines for the hand-off process between designers and developers?

Sure do. Check out our article on the hand-off process here.

Do we have copy or content guidelines?

You can find REI’s UX copy best practices here.

Where can I find illustrations?

Illustrations are not currently part of Cedar, but they’re an evolving part of the REI brand expression. Request custom illustrations here.

How can I get additional help from Cedar?

We are happy to answer questions and support you as you design or develop at REI. Contact us by messaging us in our Slack channel or attending our office hours. Reach out to us in Slack for an invite to our office hours if needed.