Caraway-inspired

# Visual style inspired by Caraway's storefront (Cookware)

A full style reference in DESIGN.md format: tokens in the front matter, then type scale, components, layout, do's and don'ts. Use it for colour, type, spacing and components only — never Caraway's name, logo, product photos, copy or trademarks.

---
version: alpha
name: "Caraway"
description: |-
  A warm, design-led ceramic-cookware brand built on the proposition that pots and pans belong on the counter rather than hidden in a cupboard. Caraway anchors its entire visual system to a soft cream canvas (`#f5efe4`) rather than the sterile white most cookware brands default to — the page reads as a sun-warmed kitchen rather than a hardware showroom. Inside that canvas, type runs in a humanist grotesque (a GT America / Söhne-family sans) at modest weights, with display headlines sitting at 36–56px in weight 500 rather than the heavy 700+ that fitness and DTC food brands lean on; Caraway trusts photography of cream-and-marigold pans on linen runners to carry the visual weight, not type muscle. Body copy lands in a deep ink-navy (`#0e1c2c`) that reads softer than pure black on the cream surface, with secondary copy stepping down through `#5a5046` (a warm taupe muted) and hairlines drawn in `#e3d9c8` rather than a cold gray. The six signature product colorways — Cream (`#ece2cf`), Sage (`#a8b59a`), Navy (`#2a3a52`), Perracotta (`#d49a8b`), Marigold (`#e9b461`), and Gray (`#a09a91`) — are not just SKU variants but the brand's entire chromatic identity; each was developed from custom Pantone swatches and surfaces everywhere from the homepage hero swatch carousel to the navigation color-chip selectors to footer decorative bands. Buttons are softly rounded rectangles at `{rounded.sm}` (4px) with a deep navy-ink fill (`#0e1c2c`), 14×28px padding, and a 48px tap height — never pills, never sharp corners. Product cards clip at `{rounded.md}` (12px) and carry a horizontal row of small circular color-chip swatches (`{rounded.full}`) below the photo, allowing shoppers to recolor the hero image inline. The shape language across the whole site is gently rounded — `{rounded.md}` on cards, `{rounded.sm}` on buttons, `{rounded.full}` on color chips and badges — reinforcing the brand's "joyful, refined, organic" voice over the harsh-corner aesthetic of competing cookware. Editorial section breaks lean on full-bleed lifestyle photography of cookware in muted-tone kitchens rather than typographic dividers, and the footer drops to a deep `{colors.surface-dark}` band carrying cream link rows, completing the warm-canvas-into-warm-dusk visual arc.

colors:
  primary: "#0e1c2c"
  primary-active: "#000814"
  primary-disabled: "#c8c0b3"
  ink: "#0e1c2c"
  body: "#2c3140"
  muted: "#5a5046"
  muted-soft: "#8a8074"
  hairline: "#e3d9c8"
  hairline-soft: "#efe6d6"
  border-strong: "#c8bca8"
  canvas: "#f5efe4"
  canvas-warm: "#faf5ec"
  surface-soft: "#efe6d6"
  surface-card: "#ffffff"
  surface-strong: "#e8dec9"
  surface-dark: "#1c2536"
  on-primary: "#f5efe4"
  on-dark: "#f5efe4"
  cream: "#ece2cf"
  sage: "#a8b59a"
  navy: "#2a3a52"
  perracotta: "#d49a8b"
  marigold: "#e9b461"
  gray: "#a09a91"
  slate: "#6e7280"
  iconics-black: "#1a1a1a"
  iconics-white: "#f4f0e7"
  gold-hardware: "#b9985a"
  badge-best-seller: "#0e1c2c"
  link-underline: "#0e1c2c"
  star-rating: "#0e1c2c"
  scrim: "#1c2536"

