---
version: alpha
name: "Great Jones"
description: "Design system for Great Jones — the colorful, kitchen-confident cookware brand where saturated enamel hues meet warm cream and a Cooper Black serif spirit."

colors:
  # Surface / canvas
  background: "#fffaf5"
  surface: "#faeddf"
  surface-warm: "#ede1d4"  # slightly deeper warm — section dividers, alt rows

  # Text / ink
  ink: "#000000"
  on-background: "#000000"
  on-surface: "#000000"

  # Brand accent
  primary: "#0e5540"         # Broccoli — the dominant brand green; CTAs, key highlights
  on-primary: "#faeddf"      # warm cream on dark green
  primary-hover: "#0a3d2e"   # /* estimated — deeper green for hover state */

  # Product palette — enamel cookware colors
  blueberry: "#243d94"       # cobalt / Blueberry SKU
  mustard: "#f4a620"         # warm gold / Mustard SKU
  taffy: "#df95a1"           # dusty pink / Taffy SKU
  raspberry: "#960047"       # deep magenta / Raspberry SKU
  pepper: "#000000"          # Pepper (matte black)
  salt: "#ffffff"             # Salt (bright white)

  # Neutrals / chrome
  tan: "#a49483"             # warm brown-gray — hairline dividers, quiet UI chrome
  tan-light: "#beb4aa"       # lighter tan — secondary borders
  ink-muted: "#4d4d4d"       # body text on cream

  # States
  focus-ring: "#0e5540"
  error: "#e40f0f"

  # Shadows
  shadow-soft: "#ede1d4"     # warm tan tint for shadows

typography:
  display-hero:
    fontFamily: "CooperBT, Times, Times New Roman, serif"
    fontSize: 96px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.02em
  display:
    fontFamily: "CooperBT, Times, Times New Roman, serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.01em
  heading-section:
    fontFamily: "CooperBT, Times, Times New Roman, serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "CooperBT, Times, Times New Roman, serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "HopeSans, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "HopeSans, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "HopeSans, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  button-ui:
    fontFamily: "HopeSans, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "HopeSans, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-ui:
    fontFamily: "HopeSans, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 3px
  md: 5px
  lg: 10px
  xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 7px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 7px 28px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 7px 28px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary-hover}"
    borderColor: "{colors.primary-hover}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 7px 28px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 7px 28px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 16px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.tan}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.mustard}"
    textColor: "{colors.blueberry}"
    typography: "{typography.label-ui}"
    rounded: "{rounded.md}"
    padding: 4px 12px
  swatch:
    rounded: "{rounded.pill}"
    borderColor: "{colors.tan}"
    padding: 0px
  swatch-active:
    rounded: "{rounded.pill}"
    borderColor: "{colors.ink}"
    padding: 0px
---

# Great Jones Design System

## Overview

Great Jones is where the kitchen becomes the most joyful room in the house. The brand's visual identity is built on a single confident premise: that cookware should be as colorful and characterful as the food you make in it. The default canvas is a warm off-white cream (`{colors.background}`) — never cold white, never clinical — and the signature dark-green Broccoli (`{colors.primary}`) anchors every call to action with quiet authority. Every surface breathes; every accent earns its place.

The typographic heart of the brand is Cooper BT (`{typography.display-hero}`), a rounded, bracket-serifed display face that carries enormous warmth. At hero scale — running at near-viewport-width in the main banner — it fills the page like a vintage seed packet without any of the overwrought retro nostalgia. The sans-serif counterpart, HopeSans (`{typography.body}`), is clean and functional: it never competes, it only clarifies. The pairing is confident in its contrast — Cooper BT for all moments of personality, HopeSans for all moments of service.

The product palette is the color system. Blueberry (`{colors.blueberry}`), Mustard (`{colors.mustard}`), Taffy (`{colors.taffy}`), Raspberry (`{colors.raspberry}`), Pepper, and Salt aren't lifestyle names — they're pantry names. The whole site is organized around these enamel hues: they appear as swatches on product tiles, as hero backgrounds that match the cookware photography, and as accent colors in CTAs and editorial callouts. Great Jones doesn't apply a separate UI palette on top of its product colors; the products ARE the palette.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`, `{colors.surface}`) — the default neutral is always toasted, never white
- Cooper BT at weight 500, tracking −0.02em at hero scale — rounded serif confidence, not slab rigidity
- Dark Broccoli green (`{colors.primary}`) as the brand's sole CTA color — consistent, restrained, unmissable
- Warm cream-on-green button text (`{colors.on-primary}`) — the button itself is a brand moment
- Six named product colors (Blueberry, Mustard, Taffy, Raspberry, Pepper, Salt) that double as the UI palette
- `border-radius: 5px` for all primary interactive elements — subtly rounded, never pill, never sharp
- Tan dividers (`{colors.tan}`) for all hairlines — warm gray, never cool neutral
- Mustard (`{colors.mustard}`) as editorial accent — used sparingly for badges and blog CTAs
- HopeSans at weight 600–700 for all uppercase nav labels — deliberate spaced authority
- Motion: 0.15s ease-in-out for buttons, 0.5s ease for product card reveals

