# Design System — PNW Select Rope

## Meta

- **Company**: PNW Select Rope
- **Source URL**: https://pnwselect.com/
- **Scanned at**: 2026-04-23
- **Scanner version**: 1.0.0
- **Pages scanned**: homepage
- **Samples captured**: 37
- **Stylesheets fetched**: 0 (CSS is inlined in `<style>` tags by the GoDaddy builder — tokens were extracted from computed styles on DOM samples)

## Framework & CMS

- **CSS framework**: Custom / unclassified (none)
  - Signals: no Tailwind, Bootstrap, Bulma, or Foundation markers in markup
- **CMS**: GoDaddy Website Builder 8.0 (high — overriding the deterministic detector)
  - Signals: `<meta name="generator" content="Starfield Technologies; Go Daddy Website Builder 8.0.0000">`; body class `x x-fonts-playfair-display x-fonts-source-sans-pro x-fonts-montserrat` (GoDaddy `x-*` convention); all scripts served from `img1.wsimg.com/blobby/go/static/radpack/@widget/…`; template family `bs-layout13-Theme-publish`
- **Page builders**: GoDaddy Website Builder (layout-13 theme) — high confidence

## Colors

| Role | Hex | Name | Confidence | Count |
|---|---|---|---|---|
| background | #000000 | night | high | 74 |
| surface | #161616 | ink | medium | 2 |
| contrast | #ffffff | snow | high | 58 |
| contrast-alt | #e2e2e2 | mist | low | 1 |
| base | #969696 | steel | high | 72 |
| base-light | #c1c1c1 | fog | medium | 4 |
| base-dark | #919191 | ash | low | 1 |
| primary | #1bdbdb | brand-teal | low | 1 |
| primary-dark | #09757a | deep-teal | medium | 2 |
| secondary | #8995a9 | slate | medium | 4 |

### Unmapped colors
| Hex | Name | Count |
|---|---|---|
| #ffff00 | focus-yellow | 1 |

## Typography

### Font families
- **Heading**: `"Playfair Display", Georgia, serif` — source: self-hosted (via GoDaddy `@font-face`)
- **Body**: `"Source Sans Pro", arial, sans-serif` — source: self-hosted (via GoDaddy `@font-face`)
- **Display / wordmark**: `Montserrat, sans-serif` — source: self-hosted (via GoDaddy `@font-face`); used for the "PNW Select Rope" logotype (h3, 26px/700, tracked)
- **Mono**: [NOT DETECTED]

