Cedar Design System

# Cedar Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by REI. "Cedar Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Cedar Design System
**Owner:** REI
**Official documentation:** https://cedar.rei.com/
**Visual character:** Co-op trail warmth: forest green over sandstone neutrals, Stuart serifs for storytelling, Graphik for gearing up.

---

## Summary

Design system for REI's outdoor retail experiences, focusing on accessibility and sustainability.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Sage Green / Brand | `#295e33` | `--cdr-color-background-brand` | REI brand and primary CTAs |
| Text Primary | `#292929` | `--cdr-color-text-primary` | Primary text |
| Text Secondary | `#616161` | `--cdr-color-text-secondary` | Secondary text |
| White | `#ffffff` | `--cdr-color-background-primary` | Surfaces |
| Sandstone | `#f7f5f2` | `--cdr-color-background-secondary` | Warm subtle background |
| Border | `#dcd6cb` | `--cdr-color-border-primary` | Warm borders |
| Error Red | `#c23934` | `--cdr-color-text-error` | Errors |
| Success | `#157e42` | `--cdr-color-text-success` | Success |

## Typography

- **Display:** Stuart — weights 400, 500 — `Stuart, Georgia, serif`
- **Body:** Graphik — weights 400, 500, 600 — `Graphik, 'Helvetica Neue', sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-serif-800 | `38px` | `44px` |
| heading-serif-600 | `29px` | `34px` |
| heading-400 | `20px` | `25px` |
| body | `16px` | `22px` |
| small | `14px` | `20px` |

## Spacing

Base unit: `8px (half-x/one-x)`

Scale: `8px` · `16px` · `24px` · `32px` · `48px` · `64px`

## Corner radius

| Name | Value |
| --- | --- |
| softer | `4px` |
| soft | `8px` |
| round | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| raised | `0 2px 4px 0 rgba(12,11,8,0.2)` |

## Quick start (CSS)

```css
/* Cedar Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://cedar.rei.com/ */

:root {
  /* Color */
  --cdr-color-background-brand: #295e33; /* REI brand and primary CTAs */
  --cdr-color-text-primary: #292929; /* Primary text */
  --cdr-color-text-secondary: #616161; /* Secondary text */
  --cdr-color-background-primary: #ffffff; /* Surfaces */
  --cdr-color-background-secondary: #f7f5f2; /* Warm subtle background */
  --cdr-color-border-primary: #dcd6cb; /* Warm borders */
  --cdr-color-text-error: #c23934; /* Errors */
  --cdr-color-text-success: #157e42; /* Success */

  /* Typography */
  --font-display: Stuart, Georgia, serif;
  --font-body: Graphik, 'Helvetica Neue', sans-serif;

  /* Type scale */
  --text-heading-serif-800: 38px /* line-height 44px */;
  --text-heading-serif-600: 29px /* line-height 34px */;
  --text-heading-400: 20px /* line-height 25px */;
  --text-body: 16px /* line-height 22px */;
  --text-small: 14px /* line-height 20px */;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;

  /* Radius */
  --radius-softer: 4px;
  --radius-soft: 8px;
  --radius-round: 9999px;

  /* Elevation */
  --shadow-raised: 0 2px 4px 0 rgba(12,11,8,0.2);
}
```

## Engineering profile

- **Ships for:** Vue
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Cedar Design System by REI — Design system for REI's outdoor retail experiences, focusing on accessibility and sustainability. Character: Co-op trail warmth: forest green over sandstone neutrals, Stuart serifs for storytelling, Graphik for gearing up. Use a primary colour near #295e33, the typeface "Graphik" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px (half-x/one-x) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Cedar Design System documentation](https://cedar.rei.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/rei-cedar) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._