# PNW Select Rope Design System

**Project:** pnw-select-rope
**Source URL:** https://pnwselect.com/
**Generated:** 2026-04-23
**Palette refresh:** 2026-04-26 — adopted "Steel and Rawhide" (37/40 audience-fit score; best of three palette directions reviewed)
**Direction:** Depart
**Confidence:** Medium

<!-- Notable decisions (why this design system looks the way it does — for future-you and the mockup generator):
  - The scanned live site is a generic GoDaddy Website Builder 8.0 "layout-13" template, not a deliberate brand system. Direction = Depart: we keep only the handful of real brand signals (horse-head-from-rope logo, "Farm & Utility Proven. Built to Last." tagline, Playfair Display, dark theme) and rebuild the rest around a rugged-Americana voice (Filson / Red Wing / Pendleton mental model).
  - **Palette = Steel and Rawhide** (refreshed 2026-04-26). The earlier "Rope Tan + Burnished Gold" warm-only palette (best for shelf presence in isolation) was downgraded after the audience-fit review: at a tradeshow where the buyer is also looking at Cactus Ropes / Rattler / Classic Equine, every rope brand already lives in burnt-orange / red-dirt / warm-earth — looking the same is camouflage, not differentiation. Steel and Rawhide adds a cool gunmetal foundation (buckle hardware, arena panels, trailer hitches — objects this buyer touches every day) underneath the rawhide warm tones, peer-aligned with the *premium* sponsors on that wall (Gist Silversmiths, American Hat Co., Circle Y, Platinum Performance) rather than the rope competitors. Rationale: "It says 'pro equipment' the way Gist says 'pro silver.'"
  - Primary stays warm — `--color-primary` is rawhide buckskin (#BAA47A), close to the previous saddle cream but slightly warmer/earthier so it reads as worked-leather rather than pale parchment. Rawhide remains the brand interactive color (CTAs, link accents, eyebrows). The chromatic kicker shifted from burnished gold (#C4943C) to **copper rust** (#C26721) — a more saturated, intentional accent that mirrors the rust-colored prestige tone in the audience-aligned premium peer set; reserved for a single signal CTA per page so it never reads decorative.
  - **Gunmetal is a new structural role.** `--color-accent` (#4F5A60) and `--color-border-strong` (#4A5258) are the cool gunmetal hairlines that sit in for "buckle hardware" — they replace the earlier dark-tan accent (#87744E) and warm border-strong (#52524A). Use them on featured card edges, footer dividers, hardware-style rules, and section breaks where the cool structural cue earns its keep. Do NOT use gunmetal as a fill — it's a line/edge color.
  - Surface foundation shifted from warm near-black (#1A1A18 with cream-biased neutrals) to **cool steel-undertoned near-black** (#0E1216 bg, #1F252B surface, #2D343C surface-raised). The shift is small in luminance but big in temperature: text holds the warm cream parchment (#E8DCC0) which now POPS against the cool surface — that warm/cool tension is the entire point of the palette. Neutrals 50–200 are still warm parchment for light-mode overrides; neutrals 500–900 are now cool steel.
  - Typography: Playfair Display (display/headlines — elegant, "built to last", heirloom) + Inter (body — clean, modern, readable). Dropped Montserrat (was only used for the site's text wordmark, which we're replacing with the real image logo) and Source Sans Pro (GoDaddy default, Inter is a stronger, more modern equivalent).
  - Radius kept tight (md = 4px) to match the scanned value and reinforce a serious/utility personality. No rounded-friendly 16–24px radii.
  - Shadows: the scanned site had none (strictly flat). For dark theme we emit subtle elevation shadows that are darker-than-background (the usual approach) and a rawhide-tinted focus ring so focus is visible on dark. Shadow opacities bumped slightly (0.40–0.65) because the cooler, slightly-bluer near-black needs a touch more shadow density to feel weighty.
  - Source site has only a hero + contact form — no About/Services content to port. Mockup-generator must compose these pages from scratch using the component guardrails and voice below.
-->

---

## Colors

> **Palette: Steel and Rawhide** — cool gunmetal foundation + warm rawhide brand interactive + copper-rust signal accent. Audience-fit winner: peers PNW Select with Gist Silversmiths / American Hat Co. / Circle Y / Platinum Performance ("pro equipment") rather than with the rope-competitor pack (all of whom live in warm earth tones).

### Primary (Rawhide Buckskin — `tan` in semantic naming)
The brand's interactive warm tone — buttons, link accents, eyebrows, eyebrow rules, focus rings.
- `--color-primary`: #BAA47A
- `--color-primary-hover`: #CFBB91
- `--color-primary-active`: #A18C66
- `--color-primary-subtle`: #2A2620
- `--color-on-primary`: #14171A

### Secondary (Copper Rust — `copper` in semantic naming)
The chromatic signal — reserved for one priority CTA per page (e.g., "Request a Quote" on the audience-priority tile). Replaces the previous burnished-gold/brass role; copper rust is more saturated, more intentional, and aligns with the prestige rust tones in the audience peer set.
- `--color-secondary`: #C26721
- `--color-secondary-hover`: #D87A36
- `--color-on-secondary`: #14171A

### Accent (Gunmetal — `steel` in semantic naming) — NEW STRUCTURAL ROLE
Cool steel/gunmetal — the "buckle hardware, arena panel, trailer hitch" cue. Use as a line/edge color (featured card top accents, hardware-style rules, footer dividers, section breaks). DO NOT use as a fill.
- `--color-accent`: #4F5A60

### Semantic
- `--color-success`: #7DAB5F
- `--color-warning`: #C97B2A
- `--color-error`: #E26E50
- `--color-info`: #6FA4C4

### Neutrals (warm parchment 50–200 + cool gunmetal 400–900; the warm/cool tension is intentional)
- `--color-neutral-50`: #F4F1E7
- `--color-neutral-100`: #E8DCC0
- `--color-neutral-200`: #CFC2A4
- `--color-neutral-300`: #A89E84
- `--color-neutral-400`: #7E7D75
- `--color-neutral-500`: #5F676C
- `--color-neutral-600`: #4A5258
- `--color-neutral-700`: #353B42
- `--color-neutral-800`: #1F252B
- `--color-neutral-900`: #0E1216

### Surface & Text Roles (dark theme defaults — light-mode overrides live at .theme-light)
- `--color-bg`: #0E1216
- `--color-bg-alt`: #1A2026
- `--color-surface`: #1F252B
- `--color-surface-raised`: #2D343C
- `--color-border`: #2D343C
- `--color-border-strong`: #4A5258 (gunmetal hairline — the structural hardware-line cue)
- `--color-text`: #E8DCC0 (parchment cream — pops against cool surface; the warm/cool tension is the palette's entire point)
- `--color-text-muted`: #B8AC93
- `--color-text-inverse`: #0E1216

---

## Typography

### Fonts
- `--font-sans`: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif
- `--font-serif`: "Playfair Display", Georgia, "Times New Roman", serif
- `--font-mono`: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace
- `--font-display`: "Playfair Display", Georgia, "Times New Roman", serif

### Source
- Google Fonts: Inter (400, 500, 600, 700), Playfair Display (400, 600, 700, italic)
- Self-hosted: none
- System fallbacks: system-ui, -apple-system, Segoe UI, Roboto, Georgia, Menlo

### Type Scale
- `--text-xs`: 0.75rem / 1rem
- `--text-sm`: 0.875rem / 1.25rem
- `--text-base`: 1rem / 1.5rem
- `--text-lg`: 1.125rem / 1.75rem
- `--text-xl`: 1.25rem / 1.75rem
- `--text-2xl`: 1.5rem / 2rem
- `--text-3xl`: 1.875rem / 2.25rem
- `--text-4xl`: 2.25rem / 2.5rem
- `--text-5xl`: 3rem / 1.1
- `--text-6xl`: 3.75rem / 1.05

### Weights
- `--font-normal`: 400
- `--font-medium`: 500
- `--font-semibold`: 600
- `--font-bold`: 700

### Line Heights
- `--leading-tight`: 1.2
- `--leading-snug`: 1.35
- `--leading-normal`: 1.5
- `--leading-relaxed`: 1.7

### Letter Spacing
- `--tracking-tight`: -0.02em
- `--tracking-normal`: 0
- `--tracking-wide`: 0.08em

---

## Spacing

### Scale
- `--space-0`: 0
- `--space-1`: 0.25rem
- `--space-2`: 0.5rem
- `--space-3`: 0.75rem
- `--space-4`: 1rem
- `--space-5`: 1.25rem
- `--space-6`: 1.5rem
- `--space-8`: 2rem
- `--space-10`: 2.5rem
- `--space-12`: 3rem
- `--space-16`: 4rem
- `--space-20`: 5rem
- `--space-24`: 6rem
- `--space-32`: 8rem

### Section & Layout
- `--container-max`: 1200px
- `--container-padding`: var(--space-6)
- `--section-padding-y`: var(--space-20)
- `--section-padding-y-sm`: var(--space-12)
- `--grid-gap`: var(--space-6)

---

## Radius

- `--radius-none`: 0
- `--radius-sm`: 0.125rem
- `--radius-md`: 0.25rem
- `--radius-lg`: 0.5rem
- `--radius-xl`: 0.75rem
- `--radius-2xl`: 1rem
- `--radius-full`: 9999px

---

## Shadow

- `--shadow-none`: none
- `--shadow-sm`: 0 1px 2px 0 rgb(0 0 0 / 0.4)
- `--shadow-md`: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5)
- `--shadow-lg`: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.6)
- `--shadow-xl`: 0 20px 25px -5px rgb(0 0 0 / 0.65), 0 8px 10px -6px rgb(0 0 0 / 0.65)
- `--shadow-inner`: inset 0 2px 4px 0 rgb(0 0 0 / 0.4)
- `--shadow-focus`: 0 0 0 3px rgb(186 164 122 / 0.45) — rawhide ring

---

## Motion

### Durations
- `--duration-instant`: 50ms
- `--duration-fast`: 150ms
- `--duration-base`: 300ms
- `--duration-slow`: 500ms

### Easing
- `--ease-default`: cubic-bezier(0.4, 0, 0.2, 1)
- `--ease-in`: cubic-bezier(0.4, 0, 1, 1)
- `--ease-out`: cubic-bezier(0, 0, 0.2, 1)
- `--ease-bounce`: cubic-bezier(0.68, -0.55, 0.265, 1.55)

### Transitions
- `--transition-color`: color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default)
- `--transition-transform`: transform var(--duration-base) var(--ease-default)
- `--transition-opacity`: opacity var(--duration-fast) var(--ease-default)

