# PNW Select Rope — Homepage Design Brief

## Purpose

This brief defines everything needed to produce a homepage mockup for PNW Select Rope. The homepage serves as the brand's digital front door for B2B buyers — retailers, distributors, and OEM partners — who are evaluating PNW as a product to carry, distribute, or manufacture under their label. Secondary visitors include event attendees who saw PNW at a tradeshow and want to learn more.

---

## Brand context

PNW Select Rope is a Pacific Northwest-based rope manufacturer that sponsors national-level western performance events including Road to the Horse 2026. The brand sits alongside premium peers like Gist Silversmiths, American Hat Company, and Circle Y. The website must match that positioning — premium, performance-focused, and restrained.

---

## Color system: Steel and Rawhide

### Core palette

| Name | Hex | Role |
|------|-----|------|
| Night | #0D0D0B | Primary page background |
| Gunmetal | #2A2D30 | Cards, secondary surfaces |
| Steel | #4F5459 | Borders, input backgrounds |
| Rawhide | #8A7D6B | Muted text, captions, overlines |
| Buckskin | #C6B598 | Subheadings, dividers |
| Cream | #F2E8D5 | Primary text on dark, light section backgrounds |

### Action color

| Name | Hex | Role |
|------|-----|------|
| Copper | #C4813A | CTA buttons, links, price text, hover states |
| Copper hover | #D4914A | Button hover state |
| Copper bg | rgba(196, 129, 58, 0.15) | Badge/tag backgrounds |

### Secondary accent

| Name | Hex | Role |
|------|-----|------|
| Forest | #4A6B52 | PNW identity accent — footer top border, optional text block accent. Use sparingly. |

---

## Typography

### Fonts

- Headings: Barlow Condensed (700 for hero, 600 for section heads)
- Body: Inter (400 regular, 500 medium)

### Hierarchy on the homepage

| Element | Font | Size | Weight | Case | Color |
|---------|------|------|--------|------|-------|
| Hero headline | Barlow Condensed | 56–72px (desktop), 36–40px (mobile) | 700 | Uppercase | Cream |
| Hero overline | Inter | 12px | 500 | Uppercase, wide tracking | Rawhide |
| Hero subhead | Inter | 18px | 400 | Sentence case | Buckskin |
| Section heading | Barlow Condensed | 24–32px | 600 | Title case | Cream |
| Card title | Barlow Condensed | 18–20px | 600 | Title case | Cream |
| Card description | Inter | 14px | 400 | Sentence case | Buckskin |
| Body text | Inter | 16px | 400 | Sentence case | Cream |
| CTA button text | Inter | 14px | 600 | Uppercase, wide tracking | Night (on Copper bg) |
| Text link | Inter | 14px | 500 | Sentence case | Copper |
| Nav item | Inter | 14px | 500 | Uppercase, wide tracking | Cream |
| Footer text | Inter | 13px | 400 | Sentence case | Rawhide |

---

## Page dimensions

- Desktop: 1440px viewport, content max-width 1280px, side gutters 80px
- Tablet: 768px viewport, side gutters 40px
- Mobile: 375px viewport, side gutters 20px
- Mockup priority: Desktop first, mobile second

---

## Section-by-section specification

### Section 1: Navigation bar