## Colors

### Primary Canvas
- **Warm Cream** (`{colors.background}`): The page canvas — used for the default background. Never pure white; always carries a slight ivory warmth that references the unglazed exterior of the cookware.
- **Soft Cream** (`{colors.surface}`): Slightly deeper warm cream — header bar backgrounds, section alternates, hero borders with `data-header=withBeigeBg`. Visually distinct from `background` at a glance.
- **Warm Tan** (`{colors.surface-warm}`): Tertiary surface — used for section dividers, article pre-roll bands, and the darkest quiet background.

### Brand Green
- **Broccoli** (`{colors.primary}`): The signature — the single brand color that unifies everything. All primary CTAs, the add-to-cart button, focus rings, selection highlights. Deep, forested, appetizing — a cookware brand's take on "nature."
- **On-Primary** (`{colors.on-primary}`): Warm cream text on Broccoli surfaces — the button text color. The pair feels considered: neither pure white nor warm neutral, it reads as a brand choice.

### Product / Enamel Palette
- **Blueberry** (`{colors.blueberry}`): Deep cobalt. Used on Blueberry SKU swatches, editorial pagination dots, and the blog hero CTA text. The system's most assertive color.
- **Mustard** (`{colors.mustard}`): Warm amber-gold. The system's secondary editorial accent — blog CTAs (`#f4a620` background on `.blog-hero__cta`), badge fills, product highlight moments.
- **Taffy** (`{colors.taffy}`): Dusty rose. Feminine without being pastel-weak. Appears as a swatch and occasional hero tint.
- **Raspberry** (`{colors.raspberry}`): Deep magenta-burgundy. The most dramatic SKU color — reserved for product moments, not UI chrome.
- **Pepper / Salt**: Black (`#000000`) and white (`#ffffff`) SKU anchors — handled as product photography values, not UI system colors.

### Chrome & Neutrals
- **Tan Divider** (`{colors.tan}`): The system's hairline color — a warm brown-gray used for `<hr>`-style dividers, quiet borders, and pre-section rules. Never blue-gray.
- **Tan Light** (`{colors.tan-light}`): Lighter variant — swatch borders in default/unselected state.
- **Ink Muted** (`{colors.ink-muted}`): Secondary body copy on cream surfaces — softer than pure black, still readable.

## Typography