### Google Fonts detected
(none — fonts are self-hosted by GoDaddy's CDN rather than loaded from fonts.googleapis.com, but all three face names — Playfair Display, Source Sans Pro, Montserrat — are Google Fonts originals)

### @font-face families detected
- GD Sherpa (GoDaddy UI font — cookie banner, admin chrome; not part of the public brand)
- Montserrat
- Playfair Display
- Source Sans Pro

### Type scale
| Slug | px | rem | Occurrences |
|---|---|---|---|
| xs | 12 | 0.75 | 5 |
| sm | 14 | 0.875 | 8 |
| md | 16 | 1.000 | 21 |
| lg | 22 | 1.375 | 2 |
| xl | 26 | 1.625 | 2 |
| 3xl | 44 | 2.750 | 2 |
| 4xl | 62 | 3.875 | 1 |

### Weights seen
- 300 (light) — 14
- 400 (regular) — 53
- 600 (semibold) — 5
- 700 (bold) — 29
- 900 (black) — 4
- `bold` (keyword) — 3

### Line heights seen
- 18px, 21px, 24px, 28px — body/caption ranges
- 27.5px, 31.2px — subhead ranges
- 52.8px, 61.6px, 74.4px — display ranges (approx. 1.2× the px size)
- 1.75 (unitless) and `1rem` — occasional

### Letter spacing seen
- `4px` — wide tracking on the uppercase "PNW SELECT ROPE" wordmark (2 occurrences)
- `0.994px` — 1
- `normal` — 1

## Spacing

### Scale
| Slug | px | rem | Occurrences |
|---|---|---|---|
| 10 | 4 | 0.25 | 4 |
| 20 | 8 | 0.5 | 29 |
| 25 | 12 | 0.75 | 4 |
| 30 | 16 | 1.0 | 17 |
| 35 | 20 | 1.25 | 2 |
| 40 | 24 | 1.5 | 12 |
| 45 | 28 | 1.75 | 1 |
| 50 | 32 | 2.0 | 3 |
| 55 | 40 | 2.5 | 1 |
| 60 | 56 | 3.5 | 4 |

### Section rhythm
- Typical vertical section padding: 56px top / 56px bottom (observed on main content + footer sections)
- Typical element gap: 16px (body spacing) / 24px (h4 margin) / 40px (h2 margin-block)

## Layout

- **Container max-width (contentSize)**: [NOT DETECTED reliably] — the only captured `max-width` was 445px on a narrow widget (cookie banner or dynamic tagline container). Sections render at the full viewport width (1440px observed). **Default to 1200px** for downstream use.
- **Wide max-width (wideSize)**: [DEFAULTED to 1400px]
- **Container selectors observed**: (none — GoDaddy's `.x.c1-*` generated class names are unstable)
- **Breakpoints**: [NOT DETECTED — no media queries resolvable from samples]. Suggested defaults:
  - `sm: 640px`
  - `md: 768px`
  - `lg: 1024px`
  - `xl: 1280px`
  - `2xl: 1536px`

## Effects

### Border radius
| Slug | Value | Occurrences |
|---|---|---|
| xs | 2px | 1 |
| sm | 3px | 1 |
| md | 4px | 26 |
| lg | 5px / 6px | 2 |
| xl | 8px | 4 |
| 2xl | 12px | 7 |
| full | 9999px (pill) | present (has_pill=true) |

### Shadows
| Slug | Value |
|---|---|
| — | [NOT DETECTED — the design is flat; no `box-shadow` values appeared in 37 samples] |

### Transitions
- Typical duration: 300ms
- Typical easing: `ease`
- Full shorthand example: `all 0.3s ease`

### Hover behavior
Not directly captured (hover states live in `:hover` CSS blocks). From the design language — dark theme with thin teal accent line at top of page — expect button fills to lighten to `#e2e2e2` or the slate `#8995a9`, and link color to shift from `#09757a` (deep-teal) toward `#1bdbdb` (brand-teal).

## Components

### Buttons (primary)
- Source sample: `button.banner-button.banner-desktop` (the "Learn More" CTA in the GoDaddy SEO banner — shape-consistent with the site's CTA treatment)
- Background: `#ffffff` (snow)
- Text color: `#000000` (night)
- Font: `GD Sherpa, Helvetica, Arial, sans-serif` on the banner; real site CTAs use `Montserrat` or `Source Sans Pro`
- Font size: 14px, weight 400
- Padding: 8px 24px (2px 24px baseline + 6px inner)
- Border-radius: 4px
- Shadow: none
- Pattern: inverted fill — white button on black surface

### Buttons (secondary)
[NOT DETECTED] — only one button pattern surfaced in the 37-sample capture; the inline "ACCEPT" cookie button uses the same white-on-black inversion.

### Cards
[NOT DETECTED] — the homepage is a single hero + contact form, no card-style content tiles were captured.

### Navigation (header)
- Source sample: `nav.x-el.x-el-nav.c1-1.c1-2`
- Background: transparent (`rgba(0,0,0,0)` over the black body)
- Wordmark: `h3#logo-text` → "PNW Select Rope" in Montserrat 26px/700, white `#ffffff`, tracked uppercase (letter-spacing 4px)
- Height: compact — padding 0 on the `nav`, internal section padding 56px top/bottom
- Link styling: `#09757a` deep-teal link color; header layout centered

### Footer
- Source sample: section containing "Copyright © 2025 PNW Select Rope - All Rights Reserved."
- Background: `#000000` (night)
- Text color: steel `#969696` at 16px, Source Sans Pro
- Padding: 56px top / 56px bottom
- Thin teal accent line (~2px) at the very top of the page (brand-teal `#1bdbdb`) — appears to be a global top border, not footer-specific

### Hero
- Source sample: h1 inside first section of main (`h1#dynamic-tagline-103597`)
- Background: solid `#000000` (night) — no `background-image`
- Heading: "Farm & Utility Proven. Built to Last." in Playfair Display 62px / 400 / line-height 74.4px, color `#ffffff`
- Subhead / supporting text: none rendered above-the-fold
- CTA: none in the hero itself — the site funnels to the "Contact Us" form further down the page

### Forms
- Source sample: `form.x-el.x-el-form.c2-1.c2-2` ("Drop us a line!" contact form)
- Heading: `h4` 22px Source Sans Pro, color `#e2e2e2`
- Input: `#ffffff` background, `#000000` text, Arial 13.3px, padding 1px 2px, border-radius 0px (inputs) / 4px (textarea)
- Textarea: 16px padding all sides, `border-radius: 4px`, placeholder color `#ababab`
- Labels: `#969696` (steel), 16px, Source Sans Pro
- Submit button: inferred to follow the white-on-black primary pattern

## Assets

- **Logo**: `assets/logo.jpeg` (source: client-provided `HorseHeadLogo.docx`, image1.jpeg extracted — horse-head-formed-from-rope mark on black background, cream/tan rope texture)
- **Screenshot**: `raw-scan/screenshot.png`
- **Raw artifacts**: `raw-scan.json`, `tokens.json`, `framework.json`, `raw-scan/html.html`, `raw-scan/logos/` (8 GoDaddy default-logo apple-touch-icon PNG placeholders — not the real brand mark; kept for provenance only)

## Manual Review

- **Site is a GoDaddy Website Builder 8.0 template (layout-13 theme).** The deterministic framework detector returned "none" because the builder ships custom runtime classes (`x x-fonts-*`, `c1-*`); treat the generator tag + body-class pattern + `img1.wsimg.com/blobby/go/static/radpack/@widget/LAYOUT/bs-layout13-Theme-publish-*` script URL as authoritative. Downstream redesign should ignore the GoDaddy scaffolding entirely.
- **Real logo was supplied by the client** (`HorseHeadLogo.docx`), not scraped. The scanner's 8 logo candidates are all `pwa-app/logo-default.png` — GoDaddy's generic placeholder — and were not selected. The horse-head-from-rope image is the brand mark and must be preserved in the redesign. The current live site does not display an image logo; it shows a text wordmark only.
- **Primary brand color `#1bdbdb` has low confidence (count 1).** It appears as the thin horizontal accent line at the top of the page and is the strongest chromatic signal on the site. The darker variant `#09757a` (count 2) is the link color. Treat the teal family as the brand accent but confirm the exact hex with the client before finalizing.
- **Dark theme is dominant.** Black `#000000` is the canonical page background (74 occurrences), white `#ffffff` is the canonical text on dark (58). All typography is designed to read on black. Any redesign should either preserve the dark theme or make the theme-flip an explicit, deliberate decision discussed with the client.
- **Shadows section is empty.** The design is strictly flat — depth/elevation is communicated by surface-color shift (`#000000` → `#161616`) rather than box-shadow. Downstream design system can add a subtle elevation ramp if cards are introduced.
- **Layout contentSize is defaulted.** Only a 445px max-width was captured (cookie banner). Sections render edge-to-edge at the full 1440px viewport. Default contentSize=1200px, wideSize=1400px for downstream; confirm with the client whether they want a constrained container in the redesign.
- **Breakpoints defaulted** to the Tailwind canonical set (`sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536`) since no framework or media queries were resolvable.
- **Samples were thin (37).** The homepage is a single hero + contact form section; there are no About / Services / Service-Single pages on the current live site. The redesign will need to generate these from scratch — `design-system-builder` and `mockup-generator` should be told the source site is content-sparse and that full page templates must be composed rather than ported.
- **Typography mix is clean and on-brand for the sector.** Playfair Display (elegant serif display) over Source Sans Pro (neutral humanist sans), with Montserrat for the spaced-out uppercase wordmark, is a fitting pairing for a "Farm & Utility Proven. Built to Last." rancher/equestrian-rope voice — traditional + workwear-modern. Recommend carrying these three families through to the redesign.
- **Font source classification caveat.** The three public-brand families are served via GoDaddy's CDN `@font-face` rules (self-hosted) rather than Google Fonts `<link>` tags, but all three are available on Google Fonts under identical names — the redesign can safely swap to Google Fonts without visual drift.