**Position**: Fixed top, full width
**Height**: 64px desktop, 56px mobile
**Background**: Transparent over hero section, transitions to Night (#0D0D0B) at 95% opacity with slight backdrop blur on scroll

**Layout**:
- Left: PNW Select Rope logo (Cream version, max height 40px)
- Center: Primary nav links — Shop, About, Events, Work With Us, Contact
- "Work With Us" has a dropdown on hover: Retailers, Distributors, OEM
- Right: Phone number in Rawhide text (optional), or a "Get in touch" ghost button

**Nav link styling**:
- Default: Cream, uppercase, 14px, Inter medium, wide tracking
- Hover: Copper text color, 150ms transition
- Active page: Copper with 2px bottom border

**Mobile**: Hamburger icon right. Full-screen overlay menu on Night background, centered links at 24px.

---

### Section 2: Hero

**Height**: 80vh minimum desktop, 60vh mobile
**Background**: Full-bleed action photography with Night overlay at 70% opacity

**Photography direction**: Real arena or ranch action — roping, colt starting, or competition. Not posed. Should feel like the photographer was standing at the fence at Road to the Horse. The photo needs enough dark/neutral area (usually sky or arena floor) for the text overlay to sit cleanly without competing with the subject.

**Content — vertically centered, left-aligned, max-width 600px**:
- Overline: "Pacific Northwest rope manufacturer" — Inter 12px, uppercase, wide tracking, Rawhide
- Headline: "BUILT FOR THE ARENA. MADE FOR YOUR BRAND." (or similar) — Barlow Condensed, 56–72px, uppercase, tight tracking, Cream
- Subhead: One line describing the B2B value prop — Inter 18px, Buckskin, max-width 480px
- CTA: Primary button — "See our ropes" — Copper background, Night text, 14px uppercase, 12px vertical / 32px horizontal padding, 8px border radius

**Spacing**: Overline to headline 12px. Headline to subhead 16px. Subhead to CTA 32px.

**No secondary CTA.** One action, one destination. Keep it singular.

---

### Section 3: Product line showcase

**Background**: Night (#0D0D0B)
**Padding**: 96px vertical

**Section heading**: "Our ropes" or "The lineup" — Barlow Condensed, 24–32px, Cream, centered

**Layout**: 3–4 cards in a horizontal row (desktop). 2 columns tablet, 1 column mobile.

**Each card**:
- Background: Gunmetal (#2A2D30)
- Border: 1px solid Steel at 20% opacity
- Border radius: 8px
- Product category photo: 1:1 aspect ratio, flush to card edges (top), showing a representative rope from that category on a dark background
- Category name: Barlow Condensed, 18px, semibold, Cream — below image with 16px padding
- One-line description: Inter 14px, Buckskin — e.g., "Fast tip speed, medium-soft feel"
- Card bottom padding: 16px
- Hover: Border transitions to Buckskin (250ms), image scale 1.02 with overflow hidden
- Click: Links to Shop page filtered to that category

**Categories** (confirm with client):
- Head ropes
- Heel ropes
- Breakaway
- Ranch ropes

**Below the grid**: "Shop all ropes →" text link in Copper, centered, 14px

---

### Section 4: Audience routing CTA

**Background**: Night (#0D0D0B)
**Padding**: 96px vertical

**Section heading**: "Work with PNW" — Barlow Condensed, 24–32px, Cream, centered
**Section subhead**: "Whether you're stocking shelves or building a brand, we're ready." — Inter 16px, Buckskin, centered, max-width 500px

**Layout**: 3 cards side by side (desktop). Stack vertically on mobile.

**Each card**:
- Background: Gunmetal (#2A2D30)
- Border: 1px solid Steel at 20% opacity
- Border radius: 8px
- Padding: 24px
- No image — text only

**Card 1: Retailers**
- Heading: "Become a dealer" — Barlow Condensed, 20px, semibold, Cream
- Description: "Carry PNW Select Rope in your store. Competitive margins, brand support, and a product your customers are already asking for." — Inter 14px, Buckskin, line-height 1.6
- Link: "Apply now →" — Inter 14px, medium, Copper

**Card 2: Distributors**
- Heading: "Distribute PNW" — Barlow Condensed, 20px, semibold, Cream
- Description: "Add a growing rope brand to your line card. Volume pricing, production capacity, and territory support built for scale." — Inter 14px, Buckskin
- Link: "Partner with us →" — Copper

**Card 3: OEM / Private Label**
- Heading: "Custom manufacturing" — Barlow Condensed, 20px, semibold, Cream
- Description: "Your brand, our rope. Custom specs, private labeling, and contract manufacturing for brands that demand quality." — Inter 14px, Buckskin
- Link: "Request a quote →" — Copper

**Card hover**: Border transitions to Buckskin. Subtle lift is optional but not required — keep it flat.

Each link routes to a dedicated audience landing page (not built in this phase, but the homepage should link out as if they exist).

---

### Section 5: Event sponsorship strip

**Background**: Gunmetal (#2A2D30)
**Padding**: 64px vertical

**Layout**: Split or centered — flexible depending on available photography.

**Option A — Photo split**:
- Left: Event action photo (Road to the Horse arena shot, PNW banner visible)
- Right: Event name ("Road to the Horse 2026"), role ("Official rope sponsor"), and a "See all events →" link in Copper

**Option B — Logo bar**:
- Centered heading: "Proud sponsor" — Inter 14px, uppercase, Rawhide
- Row of event/association logos (Road to the Horse, any others) in Cream/monochrome
- "View events →" link in Copper below

**Purpose**: This section answers the unspoken question every B2B buyer has: "Is this brand real?" Sponsoring Road to the Horse at the national level is a strong signal. Make it visible without overdoing it — one clean strip, not a wall of logos.

---

### Section 6: About PNW

**Background**: Night (#0D0D0B)
**Padding**: 96px vertical

**Layout**: Split — image left, text right (desktop). Stack on mobile (image top, text bottom).

**Left — Image**:
- Close-up macro photography of rope texture, weave, or raw materials
- Or: workshop/manufacturing environment shot
- Aspect ratio: 4:3 or 1:1
- Border radius: 8px
- The image should signal craftsmanship and quality to someone who knows rope — a detail shot that a roper would appreciate

**Right — Text**:
- Optional: Thin Forest Green (#4A6B52) left border accent (2px) on the text block, no border radius
- Heading: "Made in the Pacific Northwest" (or similar) — Barlow Condensed, 24–32px, Cream
- Body: 3–4 lines max. Direct and specific — what PNW makes, where, and what makes the approach different. Written for a business buyer, not a consumer. Example tone: "PNW Select Rope is manufactured in [location] with a focus on consistent feel, durable construction, and the kind of quality that earns repeat orders. Every rope is built to perform in the arena and hold up on the ranch."
- Text: Inter 16px, Cream, line-height 1.7
- Link: "Learn more about PNW →" — Copper, 14px

**Max text width**: 480px to maintain comfortable line length.

---

### Section 7: Footer

**Background**: Night (#0D0D0B)
**Top border**: Thin Forest Green (#4A6B52) accent line (2px) — the single PNW identity moment in the footer
**Padding**: 64px top, 32px bottom

**Layout**: 4-column grid (desktop), 2-column (tablet), stack (mobile)

**Column 1 — Brand**:
- PNW Select Rope logo (Cream), max-width 120px
- Tagline or one-line description in Rawhide, 13px (optional)

**Column 2 — Shop**:
- Column label: "Shop" — Inter 12px, uppercase, Rawhide, wide tracking
- Links: Head ropes, Heel ropes, Breakaway, Ranch ropes — Inter 14px, Cream
- Hover: Copper

**Column 3 — Company**:
- Column label: "Company"
- Links: About, Events, Contact — Inter 14px, Cream

**Column 4 — Partners**:
- Column label: "Work with us"
- Links: Retailers, Distributors, OEM — Inter 14px, Cream

**Bottom bar** (below columns, separated by 1px Steel border at 15% opacity):
- Left: Copyright — Inter 12px, Rawhide. "© 2026 PNW Select Rope. All rights reserved."
- Center: Social media icons (Instagram, Facebook) — Rawhide default, Copper hover, 20px icon size
- Right: Phone number and email — Inter 13px, Buckskin. Displayed prominently because B2B buyers call.

---

## General design rules

### Do

- Keep the entire page dark-dominant (Night background)
- Use Gunmetal only for cards and the event strip — not as a page-level section background swap
- Let photography carry the visual weight — the design should frame it, not compete
- Maintain generous vertical padding between sections (80–96px)
- Use Copper exclusively for interactive elements — if it's Copper, it's clickable
- Display phone number in the footer — B2B buyers call before they fill forms

### Don't

- Use wood textures, rope-knot dividers, horseshoe icons, or western script fonts
- Use drop shadows, glows, or gradient backgrounds
- Put more than one CTA in the hero
- Use Forest Green as a background color — it's an accent line, not a surface
- Add a carousel or slider to the hero — single static image with text overlay
- Include a form on the homepage — forms live on dedicated audience landing pages
- Use stock photography — all imagery should be authentic PNW product, events, or manufacturing

### Spacing quick reference

| Context | Value |
|---------|-------|
| Section vertical padding | 80–96px |
| Section heading to content | 48px |
| Card internal padding | 16–24px |
| Card grid gap | 24px |
| Hero text stack spacing | 12–16px between elements |
| Hero subhead to CTA | 32px |
| Nav height | 64px desktop, 56px mobile |
| Footer top padding | 64px |

---

## Deliverables

- Desktop homepage mockup (1440px width) — full page, all 7 sections
- Mobile homepage mockup (375px width) — full page, all 7 sections
- Mobile navigation overlay state
- Hero with image overlay (show the photography treatment, not just a placeholder)
- Hover states for product cards, CTA cards, nav links, and buttons

---

## Reference sites

Study these for tone and execution — not to copy, but to calibrate:

- **Filson** (filson.com) — Dark editorial, product-forward, premium heritage
- **King Ranch** (kingranch.com) — Ranch heritage, dark backgrounds, restrained typography
- **Stetson** (stetson.com) — Premium western, strong product photography
- **Cactus Ropes** (cactusropes.com) — Direct competitor, warm palette. Study the product page specs, but PNW should look distinctly different in color and tone.