# Design System — PNW Select Rope

> **Source URL:** pnwselectrope.com (in development)
> **Created:** April 2026
> **Palette:** Steel and Rawhide

---

## 1. Visual Theme & Atmosphere

PNW Select Rope's design system is built for the arena, not the gift shop. The visual language draws from the materials and environment of professional western horsemanship — cold-rolled steel panels, worn rawhide, gunmetal hardware, arena dirt at dawn. It is dark-dominant, photography-led, and typographically restrained. The mood is what you feel standing behind the chutes at a colt-starting competition: focused, capable, no wasted motion.

The system differentiates sharply from competitors in the rope and tack space. Where Cactus Ropes, Rattler, and Classic Equine all operate in warm earth tones (burnt orange, saddle brown, red clay), PNW runs cool. Gunmetal and steel grays anchor the palette, with warm rawhide and buckskin tones providing just enough warmth to keep it from reading industrial. The result is a brand that looks like premium equipment — not western lifestyle décor.

The Pacific Northwest origin is embedded as a secondary accent (Forest Green) rather than a primary surface. This prevents the brand from drifting into outdoor recreation territory while still owning a regional identity no other rope manufacturer claims. Green appears only in accent lines and micro-moments — never as a background, never as a button.

**Key Characteristics:**
- **Night (#0D0D0B) as primary surface** — creates a stage for product photography and establishes premium positioning. Dark backgrounds signal confidence and let rope texture photography carry the visual weight.
- **Barlow Condensed + Inter type split** — condensed sans-serif headings deliver masculine, arena-poster energy at large sizes. Inter body text stays clean and legible for specs and product detail. The two fonts never swap roles.
- **Copper (#C4813A) as action color** — reads like buckle hardware and rivet metal. Warm enough to pop against the cool grays, western enough to belong, but never decorative. If it's Copper, it's clickable.
- **Cool-warm neutral undertone** — the grays (Gunmetal, Steel) run cool with a blue-gray undertone. The text tones (Rawhide, Buckskin, Cream) run warm with a yellow-tan undertone. The tension between cool surfaces and warm text creates depth without needing shadows or gradients.
- **Photography over illustration** — no illustrations, icons-as-decoration, or graphic elements. Product photography, macro rope texture, and authentic event/arena photography are the only visual content. The design frames the photography, never competes with it.
- **No shadows, no gradients** — depth is communicated through surface color stepping (Night → Gunmetal → Steel) and border hierarchy. The system is completely flat. Elevation comes from color contrast, not from simulated light sources.
- **Dark editorial layout** — full-bleed sections, generous vertical spacing, restrained content density. Closer to a Filson product page than a Shopify template. Magazine-influenced pacing with clear visual breaks between content blocks.

---

## 2. Color Palette & Roles

### Primary
- **Cream** (`#F2E8D5`): Primary text on dark surfaces, light-mode section background. The brand's "white" — warm, papery, never clinical. Carries all body text, headings, and product names on Night backgrounds.
- **Copper** (`#C4813A`): The single interactive color. Every CTA button, every text link, every badge, every price. If it's Copper, the user can tap it. Never decorative — always functional.
- **Copper Hover** (`#D4914A`): Lightened Copper for hover and focus states on interactive elements.
- **Copper Dark** (`#A06A2E`): Darkened Copper for active/pressed states and links on light (Cream) backgrounds where standard Copper lacks contrast.
- **Copper Background** (`rgba(196, 129, 58, 0.15)`): Translucent Copper for badge and tag backgrounds behind Copper text.

### Secondary & Accent
- **Forest** (`#4A6B52`): PNW regional identity accent. Footer top border, optional text-block left accent, success states. Strict usage rules — never as a background fill, button color, or primary surface. It whispers "Pacific Northwest" without shouting "hiking brand."
- **Forest Background** (`rgba(74, 107, 82, 0.12)`): Subtle green tint for success state backgrounds.
- **Deep Fir** (`#2B3D2F`): Dark green for rare special sections or paired with Forest accents.

### Surface & Background
- **Night** (`#0D0D0B`): Primary page background across all pages. The stage. Nearly black with a very slight warm undertone that prevents it from reading as pure digital black.
- **Gunmetal** (`#2A2D30`): Card surfaces, secondary sections, dropdown menus, modal backgrounds. The "elevated" surface — sits visually above Night without needing a shadow.
- **Steel** (`#4F5459`): Tertiary surface for input field backgrounds, hover state fills, and table stripe alternation. Also used at reduced opacity for borders.
- **Cream** (`#F2E8D5`): Inverted sections — spec tables, forms, cart/checkout, about page content areas. The "light mode" surface reserved for contexts where readability is critical (money, specifications, data entry).

### Neutrals & Text
- **Night** (`#0D0D0B`): Primary text on light (Cream) surfaces. Headings, body text, prices on Cream backgrounds.
- **Steel** (`#4F5459`): Secondary text on light surfaces. Subheadings, descriptions, metadata on Cream backgrounds.
- **Rawhide** (`#8A7D6B`): Muted text role on both dark and light surfaces. Captions, timestamps, overline labels, placeholder text, disabled states. The "whisper" tone.
- **Cream** (`#F2E8D5`): Primary text on dark (Night/Gunmetal) surfaces. All headings, body text, and product names on dark backgrounds.
- **Buckskin** (`#C6B598`): Secondary text on dark surfaces. Subheadings, descriptions, card descriptions, hero subheads. Warmer and more prominent than Rawhide.

### Borders, Rings & Dividers
- **Steel at 15%** (`rgba(79, 84, 89, 0.15)`): Subtle borders — table row dividers, input field default borders, card borders at rest.
- **Steel at 30%** (`rgba(79, 84, 89, 0.30)`): Standard borders — card borders, section dividers, nav bottom border on scroll.
- **Buckskin** (`#C6B598`): Emphasized borders — card hover state, active card selection, prominent dividers.
- **Copper** (`#C4813A`): Accent borders — featured product highlight (2px), active nav indicator (2px bottom), focus rings on inputs.
- **Forest** (`#4A6B52`): Identity accent — footer top border (2px), optional text block left border accent (2px). Never used as a standard component border.

### Gradient System

PNW Select Rope does not use gradients. Depth and visual hierarchy are achieved through flat surface color stepping (Night → Gunmetal → Steel → Cream) and border weight variation. The dark-to-light progression across surfaces creates natural depth without simulated lighting. Photography provides all the visual richness — the design system stays flat so it never competes with product imagery.

---

## 3. Typography Rules

### Font Family
- **Headline**: `Barlow Condensed`, fallback: `Arial Narrow, sans-serif`
- **Body / UI**: `Inter`, fallback: `Helvetica Neue, Arial, sans-serif`
- **Code** _(if applicable)_: `JetBrains Mono`, fallback: `Fira Code, monospace`

Barlow Condensed is a free Google Font — tall, narrow, and masculine. It reads like arena signage and rodeo programs at large sizes without being a novelty western font. Inter is a workhorse sans-serif optimized for screen readability, especially at small sizes for spec tables and product details.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display / Hero | Barlow Condensed | 56–72px (desktop) / 36–40px (mobile) | 700 | 1.1 | -0.02em | Uppercase. Cream on dark. The biggest moment on the page. |
| Page Title | Barlow Condensed | 32px | 700 | 1.2 | 0 | Title case. Used for page-level headings (Shop, About, Events). |
| Section Heading | Barlow Condensed | 24–32px | 600 | 1.25 | 0 | Title case. Cream on dark, Night on light. |
| Card Title | Barlow Condensed | 18–20px | 600 | 1.25 | 0 | Title case. Product names, card headings. |
| Body Large / Lead | Inter | 18px | 400 | 1.5 | 0 | Hero subheads, lead paragraphs. Buckskin on dark. |
| Body Standard | Inter | 16px | 400 | 1.6 | 0 | Default body text. Cream on dark, Night on light. |
| Body Small | Inter | 14px | 400 | 1.5 | 0 | Card descriptions, secondary content. Buckskin on dark. |
| Caption / Meta | Inter | 13px | 400 | 1.4 | 0 | Timestamps, fine print. Rawhide on both surfaces. |
| Overline Label | Inter | 12px | 500 | 1.3 | 0.08em | Uppercase. Rawhide. Used above headings and as category labels. |
| Nav Item | Inter | 14px | 500 | 1 | 0.04em | Uppercase. Cream default, Copper on hover/active. |
| Button Text | Inter | 14px | 600 | 1 | 0.04em | Uppercase. Night on Copper bg, Cream on ghost buttons. |
| Badge / Tag | Inter | 12px | 500 | 1 | 0.04em | Uppercase. Copper text on Copper bg, or Cream on Gunmetal. |
| Spec Label | Inter | 14px | 500 | 1.3 | 0.06em | Uppercase. Rawhide. Used in product spec tables. |
| Spec Value | Inter | 16px | 500 | 1.3 | 0 | Sentence case. Cream on dark, Night on light. |
| Price | Barlow Condensed | 20–24px | 700 | 1.2 | 0 | Copper. Always Copper, always Barlow Condensed. |

### Principles

- **Two fonts, strict role separation.** Barlow Condensed is for headings and display text only. Inter is for everything else. They never swap roles — no Inter headings, no Barlow Condensed body text.
- **Uppercase is reserved.** Only hero headlines, nav items, button text, overline labels, spec labels, and badges use uppercase. Body text, card descriptions, and paragraphs are always sentence case. Overusing uppercase dilutes its impact.
- **Weight range is narrow.** 400 (regular) for body, 500 (medium) for labels and nav, 600 (semibold) for section headings and buttons, 700 (bold) for hero headlines and prices. No weight below 400, no weight above 700.
- **Line height follows function.** Display text is tight (1.1) because headings need visual density. Body text is relaxed (1.5–1.6) because paragraphs need breathing room. Buttons and labels are flat (1.0) because they're single-line elements that need vertical centering.
- **Copper is a typographic color, not just a UI color.** Prices are always Copper. Links are always Copper. This makes the interactive and transactional elements of the page scannable at a glance — the eye finds every price and every link without reading.

---

## 4. Component Stylings

### Buttons

**Primary CTA**
- Background: `#C4813A` (Copper)
- Text: `#0D0D0B` (Night)
- Padding: `12px 32px`
- Radius: `8px` (subtle)
- Shadow/Ring: None
- Hover: Background transitions to `#D4914A` (Copper Hover), 150ms ease
- Active: Background `#A06A2E` (Copper Dark)
- _The only filled button in the system. Demands attention without being loud._

**Secondary / Ghost**
- Background: `transparent`
- Text: `#F2E8D5` (Cream)
- Border: `1px solid #C6B598` (Buckskin)
- Padding: `12px 32px`
- Radius: `8px`
- Hover: Background fills with Steel at 30% opacity, border transitions to Cream, 150ms ease
- _Recedes behind the primary CTA. Used for "Continue shopping," "View all," and secondary actions._

**Text Link**
- Background: None
- Text: `#C4813A` (Copper)
- Decoration: None default, underline on hover
- _Inline links and "Learn more →" prompts. Arrow suffix (→) is optional but encouraged for standalone links._

**Text Link on Light (Cream) Background**
- Text: `#A06A2E` (Copper Dark)
- _Darkened for WCAG contrast on Cream surfaces._

### Cards & Containers

**Standard Card (on Night background)**
- Background: `#2A2D30` (Gunmetal)
- Border: `1px solid rgba(79, 84, 89, 0.20)` (Steel at 20%)
- Radius: `8px`
- Shadow: None
- Internal padding: `16–24px` (text area only — images flush to card edges)
- Hover: Border transitions to `#C6B598` (Buckskin), 250ms ease. Image scales 1.02 with overflow hidden.

**Inverted Content Section (spec tables, forms)**
- Background: `#F2E8D5` (Cream)
- Border: None (contrast with Night provides the boundary)
- Radius: `12px` when used as a contained block within a Night section
- Internal padding: `24–48px`

### Inputs & Forms

**On Dark Background (Night/Gunmetal)**
- Text color: `#F2E8D5` (Cream)
- Background: `rgba(79, 84, 89, 0.15)` (Steel at 15%)
- Placeholder: `#8A7D6B` (Rawhide)
- Padding: `12px 16px`
- Border: `1px solid rgba(79, 84, 89, 0.30)` (Steel at 30%)
- Focus: Border transitions to `#C4813A` (Copper), box-shadow `0 0 0 2px rgba(196, 129, 58, 0.15)`
- Error: Border `#B8433A` (Error)
- Radius: `8px`

**On Light Background (Cream)**
- Text color: `#0D0D0B` (Night)
- Background: `#FFFFFF` (White)
- Placeholder: `#8A7D6B` (Rawhide)
- Border: `1px solid rgba(79, 84, 89, 0.30)` (Steel at 30%)
- Focus: Same Copper ring treatment
- Radius: `8px`

### Navigation

- Position: Fixed top, full width
- Height: `64px` desktop, `56px` mobile
- Background: Transparent over hero, transitions to `rgba(13, 13, 11, 0.95)` (Night at 95%) with slight backdrop blur on scroll
- Logo: Left-aligned, Cream version, max-height `40px`
- Links: Cream default, Copper on hover (150ms transition), Copper with 2px bottom border on active page
- Font: Inter 14px, weight 500, uppercase, 0.04em tracking
- CTA (optional): Ghost button style ("Get in touch") right-aligned
- Cart icon: Cream, with Copper background badge for item count
- Mobile: Hamburger icon right. Full-screen overlay on Night background, centered links at 24px Inter medium, generous 48px vertical spacing between items

### Image Treatment

- Border radius on media: `8px` for contained images within cards or split layouts. `0` for full-bleed hero and banner photography.
- Shadow on media: None. Ever.
- Common aspect ratios: `1:1` for product grid cards. `16:9` for hero and banner sections. `4:3` or `3:4` for split-layout imagery. `1:1` square for social/Instagram embeds.
- Overlay: `rgba(13, 13, 11, 0.70)` (Night at 70%) on hero photography for text legibility. No color-tinted overlays — always neutral dark.

### Distinctive Components

**Product Category Card**
Homepage-specific card that represents a rope category (Head, Heel, Breakaway, Ranch) rather than an individual SKU. 1:1 product photo flush to top edges, category name in Barlow Condensed 18px below, one-line feel description in Inter 14px Buckskin. Links to filtered shop view. The card sells the lineup breadth, not a single product — critical for the B2B buyer evaluating whether PNW has enough range to stock.

**Audience Routing Card**
Three side-by-side text-only cards on Gunmetal that route Retailers, Distributors, and OEM buyers to dedicated landing pages. No images — just a Barlow Condensed heading, 2–3 line Inter description in Buckskin, and a Copper text link. The cards are the homepage's primary conversion mechanism, sorting three distinct buyer types into the right funnel without forcing them through a generic form.

**Spec Table (Inverted)**
Product detail page component. Sits on a Cream background section within the otherwise dark page. Clean rows with no outer border — only subtle Buckskin-at-30% row dividers. Labels in uppercase Rawhide Inter 14px, values in Night Inter 16px medium. No row striping. The Cream background creates a visual "document" feel that signals precision and trustworthiness — this is where the buyer confirms the rope meets their specs.

**Event Sponsorship Strip**
Full-width Gunmetal band with event photography or monochrome logo bar. Overline "Proud sponsor" in Rawhide, event name in Barlow Condensed, and a Copper link to the Events page. Exists solely to answer the B2B buyer's unspoken question: "Is this brand real?" Road to the Horse sponsorship at the national level is a strong credibility signal — this component makes it visible without overdoing it.

---

## 5. Layout Principles

### Spacing System
- Base unit: `8px`
- Scale: `4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128`
- Section vertical spacing: `80–96px` between major page sections
- Section heading to content gap: `48px`
- Card grid gap: `24px`
- Card internal padding: `16–24px`

### Grid & Container
- Max container width: `1280px`
- Side gutters: `80px` desktop, `40px` tablet, `20px` mobile
- Column system: 12-column CSS grid, `24px` gap
- Product grid: 4 columns desktop, 2 tablet, 1 mobile
- CTA card grid: 3 columns desktop, stack vertically on mobile
- Event gallery: 3 columns desktop, 2 tablet, 1 mobile

### Whitespace Philosophy

PNW uses whitespace to create "rooms" — each section is a self-contained space with generous vertical padding that gives the photography room to breathe. The dark background makes whitespace feel like negative space in a photograph rather than empty page. Horizontal whitespace is managed through the 1280px container, which keeps content from feeling stretched on wide screens while the full-bleed sections (hero, event strip) break the container to maintain editorial drama. The overall density is low — this is a 7-section homepage, not a 15-section landing page.

### Border Radius Scale

| Token | Value | Usage |
|-------|-------|-------|
| Sharp | `0` | Full-bleed images, hero sections, announcement bars |
| Subtle | `4px` | Badges, tags, small UI elements |
| Comfortable | `8px` | Buttons, inputs, standard cards, contained images |
| Generous | `12px` | Large cards, inverted content sections, modals |
| Round | `16px` | Featured sections, hero image overlays (rare) |
| Pill | `9999px` | Cart count badges, avatar circles, toggle tracks |

---

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | Night surface, no border | Page background, full-bleed sections |
| Contained (Level 1) | Gunmetal surface, 1px Steel border at 20% | Cards, dropdowns, secondary content areas |
| Emphasized (Level 2) | Gunmetal surface, 1px Buckskin border | Hovered card, active selection, featured item |
| Accented (Level 3) | Gunmetal surface, 2px Copper border | Featured product card, current nav item |
| Inverted (Level 4) | Cream surface, no border (contrast is the boundary) | Spec tables, forms, checkout, light-mode content |

**Shadow Philosophy**: PNW does not use drop shadows, box shadows, or any simulated lighting. Depth is communicated exclusively through surface color contrast. A Gunmetal card on a Night background "floats" because the value difference between #2A2D30 and #0D0D0B creates natural separation. Elevation is a color relationship, not a shadow effect. This keeps the system flat and ensures every surface looks identical in screenshots, print, and at any screen brightness. The only shadow in the system is the Copper focus ring on inputs (`box-shadow: 0 0 0 2px`), which is a functional accessibility indicator, not a decorative depth cue.

---

## 7. Do's and Don'ts

### Do
- Use Night (#0D0D0B) as the default background for all pages and sections
- Let product photography be the primary visual element on every page
- Use Copper exclusively for interactive elements — if it's Copper, it's clickable
- Keep spec tables and forms on Cream backgrounds for maximum readability
- Use Forest Green only as a thin accent line (footer, text block border) for PNW identity
- Maintain 80–96px vertical spacing between sections for editorial pacing
- Display the phone number prominently in the footer — B2B buyers call
- Use the Barlow Condensed + Inter font split consistently — headings vs. everything else
- Keep product photography on dark backgrounds (Night or Gunmetal) with directional lighting
- Use uppercase sparingly — hero headlines, nav items, buttons, labels, and badges only

### Don't
- Use wood textures, rope-knot dividers, horseshoe icons, or barn door UI patterns
- Use western script fonts, decorative serifs, or novelty typefaces
- Apply drop shadows, glows, gradients, or neon effects to any element
- Use Forest Green as a background fill, button color, or card surface
- Put more than one CTA in the hero section
- Add carousels or auto-rotating sliders anywhere on the site
- Use stock photography of generic cowboys or posed lifestyle imagery
- Put body text in uppercase
- Use more than two background colors in a single section
- Include forms on the homepage — forms live on dedicated audience landing pages
- Overuse Copper — if everything is Copper, nothing stands out
- Use any illustration, icon decoration, or graphic element as a section divider

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Small Mobile | 320–374px | Single column, 16px gutters, hero headline 32px, nav overlay |
| Mobile | 375–639px | Single column, 20px gutters, hero headline 36–40px, hamburger nav |
| Tablet | 640–1023px | 2-column grids, 40px gutters, hero headline 48px, hamburger nav |
| Desktop | 1024–1439px | Full grid layouts, 80px gutters, hero headline 56px, horizontal nav |
| Large Desktop | 1440px+ | Max container 1280px centered, hero headline 72px, generous whitespace |

### Touch Targets
- Minimum size: `44 × 44px` for all tappable elements
- Button padding minimums: `12px vertical, 24px horizontal`
- Nav link spacing: `48px` vertical in mobile overlay menu

### Collapsing Strategy

- **Navigation**: Horizontal links collapse to hamburger at tablet breakpoint (1023px). Full-screen overlay on Night background with centered links at 24px. "Work With Us" dropdown becomes inline expanded list in mobile nav.
- **Hero**: Headline scales from 72px (large desktop) to 36px (mobile). Subhead and CTA stack below headline. Hero height reduces from 80vh to 60vh on mobile. Text alignment stays left on all breakpoints.
- **Product category cards**: 4-column → 2-column (tablet) → single column with horizontal scroll option (mobile). Card size stays consistent — grid reflows, cards don't shrink.
- **Audience CTA cards**: 3-column → vertical stack (below 768px). Cards gain full-width styling when stacked.
- **Event strip**: Split layout (photo + text side by side) collapses to stacked (photo top, text bottom) on mobile.
- **About split layout**: Image left / text right collapses to image top / text bottom on mobile.
- **Typography scaling**: Hero headline is the only element that scales across breakpoints. All other type sizes remain fixed — the grid reflows, the type stays constant.
- **Footer**: 4-column → 2-column (tablet) → single column stack (mobile). Phone number and social icons move to top of footer on mobile for thumb accessibility.

---

## 9. Agent Prompt Guide

### Quick Color Reference

- Brand CTA: "Copper (#C4813A)"
- Page Background: "Night (#0D0D0B)"
- Card Surface: "Gunmetal (#2A2D30)"
- Primary Text (on dark): "Cream (#F2E8D5)"
- Secondary Text (on dark): "Buckskin (#C6B598)"
- Tertiary Text (on dark): "Rawhide (#8A7D6B)"
- Primary Text (on light): "Night (#0D0D0B)"
- Secondary Text (on light): "Steel (#4F5459)"
- Borders (default): "Steel at 20% opacity — rgba(79, 84, 89, 0.20)"
- Borders (hover): "Buckskin (#C6B598)"
- Borders (accent): "Copper (#C4813A) at 2px"
- Light Surface: "Cream (#F2E8D5)"
- PNW Accent (sparingly): "Forest (#4A6B52)"

### Example Component Prompts

1. **Hero Section**: "Create a full-width hero section on a Night (#0D0D0B) background with a 70% Night overlay over a placeholder image. Left-aligned content with max-width 600px: overline 'Pacific Northwest rope manufacturer' in Inter 12px uppercase Rawhide (#8A7D6B) with 0.08em tracking, headline 'BUILT FOR THE ARENA' in Barlow Condensed 64px bold uppercase Cream (#F2E8D5) with -0.02em tracking, subhead in Inter 18px Buckskin (#C6B598), and a CTA button with Copper (#C4813A) background, Night (#0D0D0B) text, Inter 14px semibold uppercase, 12px/32px padding, 8px radius. No shadows, no gradients."

2. **Product Category Card**: "Create a product card on Gunmetal (#2A2D30) with 1px border in Steel at 20% opacity and 8px radius. 1:1 image area flush to top edges, then 16px padding below for text: category name in Barlow Condensed 18px semibold Cream (#F2E8D5), one-line description in Inter 14px Buckskin (#C6B598). On hover, border transitions to Buckskin (#C6B598) over 250ms. No shadow, no gradient. Page background is Night (#0D0D0B)."

3. **Audience CTA Card**: "Create a text-only card on Gunmetal (#2A2D30), 1px Steel border at 20%, 8px radius, 24px internal padding. Heading in Barlow Condensed 20px semibold Cream (#F2E8D5), 2–3 line description in Inter 14px Buckskin (#C6B598) with 1.6 line-height, and a text link in Copper (#C4813A) Inter 14px medium with arrow suffix. On hover, border transitions to Buckskin. No shadow. Night (#0D0D0B) page background."

4. **Primary Button**: "Create a button with Copper (#C4813A) background, Night (#0D0D0B) text, Inter 14px semibold uppercase with 0.04em tracking. Padding 12px vertical, 32px horizontal. Border radius 8px. No shadow, no border. On hover, background transitions to Copper Hover (#D4914A) over 150ms. On active/press, background Copper Dark (#A06A2E)."

5. **Spec Table on Light Background**: "Create a specifications table on a Cream (#F2E8D5) background section with 12px border radius and 32px padding. Table rows separated by 1px Buckskin (#C6B598) at 30% opacity borders. Labels in Inter 14px medium uppercase Night (#0D0D0B) with 0.06em tracking on the left. Values in Inter 16px medium Night (#0D0D0B) on the right. No row striping, no outer border, no shadow. The Cream section sits within a Night (#0D0D0B) page."

### Iteration Guide
1. Focus on ONE component at a time
2. Reference specific color names — "use Copper (#C4813A)" not "make it orange"
3. Always specify the neutral undertone — no blue-gray or pure-gray tones if the text system is warm (Rawhide, Buckskin, Cream are warm neutrals)
4. Describe font-role mapping explicitly — "Barlow Condensed for the heading, Inter for the description"
5. For depth, use surface color stepping — "Gunmetal card on Night background" not "add a drop shadow"
6. Specify the background surface — "on Night (#0D0D0B)" or "on Cream (#F2E8D5)" — because text colors reverse between them
7. Photography is the only visual content — no illustrations, decorative icons, or graphic dividers
8. When in doubt, go darker and more restrained — PNW's brand personality is quiet confidence, not loud energy