typography:
  display-xxl:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', -apple-system, system-ui, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.6px
  display-xl:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', -apple-system, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -1px
  display-lg:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', -apple-system, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.6px
  display-md:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.36px
  display-sm:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.2px
  title-md:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: -0.1px
  title-sm:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.375
    letterSpacing: 0
  body-lg:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0
  body-md:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  caption:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.08px
  caption-sm:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.1px
  eyebrow:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 1.2px
    textTransform: uppercase
  badge:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.6px
    textTransform: uppercase
  button-md:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.6px
    textTransform: uppercase
  button-sm:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.8px
    textTransform: uppercase
  link:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0
  nav-link:
    fontFamily: "'GT America', 'Söhne', 'Helvetica Neue', sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.4px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 12px
  lg: 20px
  xl: 32px
  full: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 80px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
    height: 48px
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
  button-primary-disabled:
    backgroundColor: "{colors.primary-disabled}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: 13px 27px
    height: 48px
  button-tertiary-text:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.link}"
  button-inverse:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
    height: 48px
  text-input:
    backgroundColor: "{colors.canvas-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 14px 16px
    height: 52px
  text-input-focus:
    backgroundColor: "{colors.canvas-warm}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    height: 72px
  nav-announcement-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    height: 36px
  nav-link-active:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
  nav-link-inactive:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.nav-link}"
  hero-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: 64px 48px
  hero-eyebrow:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.eyebrow}"
  product-card:
    backgroundColor: "{colors.canvas-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.title-sm}"
    rounded: "{rounded.md}"
    padding: 16px
  product-card-photo:
    backgroundColor: "{colors.canvas-warm}"
    rounded: "{rounded.md}"
  product-card-title:
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
  product-card-price:
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
  color-swatch-chip:
    backgroundColor: "{colors.cream}"
    rounded: "{rounded.full}"
    height: 20px
  color-swatch-chip-selected:
    backgroundColor: "{colors.cream}"
    rounded: "{rounded.full}"
    height: 20px
  color-swatch-row:
    backgroundColor: transparent
    padding: 8px 0
  color-picker-large:
    backgroundColor: "{colors.cream}"
    rounded: "{rounded.full}"
    height: 32px
  bundle-card:
    backgroundColor: "{colors.canvas-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 24px
  bundle-card-savings-tag:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.badge}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  best-seller-badge:
    backgroundColor: "{colors.badge-best-seller}"
    textColor: "{colors.on-primary}"
    typography: "{typography.badge}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
  new-badge:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.badge}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
  pdp-gallery:
    backgroundColor: "{colors.canvas-warm}"
    rounded: "{rounded.md}"
  pdp-thumbnail:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.sm}"
  pdp-color-selector:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
  pdp-set-includes-row:
    backgroundColor: transparent
    textColor: "{colors.body}"
    typography: "{typography.body-md}"
    padding: 12px 0
  feature-icon-row:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 24px
  testimonial-card:
    backgroundColor: "{colors.canvas-warm}"
    textColor: "{colors.body}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 24px
  press-strip:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.muted}"
    typography: "{typography.caption}"
    padding: 32px 48px
  editorial-band:
    backgroundColor: "{colors.surface-strong}"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: 80px 48px
  rating-row:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
  star-icon:
    backgroundColor: transparent
    textColor: "{colors.star-rating}"
  quantity-stepper:
    backgroundColor: "{colors.canvas-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    height: 48px
  accordion-row:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.title-sm}"
    padding: 20px 0
  footer-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
    padding: 64px 48px
  footer-link:
    backgroundColor: transparent
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
  footer-column-head:
    backgroundColor: transparent
    textColor: "{colors.on-dark}"
    typography: "{typography.eyebrow}"
  newsletter-input:
    backgroundColor: transparent
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 12px 0
    height: 48px
  newsletter-submit:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 44px
  legal-band:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.muted-soft}"
    typography: "{typography.caption-sm}"
---

## Overview