### Font Family
- **Display / Heading**: `CooperBT`, with fallbacks `Times, Times New Roman, serif`. Cooper BT is a rounded-bracket Roman with warmth built into every letterform — the descenders of the `p`, `q`, `y` all feel like they belong in a kitchen.
- **Body / UI**: `HopeSans`, with fallbacks `Helvetica, Arial, sans-serif`. A clean geometric sans used for all copy below display scale and all interactive UI.
- **Note**: Both fonts are proprietary — Cooper BT (Bitstream's Cooper) is widely licensed; HopeSans is a custom variant. Closest Google Font substitutes: `Playfair Display` or `Libre Baskerville` for Cooper BT; `DM Sans` or `Plus Jakarta Sans` for HopeSans.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Main hero headline — runs at viewport-scale (`14vw`), letterSpacing −0.02em. The brand's loudest voice. |
| `display` | Section display heads at fixed scale — "Make your kitchen your happy place." |
| `heading-section` | Section-level CooperBT heads — recipe titles, collection intros, article h2. |
| `heading-sub` | Sub-section Cooper heads — product info h3, sidebar titles. |
| `body-large` | First-paragraph lead copy — `hero__copy` at 24px/500. |
| `body` | Standard reading text and form copy. |
| `nav-link` | HopeSans 15px/600 — navigation bar links and top-hat utility copy. |
| `button-ui` | HopeSans 18px/700 — all interactive button labels. |
| `caption` | HopeSans 13px/400 — prices, legal, metadata. |
| `label-ui` | HopeSans 14px/700 — badges, uppercase labels. |

### Principles
- **Cooper BT is the brand's voice, HopeSans is its assistant**: every word of personality is in Cooper BT; every instruction is in HopeSans. Mixing them on the same line is off-brand.
- **Display sizes use negative tracking**: −0.02em at hero scale makes Cooper BT feel even more like a printed label — dense, deliberate, tactile.
- **Weight 500 for all CooperBT**: Great Jones never pushes the display font into bold weight territory. The letterforms are already authoritative; additional weight would feel slab-heavy.
- **HopeSans buttons are always 700**: the action weight is always heavy in sans-serif — there's no ambiguity about what's pressable.
- **All-caps nav labels at HopeSans 600 with no extra tracking**: unlike most systems that add wide tracking to uppercase UI, Great Jones keeps nav labels tightly spaced — readable, confident, not shouted.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block. Base unit: 8px.

Great Jones spaces generously at the section level (64–96px vertical padding between major sections) and more economically inside tiles and component chrome. The wide breathing room between sections reinforces the editorial quality of the site — every section deserves a moment before the next.

### Grid & Container
- Max content width: approximately 1178px (explicitly set on `.article-products`)
- Hero: full-viewport-width image with overlay text; no hard container
- Product grid: 4-column desktop → 2-column tablet → 1-column mobile
- Blog grid: 3-column desktop → 1-column mobile
- Breakpoints: 685px, 480px, 380px, 369px, 367px, 320px (Foundation grid)

### Whitespace Philosophy
- **Generous section breathing room**: 50–96px vertical padding at section level keeps the page from feeling like a catalog, even though it is one.
- **Tight component chrome**: Inside tiles and cards, padding is economical (16–24px). The product photography provides visual richness; chrome stays quiet.
- **No decorative dividers on white**: Section changes are handled by background-color shifts (cream → warm cream → tan-cream) rather than borders. The tan `{colors.tan}` hairline appears only when sections share the same background.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, color-band sections, product tiles at rest |
| Subtle (Level 1) | `0 2px 8px rgba(164, 148, 131, 0.15)` | Navigation bar on scroll, sticky header |
| Card (Level 2) | `0 4px 16px rgba(164, 148, 131, 0.12)` | Product cards on hover, cart drawer |
| Elevated (Level 3) | `0 8px 24px rgba(164, 148, 131, 0.14)` | Modals, drawers |
| Focus Ring | `0 0 0 2px {colors.focus-ring}` | All keyboard-focusable elements |

**Shadow Philosophy**: Great Jones uses warm-tinted shadows throughout — the shadow color references `{colors.tan}` / `{colors.shadow-soft}`, never pure black. The system is almost entirely flat at rest; depth arrives only on hover and for floating UI like the cart drawer. This restraint keeps the focus on the product photography, which provides its own chromatic richness. Shadows are gentle signals, not structural elements.

## Shapes

The complete radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed hero images, section backgrounds |
| `sm` | 3px | Small UI details, fine borders |
| `md` | 5px | All primary interactive elements — buttons, inputs, blog CTAs |
| `lg` | 10px | Larger cards, product tile containers |
| `xl` | 20px | Feature cards, oversized callout containers |
| `pill` | 9999px | Color swatches (circular), social icon buttons |

The system is deliberately low-radius. The dominant value is `5px` — just enough to soften a corner, never enough to suggest a pill. This matches the cookware's own aesthetic: the Dutch ovens and skillets have gently curved edges, not sharp angles, but also not the exaggerated rounding of a "friendly" consumer brand. The circular swatch tiles (`{rounded.pill}`) are the sole exception.

## Components

The complete component spec is in the `components:` token block.

### Button variants

- **`button-primary`** — Broccoli green (`{colors.primary}`) with warm cream text (`{colors.on-primary}`), `5px` radius, `7px 28px` padding. The most-used button across the site — add-to-cart, hero CTAs, newsletter signup. Transition: `background 0.2s, color 0.2s`.
- **`button-secondary`** — Cream background with Broccoli text and Broccoli border. Used for secondary actions alongside a primary: "Learn More", "Shop All".
- **`button-ghost`** — Transparent background, Broccoli border and text. Used on light cream surfaces for tertiary actions.

### Cards

**Product Tile**
- Background: page canvas (`{colors.background}`)
- Radius: `{rounded.lg}` (10px)
- Contains: product photography (aspect-ratio square), product name in CooperBT, price in HopeSans caption, color swatch row
- Hover: subtle elevation + image zoom

**Blog / Editorial Card**
- Background: `{colors.surface}` warm cream
- Radius: `{rounded.md}` (5px)
- Contains: hero image, badge (Mustard fill, Blueberry text), heading in CooperBT, credit line in HopeSans

### Inputs

Default: white background, `{colors.tan}` border, `{rounded.md}`, `12px 16px` padding, HopeSans body type. Focus: border shifts to `{colors.focus-ring}` Broccoli green — no glow halo, just crisp color change. Email newsletter inputs use the same spec.

### Badges / Tags

Primary editorial badge: Mustard (`{colors.mustard}`) background, Blueberry (`{colors.blueberry}`) text, `5px` radius, `4px 12px` padding, HopeSans 14px/700. Used for blog category labels and "NEW" product callouts.

### Color Swatches

Round pill shape (`{rounded.pill}`) filled with the raw enamel hex: `{colors.blueberry}`, `{colors.mustard}`, `{colors.taffy}`, `{colors.raspberry}`, `#000000`, `#ffffff`. Default border: `{colors.tan-light}`. Selected border: `{colors.ink}` (2px, solid). A subtle ring rather than an overlay ensures the color itself remains fully visible.

### Navigation

White (`#ffffff`) sticky header with CooperBT wordmark (circular lozenge logo form) left-aligned. Links: HopeSans 15px/600. A warm cream top-hat promo bar sits above the nav (using `{colors.surface}` background). On scroll, nav gains a subtle shadow. Mobile: hamburger to full-screen overlay in warm cream.

## Do's and Don'ts

### Do
- Use Cooper BT for all display headings — it IS the brand voice, there is no substitute
- Apply `{colors.primary}` (Broccoli) exclusively to primary CTAs and focus rings — its scarcity preserves its authority
- Set the default page background to `{colors.background}` — warm off-white, not pure white
- Use the product palette (`{colors.blueberry}`, `{colors.mustard}`, etc.) for editorial accents, SKU swatches, and hero tints — these are the brand's accent language
- Apply `border-radius: 5px` (`{rounded.md}`) to all interactive elements — the subtle softness is a deliberate brand choice
- Use `{colors.tan}` for all hairline dividers — warm, not cool
- Keep Cooper BT at weight 500 — the brand uses medium weight, not bold; the letterforms do the work
- Reserve Mustard (`{colors.mustard}`) for editorial highlights, badges, and secondary CTAs where Broccoli would be too dominant
- Let product photography be the primary visual interest — the UI chrome stays warm and understated

### Don't
- Don't use pure white (`#ffffff`) as the page canvas — Great Jones's warmth lives in the cream base
- Don't apply pill radius to buttons or inputs — `5px` is the system's shape language; pills belong only to swatches
- Don't use multiple accent colors in the same UI section — pick one (Blueberry or Mustard), not both
- Don't use Cooper BT at weights below 500 or above 600 — the brand lives in the medium register
- Don't apply `{colors.primary}` to secondary actions — it must remain a CTA signal
- Don't use cool-gray or blue-gray for dividers or shadows — the system is warm throughout
- Don't add gradient fills to UI surfaces — Great Jones is flat color blocks
- Don't use HopeSans for any headline above 20px — that territory belongs to Cooper BT
- Don't introduce new colors beyond the six product palette colors — the palette is closed and intentional
- Don't use Raspberry (`{colors.raspberry}`) for UI elements — it's a product color, not a UI accent

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <320px | Single-column, minimum text sizes, stacked CTAs |
| Mobile | 320–480px | Single-column, hero drops to 1.75rem CooperBT, 16px horizontal padding |
| Mobile Mid | 480–685px | Product grid 2-column, hero heading scales up |
| Tablet | 685–1024px | 3-column product grid, blog 2-column, hero 2-column layout |
| Desktop | ≥1024px | 4-column product grid, hero full-viewport, 1178px article max-width |

### Touch Targets
- All buttons: minimum 40px height (explicit in CSS — `height:40px` on core button variants)
- Product tile swatches: minimum 24×24px visual, wrapped in larger tap area
- Nav links: 44px tap height via vertical padding

### Collapsing Strategy
- **Nav**: Horizontal utility nav collapses to hidden on mobile; main nav collapses to hamburger icon below ~685px
- **Hero**: Viewport-scale CooperBT (`14vw`) on desktop falls back to `1.75rem` (small mobile size attribute) with explicit font-size — the design system uses data-attributes to control this: `[data-copy-size-mobile=small]`
- **Product grid**: 4 → 2 → 1 columns
- **Spacing**: Container horizontal padding reduces from ~20px desktop to tighter gutters on mobile; section vertical padding reduces 64px → 32px
- **Header height**: 88px desktop (`data-header=withBeigeBg`) → 78px mobile (`data-header-mobile=withBeigeBg`)

### Image Behavior
- Product photography scales fluidly within tile aspect-ratio containers
- Hero images are background-cover, full-viewport — art direction via Shopify's content attributes
- Color swatch images are fixed 20×20px circles (CSS-colored, not photography)

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (warm off-white)
- Surface / section alt: `{colors.surface}` (soft cream)
- Primary text: `{colors.ink}`
- Secondary text: `{colors.ink-muted}`
- Brand CTA: `{colors.primary}` (Broccoli green)
- CTA text: `{colors.on-primary}` (warm cream)
- Divider: `{colors.tan}`
- Accent — Blueberry: `{colors.blueberry}`
- Accent — Mustard: `{colors.mustard}`

### Example Component Prompts

- "Build a Great Jones hero section. Full-viewport background image with warm overlay. Headline in Cooper BT at 14vw (capped ~96px desktop), weight 500, color `{colors.on-primary}` (`#faeddf`), letter-spacing −0.02em, line-height 1.0. Subline in HopeSans 24px/500, same cream. CTA button: background `{colors.primary}` (`#0e5540`), text `{colors.on-primary}`, HopeSans 18px/700, `border-radius: 5px`, padding `7px 28px`. Page background `{colors.background}` (`#fffaf5`)."
- "Design a Great Jones product tile grid, 4 columns, on `{colors.background}`. Each tile: white card background, `border-radius: 10px`, square product image at top, product name in CooperBT 18px/500 below, price in HopeSans 15px/400. Below name, a row of color swatch circles (24×24px pills): fill `{colors.blueberry}` (`#243d94`), `{colors.mustard}` (`#f4a620`), `{colors.taffy}` (`#df95a1`). Default swatch border `{colors.tan-light}`, selected swatch border 2px `{colors.ink}`."
- "Create a Great Jones section card in Cooper BT. Background `{colors.surface}` (`#faeddf`). Heading 40px weight 500, ink `{colors.ink}`. Body in HopeSans 16px/400, color `{colors.ink-muted}` (`#4d4d4d`). Divider above section: 1px `{colors.tan}` (`#a49483`). Secondary button: border 1px `{colors.primary}`, text `{colors.primary}`, background `{colors.surface}`, `border-radius: 5px`, HopeSans 18px/700, padding `7px 28px`."
- "Build a Great Jones editorial badge. Background `{colors.mustard}` (`#f4a620`), text `{colors.blueberry}` (`#243d94`), HopeSans 14px/700, `border-radius: 5px`, padding `4px 12px`. Use for category labels on blog cards alongside a CooperBT heading and HopeSans credit line on `{colors.surface}` card background."
- "Design a Great Jones email signup bar on `{colors.primary}` (`#0e5540`) background. Heading: CooperBT 40px/500, color `{colors.on-primary}`. Input: white background, `border-radius: 5px`, HopeSans 16px/400, padding `12px 16px`, border `1px solid {colors.tan-light}`. Submit button: background `{colors.mustard}` (`#f4a620`), text `{colors.blueberry}` (`#243d94`), HopeSans 18px/700, `border-radius: 5px`, padding `7px 28px`."
- "Create a Great Jones navigation bar. Background `{colors.surface}` (`#faeddf`) top-hat promo bar above, white main nav bar below. Logo: CooperBT circular lozenge wordmark, left-aligned. Nav links: HopeSans 15px/600, color `{colors.ink}`. Right: cart icon and account link. Nav height 88px desktop, sticky on scroll with subtle warm tan-tinted shadow `0 2px 8px rgba(164, 148, 131, 0.15)`."

### Iteration Guide

1. Start with `{colors.background}` (`#fffaf5`) — this warm off-white is the baseline of everything; cold white is off-brand
2. Every CTA gets `{colors.primary}` fill with `{colors.on-primary}` cream text — there's only one green; protect it
3. Display type is always Cooper BT at weight 500 — the rounded serif IS the personality; switching to sans or bold destroys the warmth
4. All interactive elements use `border-radius: 5px` (`{rounded.md}`) — never pill for buttons, never sharp for cards
5. Reach for Mustard (`{colors.mustard}`) for secondary editorial moments; reach for Blueberry (`{colors.blueberry}`) when you need the deepest accent; don't use both in the same view
6. Dividers and subtle borders: always `{colors.tan}` (`#a49483`) — warm brown-gray, never slate or gray
7. Cooper BT for identity, HopeSans for instruction — the rule has no exceptions below `display-hero`

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Great Jones. Brand names and trademarks belong to their respective owners.