# PNW Select Rope — Pacific Northwest Palette

## Overview

A cool, regionally rooted palette that leans into the PNW identity with deep forest greens and river stone neutrals, anchored by the logo's black and cream. Copper serves as the action color, creating warm contrast against the cool base.

---

## Color System

### Core Palette

| Swatch | Name        | Hex       | RGB             |
|--------|-------------|-----------|-----------------|
| ⬛     | Night       | `#0D0D0B` | 13, 13, 11      |
| 🟫     | Deep Fir    | `#2B3D2F` | 43, 61, 47      |
| 🟩     | Forest      | `#4A6B52` | 74, 107, 82     |
| ⬜     | River Stone | `#8B9A8E` | 139, 154, 142   |
| 🟨     | Wheat       | `#D4C4A0` | 212, 196, 160   |
| ⬜     | Cream       | `#F2E8D5` | 242, 232, 213   |

### Action Color

| Swatch | Name   | Hex       | RGB             |
|--------|--------|-----------|-----------------|
| 🟧     | Copper | `#C4813A` | 196, 129, 58    |

---

## Usage Roles

### Backgrounds

| Role      | Color     | Hex       | Usage                                      |
|-----------|-----------|-----------|---------------------------------------------|
| Primary   | Night     | `#0D0D0B` | Main site background, hero sections, headers |
| Secondary | Deep Fir  | `#2B3D2F` | Cards, footer, secondary sections            |
| Light     | Cream     | `#F2E8D5` | Light-mode backgrounds, content areas        |

### Typography

| Role    | Color       | Hex       | Usage                                       |
|---------|-------------|-----------|----------------------------------------------|
| On Dark | Cream       | `#F2E8D5` | Body text and headings on dark backgrounds    |
| On Light| Night       | `#0D0D0B` | Body text and headings on light backgrounds   |
| Muted   | River Stone | `#8B9A8E` | Captions, timestamps, secondary labels        |

### Interactive Elements

| Role     | Color   | Hex       | Usage                                        |
|----------|---------|-----------|-----------------------------------------------|
| CTA      | Copper  | `#C4813A` | Buttons, links, hover states, sale badges      |
| Borders  | Forest  | `#4A6B52` | Card borders, input outlines, section dividers |
| Dividers | Wheat   | `#D4C4A0` | Horizontal rules, subtle separators            |

---

## Contrast Ratios (WCAG)

| Pair                      | Ratio  | AA   | AAA  |
|---------------------------|--------|------|------|
| Cream on Night            | 17.4:1 | Pass | Pass |
| Night on Cream            | 17.4:1 | Pass | Pass |
| Copper on Night           | 5.8:1  | Pass | Pass |
| Cream on Deep Fir         | 10.9:1 | Pass | Pass |
| Cream on Forest           | 5.7:1  | Pass | Pass |

---

## Application Notes

- **Logo placement**: Logo renders in Cream (`#F2E8D5`) on Night (`#0D0D0B`) — no modification needed.
- **CTA buttons**: Copper background with Night text for maximum readability.
- **Links**: Copper for inline links on both dark and light backgrounds.
- **Hover states**: Lighten Copper ~10% for hover, or use Wheat as a subtle background shift.
- **Badges/tags**: Copper text on Copper at 15% opacity background (`rgba(196, 129, 58, 0.15)`).
- **Photography direction**: Forest landscapes, misty PNW terrain, rope close-ups with natural green tones.