---

## Breakpoints

- `--bp-sm`: 640px
- `--bp-md`: 768px
- `--bp-lg`: 1024px
- `--bp-xl`: 1280px
- `--bp-2xl`: 1536px

---

## Components

### Button
- **Primary:** solid fill with `--color-primary` (rawhide buckskin), text `--color-on-primary` (#14171A), `--radius-md` (4px), padding `--space-3` vertical / `--space-6` horizontal. Letter-spacing `--tracking-wide` on uppercase labels for a workwear-stencil feel.
- **Secondary:** outline — transparent background, 1.5px border `--color-primary`, text `--color-primary`. On hover, fill to `--color-primary` + text `--color-on-primary`.
- **Tertiary / accent CTA:** solid fill `--color-secondary` (copper rust) reserved for **one** signal CTA per page — typically "Request a Quote" or the audience-priority action. Text `--color-on-secondary` (#14171A). Using copper on more than one CTA per page makes it read decorative and breaks the "premium pro equipment" cue.
- **Ghost:** no border, text `--color-text`, `--color-surface` on hover.
- **Destructive:** solid fill `--color-error`, text `--color-neutral-900`.
- **Sizes:** sm (text-sm, space-2/4 padding), md (default, text-base, space-3/6), lg (text-lg, space-4/8).
- **States:** hover = one step darker (primary → primary-hover); focus shows `--shadow-focus` (rawhide ring); active = `--color-primary-active`; disabled = opacity 0.4, not-allowed cursor.
- **Personality:** avoid playful bounces. Motion should feel deliberate (`--duration-base`, `--ease-default`). Buttons can use a subtle 1px inner highlight (inset top) to evoke stamped metal.

### Card
- Background: `--color-surface` (#1F252B) on page `--color-bg`, or `--color-surface-raised` (#2D343C) when stacked over surface.
- Border: 1px solid `--color-border` (#2D343C) for ambient cards; promote to `--color-border-strong` (#4A5258 gunmetal hairline) for featured/pull tiles — the gunmetal line is the "buckle hardware" tell that ties cards back to the palette thesis. Prefer a hairline border OR `--shadow-md`, not both (picks: hairline for dense lists, shadow for featured tiles).
- Radius: `--radius-lg` (8px).
- Padding: `--space-6` to `--space-8`.
- Hover: optional `translateY(-2px)` + `--shadow-lg` + border shifts to `--color-border-strong`.
- Feature/product cards may include a thin top-edge accent (2px `--color-primary` rawhide for ambient features; 2px `--color-secondary` copper for the single audience-priority tile per page).

### Nav
- Type: horizontal top bar, logo left, nav links centered or right, optional CTA button far right.
- Background: `--color-bg` (#0E1216) with `--shadow-sm` when scrolled past hero; sticky by default. No transparent-to-solid fade (too glossy/consumer for this voice).
- Link style: `--color-text` normal, weight `--font-medium`, `--color-primary` on hover/active. Uppercase optional (with `--tracking-wide`).
- Active link indicator: 2px underline in `--color-primary` with small bottom offset.
- Mobile: collapse to hamburger below `--bp-md` (768px). Open panel uses `--color-bg-alt` with `--shadow-lg`.
- Logo: use the horse-head rope mark at ~40–48px height next to the wordmark "PNW SELECT ROPE" set in `--font-display` semibold uppercase with `--tracking-wide`.

### Footer
- Background: `--color-bg-alt` (#1A2026) — one shade lighter than body so the footer is subtly separated without a hard line.
- Top edge: 1px `--color-border-strong` (gunmetal #4A5258) hairline divider — the structural "hardware line" that re-asserts the buckle/panel cue at the foot of the page.
- Layout: 3 columns on desktop (Company / Products / Contact) + a fourth column for newsletter signup; collapses to stacked on mobile.
- Headings: `--text-sm` `--font-semibold` uppercase in `--color-text` with `--tracking-wide`.
- Links: `--color-text-muted`, hover `--color-primary`.
- Legal row: `--text-xs` `--color-neutral-500` across the full width below the columns.
- Padding: `--section-padding-y-sm` top/bottom, `--container-padding` sides.

### Hero
- Preferred composition: centered text OR left-aligned text + right product image; full-bleed background photo (rope detail, horse, pasture, or barn) with a `--color-bg` overlay at ~70% opacity to hold contrast. Cool gunmetal undertones in the background photograph cleanly against rawhide rope texture — lean into that warm-rope-on-cool-steel contrast in shot selection.
- Heading: `--text-5xl` on desktop / `--text-4xl` on mobile, `--font-display` (Playfair Display) `--font-normal`, `--leading-tight`, `--color-text` (#E8DCC0 parchment). Do NOT bold the headline — Playfair at 48–60px in regular weight is the signature. Italic on emphasized words is encouraged.
- Eyebrow: `--text-sm` `--tracking-wide` uppercase, `--font-sans` semibold, `--color-primary`.
- Subheading / lede: `--text-lg`, `--color-text-muted`, max-width ~60ch.
- CTA pair: primary (solid rawhide) + secondary (outline rawhide) side-by-side. Primary label example: "Shop the Catalog" / "Request a Quote"; secondary: "Our Rope Guide" / "Contact Us". Reserve the copper-rust solid fill for the single highest-priority CTA on the page when the variant calls for chromatic emphasis (typically a Spec-Shop "Download Spec Sheet" or a Dispatch "Book a Meeting at [Show]").
- Optional micro-element: a thin 1px `--color-border-strong` (gunmetal) rule beneath the eyebrow for heritage-catalog hardware vibe.

### Form Controls
- Input height: 2.75rem / 44px (slightly taller than schema default — reads more trade/industrial).
- Background: `--color-surface` (#1F252B).
- Border: 1px `--color-border` (#2D343C); focus border = `--color-primary` + `--shadow-focus` (rawhide glow).
- Text: `--color-text`; placeholder: `--color-neutral-400`.
- Label: `--text-sm`, `--font-medium`, `--color-text`, uppercase optional with `--tracking-wide`.
- Helper text: `--text-xs`, `--color-text-muted`.
- Error: border `--color-error`, helper text `--color-error`.
- Radius: `--radius-md` (4px) for inputs/textareas, `--radius-full` for search pills only.
- Submit button follows the primary button treatment.

---

## Audience

PNW Select Rope sells wholesale, not consumer. The site speaks to four buyer types:

- **Retailers** — regional farm/marine/outdoor stores reselling packaged rope. They care about MAP pricing, minimum orders, drop-ship readiness, packaging quality, co-marketing assets, and whether a return is actually a return. Address them with margin clarity and stocking simplicity.
- **Distributors** — mid-tier partners placing pallet-level orders to fulfill their own customer network. They care about stocking programs, lead times, predictability, and whether lot-level documentation arrives with the shipment. Address them with logistics discipline and named account reps.
- **OEM** — manufacturers who use rope as a component in their product (boat builders, arborist gear makers, theater riggers, etc.). They care about engineering spec (tensile, abrasion, UV, material certifications), custom diameter/length runs, sample programs, and repeatability across production runs. Address them with data — tensile curves, break-test reports, ISO/ASTM certs.
- **Tradeshow Partners** — industry events where new buyer relationships begin (IFAI, Western Veterinary Conference, Agritechnica-style booths). They care about who's coming, booth number, schedule, and whether meaningful meetings can be booked ahead. Address them with calendar clarity and "book a meeting" CTAs.

Each mockup direction should surface all four — but where a direction gives emphasis varies (Supply Line leads with audience differentiation; Spec Shop leads with the OEM data mindset; Dispatch leads with Tradeshow + case-study publishing).

---

## Voice & Tone

- **Tone:** Confident, specific, unhurried. Industrial-wholesale voice — think a family-run manufacturer's voice that respects the buyer's time and expertise. Short declaratives, concrete numbers over adjectives ("8,500 lb working load, 2.5:1 safety factor" beats "high-strength"), first-person-plural ("we'll ship that"), second-person only where it earns its keep. Assumes the reader knows the category — does not explain what a lariat is.
- **Forbidden:** Consumer-marketing buzzwords (synergy, revolutionary, cutting-edge, next-gen, game-changer, disrupting), SaaS metaphors (ecosystem, experience, seamless, frictionless), emoji, exclamation marks in body copy (one per page max, and only inside a stamp/stamp-like callout), ALL-CAPS in body text (reserve for wordmarks, eyebrows, certification tags, and single-word stamps like "NEW" / "ISO"), pseudo-rustic cosplay ("y'all", "partner," "hombre" — we are industrial, not nostalgic).
- **CTAs by audience:**
  - Retailer path: "Request Wholesale Pricing," "Download the Retailer Kit," "Apply to Resell"
  - Distributor path: "Request Stocking Program," "Download the Spec Library," "Talk to Your Rep"
  - OEM path: "Request Engineering Samples," "Download Certifications," "Book an Engineering Call"
  - Tradeshow path: "Book a Meeting at [Show]," "Add Us to Your Show Calendar," "See Booth Map"
  - Universal: "Request a Quote," "Download the 2026 Catalog," "See the Spec Sheet"
  - Never: "Submit," "Learn more" (vague), "Click here," "Shop now" (consumer tell).
- **Copy grammar:** Title-case for headlines (Playfair looks best with title case). Sentence-case for subheads and body. Oxford comma on. Use the `№` glyph for issue/lot references in Dispatch-style copy. Use monospace for SKUs, lot numbers, and tensile values where a spec table isn't available.
- **Numbers first:** When describing capability, lead with a number. "38 years. 14 states. 2,400 SKUs in stock." Not "extensive experience in a wide range of regions."
- **Case studies over claims:** Replace generic reassurance ("trusted by ranchers everywhere") with named, datelined proof ("Supplier of record for Olympia Marine Works since 2011."). If we can't name a customer, we don't claim them.

---

## Assets

- **Logo (primary):** /assets/logo.jpeg — horse-head mark formed from rope, cream/tan on transparent/black. Source: client-provided HorseHeadLogo.docx (image1.jpeg extracted). Recommend converting to SVG or transparent PNG at 512×512 or larger before production; current JPEG has a hard black background that only works on `--color-bg` surfaces.
- **Logo (mark only):** same as primary for now — the horse head IS the mark. A wordmark lockup ("PNW SELECT ROPE" in Playfair Display, wide-tracked) should be created to sit beside the mark in the nav; keep the mark usable on its own at 40px and above.
- **Favicon:** [TO GENERATE] — square-crop the horse-head mark at 32×32 and 180×180 (apple-touch-icon). The live site currently ships GoDaddy's default placeholder favicon; replace.
- **Icon style:** line — prefer 1.5–2px stroke icons in `--color-primary` or `--color-text`. Avoid filled/duotone; filled icons read too UI-kit-modern for this brand. Heroicons Outline, Lucide, or Feather are acceptable starting libraries.
- **Image treatment:** full-color, warm-biased **industrial** photography — rope detail shots (close-ups of the lay, splices, stamped lot numbers), facility/plant shots (the Olympia shop floor, spooling machines, QC lanes), product-in-context on working sites (marina dock lines, arborist rigging, commercial fishing decks, theater/rigging loft, boat builder's yard). Secondary: tradeshow booth shots, plant tours. Light grain OK. Avoid: stock-style "people smiling at a laptop," pastoral ranch photography (that's consumer), studio-sterile product shots on white (doesn't match dark theme), heavy filters, desaturated-to-gray (undercuts the warm cream/leather palette). Background photos in hero should carry a `--color-bg` overlay at 60–75% opacity and slight vignette so headlines hold contrast.

---

## Sitemap & Canonical-File Mapping

The real PNW Select Rope sitemap is **Home / About / Products / Events Calendar / Contact**. The SiteEngine pipeline ships a canonical 4-file mockup structure (`index.html` / `about.html` / `services.html` / `service-single.html`) that the validator and manifest generator expect. To preserve tooling, the canonical files map semantically:

| Canonical file | Semantic role for this project |
|---|---|
| `index.html` | Home — the homepage each of the 3 variants rewrites for Phase 1 |
| `about.html` | About — company story, capabilities, plant, named team |
| `services.html` | **Products** — catalog index (filterable by audience + industry) |
| `service-single.html` | **Product Detail** — single-product spec page with downloadable spec sheet + lot traceability |

Two pages outside the canonical 4, deferred to **Phase 2** (winning variant only):

- `events.html` — Events Calendar / tradeshow schedule + "Where to Find Us" (Olympia HQ plant-tour offer, past-event archive with photos). Note: Dispatch variant surfaces a condensed "Where to Find Us" module on its homepage so a stale calendar doesn't sink the first impression.
- `contact.html` — Contact forms per audience (Retailer, Distributor, OEM, Press, General). For Phase 1 mockups, contact lives as an anchor on each homepage (`#contact`). A dedicated `contact.html` is optional in Phase 2; the anchor pattern is cheaper and fits B2B "request a quote" flows better.

Do not rename the canonical files. Downstream mockup-generator scripts, the validator, and the manifest generator all key off `services.html` and `service-single.html`.