Caraway is the cookware-as-décor brand. Where Le Creuset leans on heavy cast-iron heritage and All-Clad leans on stainless-steel professionalism, Caraway leans on the proposition that ceramic non-stick pans, lid storage racks, and bakeware can be objects you display rather than hide. That positioning shapes every design decision: the page floor is **warm cream** (`{colors.canvas}` — #f5efe4) instead of pure white, the type is **soft grotesque** in weight 400–500 instead of heavy display weights, and the product photography is **lifestyle-led** with cream-and-marigold pans staged on linen runners and oak counters rather than isolated on white seamless.

The brand's single most identifiable asset is its **product colorway palette** — Cream, Sage, Navy, Perracotta, Marigold, Gray, plus Slate, Iconics Black, and Iconics White. These tokens (`{colors.cream}`, `{colors.sage}`, `{colors.navy}`, `{colors.perracotta}`, `{colors.marigold}`, `{colors.gray}`) appear everywhere: as the actual ceramic finish on the pans, as small circular swatch chips beneath product cards (`{component.color-swatch-chip}`), as a large color-picker row on PDPs (`{component.color-picker-large}`), and as decorative chromatic moments inside editorial bands. Each was developed from custom Pantone swatches refined over multiple rounds — they read as a cohesive, mix-and-match family rather than arbitrary SKU options.

Type runs in a **humanist sans-serif** in the GT America / Söhne family. Display headlines sit at 36–64px in weight 500 with negative letter-spacing (-0.6px to -1.6px), tucking the letters tight in the way modern editorial type does — not the loose generous spacing of older display faces. Body sits at 16px / 400 / 1.5 line-height. Button labels are uppercase 14px / 500 with 0.6px tracking — Caraway's one typographic move toward formality, balancing the soft photography with crisp call-to-action labels.

The shape language is **soft but not pillowy**. Buttons are `{rounded.sm}` (4px radius) — softer than hard-cornered enterprise CTAs, but not the fully-rounded pills of marketplace brands. Cards run `{rounded.md}` (12px). Color chips and badges run `{rounded.full}`. There is essentially no hard-cornered surface anywhere except the dark footer band and the announcement bar at the very top.

**Key Characteristics:**
- Warm cream canvas (`{colors.canvas}` — #f5efe4) replaces the default white most cookware brands use — the page reads as a sun-warmed kitchen rather than a hardware store.
- Six signature product colorways (`{colors.cream}`, `{colors.sage}`, `{colors.navy}`, `{colors.perracotta}`, `{colors.marigold}`, `{colors.gray}`) double as the brand's chromatic identity and surface across nav, PDP swatches, footer bands, and editorial moments.
- Type stack walks `'GT America', 'Söhne', 'Helvetica Neue', -apple-system, system-ui, sans-serif`. Display weights stay modest at 500, body at 400; only button labels go uppercase with letter-spacing.
- Buttons are rounded-rectangle (4px / `{rounded.sm}`) with deep-navy fill (`{colors.primary}` — #0e1c2c) and uppercase tracking — not pills, never sharp corners.
- Color swatch row beneath every product card is the signature interaction: small circular chips (`{rounded.full}`) at ~16-20px diameter that recolor the hero photo on hover.
- Cookware-set bundle cards (`{component.bundle-card}`) stack 4–7 SKUs together with a "Save $X" tag (`{component.bundle-card-savings-tag}`) and a single "Choose your color" primary CTA — bundle is the dominant purchase pathway, not single-piece.
- Footer drops to a **deep surface-dark band** (`{colors.surface-dark}` — #1c2536) carrying cream link rows — the only contrasted surface on the entire site, used to close the page.

## Colors

### Brand & Surface
- **Canvas** (`{colors.canvas}` — #f5efe4): The default page floor — a warm cream that softens the entire system. Every editorial band, hero, and product grid sits over this surface.
- **Canvas Warm** (`{colors.canvas-warm}` — #faf5ec): A slightly lighter cream used inside product card surfaces, gallery backgrounds, and form input fills.
- **Surface Soft** (`{colors.surface-soft}` — #efe6d6): A heavier cream used on press strips, feature icon rows, and the inline announcement strip beneath the nav.
- **Surface Card** (`{colors.surface-card}` — #ffffff): True white — used sparingly, only on overlay popovers (mini-cart drawer, account menu) where the cream canvas needs visual separation.
- **Surface Strong** (`{colors.surface-strong}` — #e8dec9): The heaviest cream tint — used as editorial-band background and inside marketing modules where Caraway wants the section to feel weightier.
- **Surface Dark** (`{colors.surface-dark}` — #1c2536): Deep navy-ink — used on the announcement bar at the very top and the full footer band. The only dark surface in the system.

### Product Colorways
These tokens are the brand's chromatic signature. They appear as actual product finishes and as decorative swatches across UI.

- **Cream** (`{colors.cream}` — #ece2cf): Caraway's most popular and best-selling colorway. "A softer, warmer creamy color" rather than stark white.
- **Sage** (`{colors.sage}` — #a8b59a): A muted herb-green that "represents earthy calm — inspired by the freshness of herbs and the stillness of nature."
- **Navy** (`{colors.navy}` — #2a3a52): A deep dusk-blue — the only saturated-dark in the product palette.
- **Perracotta** (`{colors.perracotta}` — #d49a8b): Caraway's signature original — "Terracotta mixed with Pink — modern design meets comfort, a fresh rosy clay that feels warm yet refined."
- **Marigold** (`{colors.marigold}` — #e9b461): A warm sun-yellow that "brings a touch of warmth wherever it goes and pairs beautifully with Cream or Slate."
- **Gray** (`{colors.gray}` — #a09a91): A warm-leaning gray, never cool — sits inside the same warmth family as the cream surface.
- **Slate** (`{colors.slate}` — #6e7280): A bluer-gray accent used in Marigold pairings.
- **Iconics Black** (`{colors.iconics-black}` — #1a1a1a): The upscale Iconics Collection finish — paired with `{colors.gold-hardware}` handles.
- **Iconics White** (`{colors.iconics-white}` — #f4f0e7): The cream-leaning white of the Iconics Collection — also gold-hardware paired.
- **Gold Hardware** (`{colors.gold-hardware}` — #b9985a): The brass-gold accent finish on Iconics handles and select editorial elements.

### Hairlines & Borders
- **Hairline** (`{colors.hairline}` — #e3d9c8): The default 1px border — a warm taupe rather than a cold gray. Used on card outlines, divider rules, and form input outlines.
- **Hairline Soft** (`{colors.hairline-soft}` — #efe6d6): A lighter divider for long-scrolling editorial separators.
- **Border Strong** (`{colors.border-strong}` — #c8bca8): Used on outlined secondary buttons and selected-state swatch rings.

### Text
- **Ink** (`{colors.ink}` — #0e1c2c): The dominant headline and body color — a deep navy-ink that reads softer than pure black on the cream surface.
- **Body** (`{colors.body}` — #2c3140): A slightly muted text token used inside long-form body paragraphs.
- **Muted** (`{colors.muted}` — #5a5046): A warm taupe muted used on captions, meta labels, eyebrow text, and secondary nav links.
- **Muted Soft** (`{colors.muted-soft}` — #8a8074): The lightest text tone — disabled labels and legal copy in the dark footer band.
- **On Primary** (`{colors.on-primary}` — #f5efe4): The canvas cream — reused as the text color on dark navy buttons rather than pure white, keeping the warm-on-warm aesthetic.
- **On Dark** (`{colors.on-dark}` — #f5efe4): Same cream — used on footer link copy over the surface-dark band.

### Accent & Semantic
- **Star Rating** (`{colors.star-rating}` — #0e1c2c): Stars are rendered in ink rather than yellow/gold — keeps the cream surface uncluttered. Caraway uses filled-vs-outlined ink stars, not colored ones.
- **Best Seller Badge** (`{colors.badge-best-seller}` — #0e1c2c): The badge background is the same navy-ink as buttons — reinforcing the single accent color.
- **Scrim** (`{colors.scrim}` — #1c2536 at ~70% opacity): The modal backdrop — uses the dark-surface tone rather than pure black, so modal-over-cream still feels warm.

## Typography

### Font Family
The system runs a **GT America / Söhne-family humanist grotesque** for everything — display, body, navigation, captions, microcopy, buttons. Fallbacks walk `'Helvetica Neue', -apple-system, system-ui, sans-serif`. There is no separate display family; the same variable-weight grotesque carries the entire scale, distinguishing hierarchy through size, weight (400 / 500), and letter-spacing rather than through font swap.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xxl}` | 64px | 500 | 1.05 | -1.6px | Homepage hero h1 ("Cookware Made Modern") |
| `{typography.display-xl}` | 48px | 500 | 1.08 | -1px | Editorial band heads, PDP product titles |
| `{typography.display-lg}` | 36px | 500 | 1.15 | -0.6px | Section heads ("Build Your Set", "Why Caraway") |
| `{typography.display-md}` | 28px | 500 | 1.2 | -0.36px | Sub-section titles, bundle-card heads |
| `{typography.display-sm}` | 22px | 500 | 1.25 | -0.2px | Card-section heads, PDP feature titles |
| `{typography.title-md}` | 18px | 500 | 1.33 | -0.1px | Product card titles, accordion heads |
| `{typography.title-sm}` | 16px | 500 | 1.375 | 0 | Footer column heads, nav sub-labels |
| `{typography.body-lg}` | 18px | 400 | 1.55 | 0 | Hero subhead body, editorial intro paragraphs |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default running-text for product detail descriptions |
| `{typography.body-sm}` | 14px | 400 | 1.45 | 0 | Card meta lines, prices, set-includes rows |
| `{typography.caption}` | 13px | 400 | 1.4 | 0.08px | Hero eyebrow labels, color-name labels under chips |
| `{typography.caption-sm}` | 12px | 400 | 1.4 | 0.1px | Legal footer copy, microcopy |
| `{typography.eyebrow}` | 11px | 500 | 1.25 | 1.2px (uppercase) | Section eyebrow tags ("THE SETS", "BUNDLE & SAVE") |
| `{typography.badge}` | 11px | 500 | 1.2 | 0.6px (uppercase) | "BEST SELLER" / "NEW" badge labels |
| `{typography.button-md}` | 14px | 500 | 1.2 | 0.6px (uppercase) | Primary CTA button labels ("ADD TO CART", "SHOP THE SET") |
| `{typography.button-sm}` | 12px | 500 | 1.2 | 0.8px (uppercase) | Newsletter submit, small inline CTAs |
| `{typography.nav-link}` | 14px | 500 | 1.2 | 0.4px | Top nav category links |
| `{typography.link}` | 14px | 500 | 1.45 | 0 | Inline body links |

### Principles
Display weights stay at **500**, not the heavy 700 most DTC food and wellness brands use. Caraway's hero h1 at 48–64px / 500 / -1.6px tracking feels editorial-magazine rather than ad-banner — the negative tracking lets the letters touch slightly, which on a cream surface reads as warmth rather than density. Body never goes above weight 400 — the system trusts the photography for visual weight.

The only typographic move toward formality is the **uppercase button label** at 14px / 500 with 0.6px letter-spacing. Caraway uses this to crisp up the soft photography — without uppercase CTAs the whole site would read too gentle. The badge labels share that uppercase treatment but at 11px, keeping the visual rhythm consistent across CTAs and tags.

### Note on Font Substitutes
If GT America or Söhne licenses are unavailable, **Inter** at weight 500 with letter-spacing reduced by 0.5–1% is the closest open-source substitute. **General Sans** (Fontshare) is a free closer-match alternative. Adjust hero display down by ~2% in line-height to match GT America's tighter cap height.

## Layout

### Spacing System
- **Base unit:** 4px (with 2px micro-step).
- **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 80px.
- **Section padding (vertical):** `{spacing.section}` (80px) for major editorial bands — larger than marketplace systems (which use 64px) because Caraway wants the page to feel magazine-spread rather than dense.
- **Card internal padding:** `{spacing.lg}` (24px) for `{component.bundle-card}` and `{component.testimonial-card}`; `{spacing.base}` (16px) for `{component.product-card}` meta block; `{spacing.md}` (12px) for swatch rows.
- **Gutters:** `{spacing.lg}` (24px) between cards in the product grid; `{spacing.xxl}` (48px) inside footer column gutters; `{spacing.sm}` (8px) between color-chip swatches.

### Grid & Container
- **Max content width:** ~1280px centered on the homepage and editorial pages. PDPs cap closer to 1440px to give the photo gallery generous left-column real estate.
- **Homepage hero:** Full-bleed lifestyle photograph (cream pans on a sun-lit counter), with the hero headline overlaid bottom-left in `{typography.display-xxl}` and a `{component.button-primary}` CTA beneath.
- **Product grid:** 4-up at desktop with `{spacing.lg}` (24px) gutters. Each card carries a square product photo, title, price, color-swatch row, and rating row.
- **PDP:** 2-column with a sticky photo gallery on the left (~58% width) and the buy-box (title, price, color picker, set-includes, "ADD TO CART", subscription toggle) on the right (~38%).
- **Footer:** 4-column link list (Shop / Learn / Support / Connect) at desktop on the dark-surface band, collapsing to a stacked accordion on mobile.

### Whitespace Philosophy
The system gives editorial bands a generous 80px of vertical breathing room — Caraway wants the page to read as a kitchen-and-home magazine. Card grids stay tight at 24px gutters but never compress to marketplace density. The contrast is intentional: the page reads as "spacious editorial, deliberate product layout" rather than "dense ecommerce grid."

## Elevation

The system has **essentially no shadow tier**. The cream canvas itself separates surfaces — cards sit on `{colors.canvas-warm}` (#faf5ec) lifted slightly off the page's `{colors.canvas}` (#f5efe4) by tonal difference rather than by drop-shadow.

- **Flat (no shadow):** Body, hero, product cards, editorial bands, footer — 99% of surfaces. Depth comes from tonal stepping (canvas → canvas-warm → surface-soft → surface-strong) rather than from layered shadows.
- **Modal scrim:** `{colors.scrim}` rendered at ~70% opacity — the global modal backdrop for mini-cart drawer and PDP image zoom overlay. Uses the dark-surface tone rather than pure black.
- **Subtle card hover lift:** Product cards may receive a very faint shadow (`rgba(14, 28, 44, 0.04) 0 4px 12px`) on hover, but the system does not depend on it for hierarchy — it's a polish detail.

There are no progressive elevation tiers. Depth comes from tonal cream stepping, generous whitespace, and the rounded-corner clipping rather than from drop-shadows.

## Components

### Buttons

**`button-primary`** — Deep navy-ink fill (`{colors.primary}` — #0e1c2c), cream text (`{colors.on-primary}` — #f5efe4), 4px radius (`{rounded.sm}`), 14×28px padding, 48px height, uppercase 14px / 500 / 0.6px tracking label. The dominant CTA across the site: "ADD TO CART", "SHOP THE SET", "BUILD YOUR SET", "CHOOSE YOUR COLOR".

**`button-primary-active`** — The press state. Background flips to `{colors.primary-active}` (#000814). No transform, no shadow change.

**`button-primary-disabled`** — A warm pale fill (#c8c0b3) with cream text. Cursor not-allowed.

**`button-secondary`** — Transparent fill with ink text and a 1px `{colors.border-strong}` outline. 4px radius. Same dimensions as primary. Used for "ADD TO WISHLIST", "LEARN MORE", and inverse CTAs.

**`button-tertiary-text`** — Plain ink text, no surface, no border. Underlined on hover via `{colors.link-underline}`. Used for "View all", "Compare sets", inline "Read more" links.

**`button-inverse`** — Cream fill (`{colors.canvas}`) with ink text, 4px radius. Used inside dark editorial bands or when stacked over photography.

### Color Selection System

**`color-swatch-chip`** — A small 20×20px circular swatch (`{rounded.full}`) carrying one of the product colorway tones (cream, sage, navy, perracotta, marigold, gray). Rows of 4–7 chips sit beneath every product card in the grid — hovering a chip recolors the hero product photo inline.

**`color-swatch-chip-selected`** — The active state. A 2px `{colors.ink}` ring sits 2px outside the chip's edge, indicating selection without changing the swatch color itself.

**`color-picker-large`** — On PDPs, the swatch row scales up to 32×32px chips spaced at 12px gutters. Each chip is labeled below in `{typography.caption}` with the color's proper name ("Perracotta", "Marigold"). The selected chip carries the 2px ink ring; the rest sit unringed.

**`color-swatch-row`** — The container row carrying 4–7 chips. Used inside product cards (small chips) and inside the PDP buy-box (large chips).

### Top Navigation

**`top-nav`** — Cream canvas surface (`{colors.canvas}`), 72px height, 1px `{colors.hairline}` bottom border. The Caraway wordmark sits flush left, the category links (SHOP, COLLECTIONS, MATERIALS, COMMUNITY, ABOUT) sit center, and utility icons (search, account, cart) sit flush right.

**`nav-announcement-bar`** — A 36px dark band (`{colors.surface-dark}`) above the nav carrying rotating promo copy in cream text at `{typography.caption}` ("Free shipping on orders $90+", "Introducing: Iconics Collection").

**`nav-link-active`** — Ink text in `{typography.nav-link}`. No underline at rest — hover triggers a 1px underline below the link.

**`nav-link-inactive`** — Muted text — used when one nav category is hover-locked into a mega-menu reveal, dimming the sibling links.

### Product Cards

**`product-card`** — A square (1:1) product photograph clipped at `{rounded.md}` (12px), sitting on a `{colors.canvas-warm}` cream tile. Beneath the photo: product title (`{typography.title-md}`), price (`{typography.body-sm}`), color-swatch row (`{component.color-swatch-row}`) with 4–7 chips, and a rating row (star icons + review count in `{typography.caption}` muted).

**`product-card-photo`** — The photo plate, separated as a token because hover-recolor swaps the same photo with different colorway variants in place.

**`best-seller-badge`** — Ink-fill rounded-rect (`{rounded.sm}`) at 4×10px padding, carrying uppercase "BEST SELLER" in `{typography.badge}`. Anchored top-left of the photo.

**`new-badge`** — Cream-fill rounded-rect (matches `{colors.canvas}`) with ink text, same 4×10px padding, "NEW" uppercase. Anchored top-left when "BEST SELLER" isn't applicable.

### Bundle Cards (Cookware Sets)

**`bundle-card`** — The signature "build-your-set" merchandising tile. Cream-warm surface, `{rounded.md}` clipping, 24px padding. Contains: large set photograph showing 4–7 pieces grouped, set name ("CARAWAY COOKWARE SET — 7 PIECES") in `{typography.display-md}`, set-includes list in `{typography.body-sm}` muted, current price + "Save $X" tag (`{component.bundle-card-savings-tag}`), color-picker row (`{component.color-picker-large}`), and "CHOOSE YOUR COLOR" primary CTA full-width.

**`bundle-card-savings-tag`** — A small navy-ink filled rect (`{rounded.sm}`) carrying "SAVE $X" in cream `{typography.badge}`. Sits adjacent to the strikethrough comparison price.

### PDP

**`pdp-gallery`** — The left-column 2:3 photo gallery on cream-warm surface, `{rounded.md}` clipping. Carries 4–8 product photos including lifestyle shots, top-down piece-grid, color-variant carousel, and detail close-ups. A small thumbnail strip (`{component.pdp-thumbnail}`) sits beneath the main image.

**`pdp-color-selector`** — The buy-box color picker. Reuses `{component.color-picker-large}` chips with the currently-selected color name printed beneath in `{typography.caption}` ("Color: Perracotta").

**`pdp-set-includes-row`** — A multi-row list of the pieces included in the bundle, each row in `{typography.body-md}` body color with a small icon glyph (pan silhouette) left-aligned. No border between rows — closed by a 1px `{colors.hairline}` rule above and below.

**`feature-icon-row`** — A horizontal strip of 3–4 feature pillars ("PTFE-Free", "Non-Toxic", "Naturally Slick", "Ethically Made") each with a thin-line icon, label in `{typography.title-sm}`, and one-sentence description in `{typography.body-sm}`. Sits on `{colors.surface-soft}` cream-strong with `{rounded.md}` clipping.

### Marketing Modules

**`testimonial-card`** — A cream-warm surface card carrying 3–4 lines of customer review excerpt in `{typography.body-md}` body color, followed by reviewer first-name + city in `{typography.caption}` muted, and a 5-star ink rating row above. Padded 24px.

**`press-strip`** — A horizontal strip of editorial logos ("FORBES", "GOOD HOUSEKEEPING", "VOGUE", "BON APPETIT") sitting on `{colors.surface-soft}` at `{typography.caption}` muted. The press band runs between product grid and bundle module.

**`editorial-band`** — A full-bleed band on `{colors.surface-strong}` cream-strongest with 80px vertical padding. Carries a large `{typography.display-lg}` head, a `{typography.body-lg}` subhead, and a `{component.button-primary}` CTA. Used for cross-sells ("New: Cast Iron Collection"), brand story interrupts, and the bakeware-to-cookware bridge.

### Forms

**`text-input`** — Cream-warm fill (`{colors.canvas-warm}`), 1px `{colors.hairline}` outline, `{rounded.sm}` 4px radius, 52px height, 14×16px padding. Stacked label above in `{typography.caption}` muted, placeholder in `{typography.body-md}` muted-soft. On focus, the border thickens to 1.5px and flips to `{colors.ink}` — no glow, no ring.

**`quantity-stepper`** — A cream-warm surface stepper (−/value/+) at 48px height with the count number in `{typography.body-md}`. Used on PDP buy-box and cart line items.

### Footer

**`footer-dark`** — Deep dark-surface band (`{colors.surface-dark}` — #1c2536) with 64×48px padding. Four columns (Shop / Learn / Support / Connect), each headed with `{typography.eyebrow}` cream uppercase and stacking `{component.footer-link}` rows in cream `{typography.body-sm}`.

**`footer-link`** — Cream text on dark surface, no underline at rest, 1px underline appears on hover.

**`newsletter-input`** — A bottom-border-only text input (`{rounded.none}`) on the dark footer band — placeholder reads "Enter your email" in muted-soft text, the input border is `{colors.muted}` and flips to cream on focus.

**`newsletter-submit`** — A small cream-fill rect (`{rounded.sm}`) with ink text — the only light element inside the footer, indicating the conversion moment.

**`legal-band`** — A bottom strip beneath the footer columns carrying copyright, accessibility statement, and small social icons. All copy in `{colors.muted-soft}` at `{typography.caption-sm}`.

## Responsive Behavior

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 744px | Top nav collapses to logo + hamburger; announcement bar persists; product cards stack 1-up; hero photo shifts to portrait crop; bundle cards stack 1-column; PDP collapses photo gallery to a horizontal swipe carousel above the buy-box; footer columns collapse to 1-column accordion. |
| Tablet | 744–1128px | Top nav keeps category links but truncates ("SHOP", "MATERIALS" only); product cards 2-up; hero stays full-bleed; bundle cards 2-up; PDP stacks gallery above buy-box rather than side-by-side. |
| Desktop | 1128–1440px | Full top nav with all category links centered; product cards 4-up; hero full-bleed with overlay headline bottom-left; bundle cards 2- or 3-up depending on count; PDP 2-column with sticky buy-box right-rail. |
| Wide | > 1440px | Content width caps at 1440px on PDP and 1280px on editorial/home; gutters absorb the rest. Hero photography scales to full viewport width without cropping. |

### Touch Targets
- Primary CTAs at minimum 48×48px (above WCAG AAA).
- Color swatch chips at 20×20px on product cards have a generous 16×16px invisible padding ring (effective 36px tap target).
- PDP color chips scale to 32×32px with 12px gutters → effective 44px tap target per chip.
- Quantity stepper at 48px height with 48px wide tap zones on each button.

### Collapsing Strategy
- Top nav category links collapse to a slide-in sheet below 744px, opened by the hamburger left of the wordmark.
- Hero full-bleed photo shifts crop ratio at mobile (portrait 4:5) but never reflows to inline text — the photographic dominance stays consistent across breakpoints.
- Product grid drops columns cleanly at each breakpoint (4 → 2 → 1) without reflowing rows.
- Bundle cards reduce columns (3 → 2 → 1) keeping the same internal padding and color-picker row intact at all sizes.
- PDP 2-column with sticky buy-box on desktop becomes single-column with buy-box-after-gallery on tablet and mobile; the "ADD TO CART" CTA pins to a sticky bottom bar at mobile when the user scrolls past the buy-box.
- Footer 4-column band collapses to a stacked accordion below 744px — each column head becomes a tap-to-expand row.

## Known Gaps

- **Agent usage policy:** Historical tokens are unverified. Do not use them as current-site measurements or claim a faithful reconstruction.






- **Evidence:** [SOURCE.json](./SOURCE.json) records capture time, URLs and per-token evidence status. CSS value matches do not establish semantic roles or visual fidelity; unmeasured values remain inferred or unverified.

- **Exact hex values for product colorways:** Caraway publishes that each color is developed from "custom Pantone swatches" but does not publicly disclose the exact hex equivalents. Values for `{colors.cream}`, `{colors.sage}`, `{colors.navy}`, `{colors.perracotta}`, `{colors.marigold}`, `{colors.gray}`, `{colors.slate}` are best-effort approximations based on rendered product photography on third-party retailer sites; the production hex values may differ by a few percentage points of saturation.
- **Exact UI surface hexes:** The Caraway homepage and PDPs were not directly inspectable for this extraction (the site is gated behind a Vercel Security Checkpoint that blocks automated fetches and most AI-fetch tools). Values for `{colors.canvas}` (#f5efe4), `{colors.ink}` (#0e1c2c), `{colors.surface-dark}` (#1c2536), and the muted/hairline tokens are reasoned approximations from third-party reviews + brand voice description; the exact production CSS-variable values were not extracted.
- **Font family confirmation:** Caraway's exact licensed type family was not publicly disclosed and not extractable from CSS inspection due to the same Vercel checkpoint. The stack `'GT America', 'Söhne', 'Helvetica Neue'` is the most likely modern-DTC humanist grotesque pairing matching the visual character described, but could be a custom-named variant of Söhne or a closely-related family (e.g., Söhne Buch, GT America Standard).
- **Hover state colors:** Precise `:hover` styling (subtle background tints, underline rules) was not directly inspectable. Documented as "1px underline on hover" for nav and footer links; precise color tokens may vary.
- **Loading states / skeleton screens:** not directly observed.
- **Form input error states:** documented as "border flips to ink on focus" but error-state styling (red outline, helper text) was not observed.
- **Iconography system:** Caraway uses a thin-line icon family on feature-pillars and footer social rows. Exact stroke weight, library origin, and color tokens were not extractable.
- **Subscription / replenishment UI:** The subscription toggle and replenishment cadence selector that appears on PDPs (likely Recharge or Skio-powered) was not directly inspected.
- **Iconics Collection sub-system:** The upscale Iconics line uses `{colors.iconics-black}` + `{colors.gold-hardware}` as its accent — but full sub-brand surface treatment (whether Iconics PDPs use a different surface tone or typographic emphasis) was not captured.
- **Cart drawer styling:** The mini-cart slide-in drawer is documented as appearing on `{colors.surface-card}` white surface but precise width, item-row spacing, and "Continue Shopping" CTA placement were not captured.