# PNW Select Rope — Steel and Rawhide Palette

## Overview

A cool, premium palette that pairs charcoal steel tones with warm rawhide neutrals for a modern western aesthetic. The most versatile of the three palettes — reads upscale without losing the rugged identity. Copper action color bridges the cool-to-warm transition.

---

## Color System

### Core Palette

| Swatch | Name     | Hex       | RGB             |
|--------|----------|-----------|-----------------|
| ⬛     | Night    | `#0D0D0B` | 13, 13, 11      |
| ⬛     | Gunmetal | `#2A2D30` | 42, 45, 48      |
| ⬜     | Steel    | `#4F5459` | 79, 84, 89      |
| 🟫     | Rawhide  | `#8A7D6B` | 138, 125, 107   |
| 🟨     | Buckskin | `#C6B598` | 198, 181, 152   |
| ⬜     | 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 | Gunmetal | `#2A2D30` | 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   | Rawhide | `#8A7D6B` | Captions, timestamps, secondary labels         |

### Interactive Elements

| Role     | Color    | Hex       | Usage                                        |
|----------|----------|-----------|-----------------------------------------------|
| CTA      | Copper   | `#C4813A` | Buttons, links, hover states, sale badges      |
| Borders  | Steel    | `#4F5459` | Card borders, input outlines, section dividers |
| Dividers | Buckskin | `#C6B598` | 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 Gunmetal         | 12.2:1 | Pass | Pass |
| Cream on Steel            | 7.0: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 Buckskin as a subtle background shift.
- **Badges/tags**: Copper text on Copper at 15% opacity background (`rgba(196, 129, 58, 0.15)`).
- **Premium feel**: Gunmetal-to-Steel gradient zone works well for nav bars and sticky headers.
- **Photography direction**: Close-up gear shots, metal hardware, rope texture on weathered steel or concrete.