Cedar supports multiple tools and consumption methods. Reference the information below for an overview of the system parts and determine how to use Cedar in your project.
The Cedar UI toolkit is distributed through shared libraries in Figma, and includes all published components and foundational styles.
For more information about using the UI Toolkit, visit the Getting Started for Designers article.
Design Tokens
Design tokens are special variables used to maintain a scalable visual system for UI development and brand consistency. Cedar design tokens store the visual design attributes that define the foundation of REI’s visual language, including color, typography, and spacing.
Learn more about design tokens in the Design Tokens Overview article.
Components
Components use Cedar’s tokens and design foundations to distribute code templates that extend basic HTML elements and encapsulate reusable code.
These custom markup elements represent specific portions of the user interface. When used in your application, they will help ensure the UI remains consistent with REI’s digital display standards.
For example:
<cdr-link href=”rei.com”>CdrLink Component</cdr-link>
Component Variables
Component variables are available for a subset of Cedar components. These SCSS or LESS mixins extend design tokens and define additional specific variables that are used to display Cedar components.
For example:
cdr-link-base-mixin would be used to style an element like a CdrLink component.
Learn more in the Component Variables article.
Documentation Site
The documentation for each component and foundational style includes design guidelines, do’s and don’ts, considerations for accessibility, and API instructions for developers.
| Features | Requirements of usage |
|---|
| Design Tokens | - Versioned and maintained by the design systems team
- Semantic relationship to your content rather than to design
- Represented in the UI Toolkit
- Consistent release schedule
- Up-to-date with digital brand standards
- Distributed as SCSS, LESS, JSON, commonJS, or es6 module exports
- Documented
- Quick to implement
- Compatible and can be combined with all other Cedar-distributed display assets
| - Usage requires a SCSS or LESS preprocessor for styles
- Distributed as a pull model which your team integrates and maintains within your project
- Users are required to stay within one major version of the current release
- Support provided only for the current REI.com-supported browser matrix
|
|---|
| Vue components (recommended) | - Versioned and maintained by the design systems team
- Represented in the UI Toolkit as a named symbol
- Consistent release schedule
- Self-contained and encapsulated markup, behavior, and styles
- Up-to-date with digital brand standards
- Documented
- Meets WCAG AA standards for display and markup pertaining to the component without context to the page
- Support for server and client rendering
- Distributed as commonJS or es module exports
- Precompiled assets do not require a CSS preprocessor
- Tree-shakeable assets
- Quick to implement
- Compatible and can be combined with all other Cedar-distributed display assets
| - Requires Vue.js
- Distributed as a pull model which your team integrates and maintains within your project
- Support provided only for:
- Current and previous major versions
- Standard micro site architecture framework, expectations, and standards
- Current REI.com supported browser matrix
|
|---|
| Component variables | - Versioned and maintained by the design systems team
- Represented in the UI Toolkit as a named symbol
- Consistent release schedule
- Up-to-date with digital brand standards
- Documented markup contract
- Meets WCAG AA standards for specific proprietary display only
- Distributed as SCSS or LESS mixins
- Compatible and can be combined with all other Cedar-distributed display assets
| - Requires SCSS or LESS preprocessor
- Distributed as a pull model which your team integrates and maintains within your project
- Support provided only for:
- Current and previous major versions
- Current REI.com supported browser matrix
|
|---|
