Our Place-inspired

# Visual style inspired by Our Place'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 Our Place's name, logo, product photos, copy or trademarks.

---
version: alpha
name: "Our Place"
description: |-
  Our Place is a kitchen brand built around a single thesis — that what we share at the table is the most intimate conversation we have with each other — and the visual system bends every token toward that thesis. The page floor is a warm cream (`{colors.canvas}` — #fcfaf6), not white; type sets in deep cocoa-brown (`{colors.ink}` — #35312e), never black; the primary brand voltage is Spice (`{colors.primary}` — #d37556), a sunset-on-terracotta warmth that reads as cooking-pot copper rather than DTC-orange. The typography is unusual for a Shopify-era cookware brand: a serif called Cheltenham (`Chelt`, `CheltLight`, `CheltBTBolCon`) carries every editorial moment — the hero "Welcome to Our Place" headline, product titles, recipe blog cards — paired with two display sans-serifs (`Plaid-XS-Web` and `Plaid-XL-Web`, the brand's custom variable family that gives the wordmark its tall-narrow geometric character) for utility text, eyebrow labels and uppercase CTA labels, plus Calibre as a clean sans for body and product descriptions. Buttons are rectangular with only a `{rounded.xs}` 4px corner — a deliberate retreat from the heavily-rounded "soft-cookware" idiom — and they carry uppercase Plaid type at 14px, weighing the brand's voice as confident and editorial rather than friendly-cute. Each product card sits beneath a row of 20px circular color-swatch dots; clicking one rotates the hero photo to the matching Spice/Sage/Steam/Char/Blue Salt finish. The collection of "color names" itself is intentional, drawn from the brand's South-Asian-American founder Shiza Shahid: Spice (the terracotta of a marigold garland), Char (charred eggplant smoke), Sage (kitchen herb), Steam (rising from a kettle), Blue Salt (Pakistani salt lake), Cream, Spruce. These read as foods, memories and rooms — never as Pantone codes. The footer breaks rule and shifts to a deep maroon `#5d2020` ("Sienna") with cream text, a reading-room band that resolves the cream-canvas page into something warm-blooded and inhabited. The total impression is editorial-magazine-meets-dinner-party: cream paper, brown ink, terracotta accent, serif headlines, and a parade of swatches that name the world the way a family does.

colors:
  primary: "#d37556"
  primary-pressed: "#af5d3e"
  primary-hover: "#b76d47"
  ink: "#35312e"
  ink-soft: "#34312e"
  body: "#4f463f"
  muted: "#60605e"
  muted-soft: "#6e635a"
  hairline: "#ebe5d4"
  hairline-soft: "#e6e6e6"
  hairline-strong: "#cdb8b4"
  canvas: "#fcfaf6"
  surface-soft: "#f7f3eb"
  surface-card: "#f6f3eb"
  surface-warm: "#ebe5d4"
  surface-deep: "#5d2020"
  on-primary: "#fcfaf6"
  on-dark: "#fbf9f5"
  scrim: "#000000"
  spice: "#d37556"
  spice-deep: "#af5d3e"
  char: "#35312e"
  sage: "#7d836e"
  steam: "#e4d3be"
  blue-salt: "#748ea1"
  blue-salt-deep: "#2c5568"
  cream: "#ede5da"
  spruce: "#5b653b"
  rosa: "#dfc9c5"
  lavender: "#d3c2ca"
  saffron: "#dc9d49"
  chrome: "#9caeb2"
  gold: "#d2bd81"
  midnight: "#262c4d"
  sienna: "#5d2020"
  ember: "#671011"

typography:
  display-xl:
    fontFamily: "'CheltBTBolCon', 'Cheltenham', 'Playfair Display', Georgia, serif"
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -1px
  display-lg:
    fontFamily: "'CheltLight', 'Cheltenham', 'Playfair Display', Georgia, serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0
  display-md:
    fontFamily: "'CheltLight', 'Cheltenham', 'Playfair Display', Georgia, serif"
    fontSize: 36px
    fontWeight: 300
    lineHeight: 1.24
    letterSpacing: 0
  display-sm:
    fontFamily: "'Chelt', 'Cheltenham', 'Playfair Display', Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0
  title-md:
    fontFamily: "'Chelt', 'Cheltenham', Georgia, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.24
    letterSpacing: 0
  title-sm:
    fontFamily: "'Chelt', 'Cheltenham', Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: 0
  body-md:
    fontFamily: "'CalibreRegular', 'Calibre', -apple-system, system-ui, 'Helvetica Neue', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "'CalibreRegular', 'Calibre', -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0
  body-editorial:
    fontFamily: "'Plaid-XS-Web', 'Calibre', Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  caption:
    fontFamily: "'CalibreRegular', 'Calibre', sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  eyebrow:
    fontFamily: "'Plaid-L-Web', 'Calibre', sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1.2px
    textTransform: uppercase
  eyebrow-lg:
    fontFamily: "'Plaid-L-Web', 'Calibre', sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1.2px
    textTransform: uppercase
  button-md:
    fontFamily: "'Plaid-L-Web', 'Plaid-XL-Web', 'Calibre', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 1px
    textTransform: uppercase
  button-sm:
    fontFamily: "'Plaid-L-Web', 'Calibre', sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 1px
    textTransform: uppercase
  price:
    fontFamily: "'Chelt', 'Cheltenham', Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: 0
  nav-link:
    fontFamily: "'CalibreSemibold', 'Calibre', sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.4px
    textTransform: uppercase

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

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 40px
  xxl: 60px
  section: 96px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: 20px 40px
    height: 54px
  button-primary-hover:
    backgroundColor: "{colors.scrim}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.xs}"
  button-primary-disabled:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.xs}"
  button-spice:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.xs}"
    padding: 20px 40px
    height: 54px
  button-secondary:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: 16px 28px
    height: 40px
    border: "1.5px solid {colors.ink}"
  button-ghost:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.xs}"
    padding: 20px 40px
    height: 54px
    border: "1.5px solid {colors.ink-soft}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: 16px 16px
    height: 54px
    border: "1px solid {colors.hairline}"
  email-signup-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: 14px 16px
    height: 48px
    border: "1px solid {colors.muted-soft}"
  nav-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    height: 64px
    borderBottom: "1px solid {colors.hairline}"
  nav-link-active:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
  nav-link-inactive:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.nav-link}"
  announcement-bar:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.eyebrow}"
    height: 36px
    padding: 0 24px
  product-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
    rounded: "{rounded.none}"
    padding: 0
  product-card-photo:
    backgroundColor: "{colors.surface-soft}"
    aspectRatio: "1 / 1"
    rounded: "{rounded.none}"
  product-card-title:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
  product-card-eyebrow:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.eyebrow}"
  product-card-price:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.price}"
  color-swatch-dot:
    backgroundColor: "var(--swatch-color)"
    rounded: "{rounded.full}"
    height: 20px
    width: 20px
    margin: "0 6px"
  color-swatch-dot-selected:
    backgroundColor: "var(--swatch-color)"
    rounded: "{rounded.full}"
    height: 20px
    width: 20px
    outline: "1px solid {colors.ink}"
    outlineOffset: 4px
  color-swatch-dot-pdp:
    backgroundColor: "var(--swatch-color)"
    rounded: "{rounded.full}"
    height: 40px
    width: 40px
    margin: "0 17px 17px 0"
  color-swatch-dot-pdp-selected:
    backgroundColor: "var(--swatch-color)"
    rounded: "{rounded.full}"
    height: 40px
    width: 40px
    outline: "1px solid {colors.ink}"
    outlineOffset: 4px
  color-swatch-out-of-stock:
    backgroundColor: "var(--swatch-color)"
    rounded: "{rounded.full}"
    height: 20px
    width: 20px
    overlay: "1px diagonal line {colors.ink}"
  variant-pill:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.eyebrow-lg}"
    rounded: "{rounded.xs}"
    padding: 16px 28px
    height: 40px
    width: 128px
    border: "1px solid {colors.ink}"
  variant-pill-selected:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.eyebrow-lg}"
    rounded: "{rounded.xs}"
    padding: 16px 28px
    height: 40px
    width: 128px
  bundle-set-card:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
    rounded: "{rounded.xs}"
    padding: 24px
  hero-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: 96px 24px
  hero-cta:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: 20px 40px
    height: 54px
  recipe-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
    rounded: "{rounded.none}"
    padding: 0
  recipe-card-eyebrow:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.eyebrow}"
  press-quote-band:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: 64px 24px
  badge-bestseller:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.xs}"
    padding: 4px 10px
  badge-new:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.xs}"
    padding: 4px 10px
  footer:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
    padding: 64px 11% 32px
  footer-link:
    backgroundColor: transparent
    textColor: "{colors.on-dark}"
    typography: "{typography.body-sm}"
  footer-legal:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    padding: 24px 11%
---

## Overview

Our Place is a New York / Los Angeles direct-to-consumer kitchen brand built around the Always Pan, the Perfect Pot, the Wonder Oven, and a steadily expanding line of dinnerware and ceramics. Founded by Shiza Shahid (co-founder of the Malala Fund) and Amir Tehrani, the brand's design language deliberately rejects the Scandinavian-minimalist white-on-white default of cookware DTC and instead leans into a warm South-Asian-American "gathering table" register: cream-paper canvas (`{colors.canvas}` — #fcfaf6), cocoa-brown ink (`{colors.ink}` — #35312e), Cheltenham serif headlines, terracotta-spice CTAs, and a parade of color names that read like a pantry list (Spice, Char, Sage, Steam, Blue Salt).

**Key Characteristics:**
- Cream canvas, brown ink — never white-on-black. The page floor is `{colors.canvas}` (#fcfaf6), a warm-cream paper tone. Type sets in `{colors.ink}` (#35312e), a coffee/cocoa brown, never true black.
- Editorial serif voice — `Cheltenham` carries every headline, product title, and recipe card. The brand owns the typeface as part of its identity in the way Airbnb owns Cereal.
- Spice as the brand color — `{colors.primary}` (#d37556) is a sunset terracotta used on secondary CTAs, link inline hover states, and as the named "Spice" finish on the cookware itself. The primary CTA, however, is dark cocoa (`{colors.ink}`) — Spice is the inflection, not the dominant voice.
- Custom display fonts — `Plaid-XS-Web` / `Plaid-XL-Web` is a custom geometric sans that powers utility text and uppercase CTA labels. The wordmark and button labels are 14px / `letter-spacing: 1px` Plaid in uppercase.
- Color-swatch driven product card — every product card has a row of 20px circular color-dot swatches beneath the title. Hovering or tapping a swatch rotates the card's photo to that finish. On the PDP the swatches grow to 40px and the selected state gets a 4px-offset 1px outline ring in `{colors.ink}`.
- Rectangular 4px-radius CTAs — buttons use `{rounded.xs}` (4px) — small but not pill. Uppercase Plaid type at 14px with 1px letter-spacing. Height 54px.
- Deep-maroon footer band — the footer breaks rule and shifts to `{colors.surface-deep}` (#5d2020 — Sienna) with cream text, the only major surface that isn't cream. It reads as the closing scene of a meal.
- The "Set" bundle pattern — Our Place is a "buy the set" brand: the Cookware Set, Dinnerware Set, Home Cook Duo etc. each get their own bundle card with a price-savings call-out and the same swatch row, in a slightly larger `{component.bundle-set-card}` template.

## Colors

### Brand & Accent
- **Spice** (`{colors.primary}` — #d37556): The brand's signature warm terracotta. Used as the inline-link active color, the "shop the look" CTA on featured cells, and as the named "Spice" cookware finish. The brand name on the wordmark is rendered in ink, not Spice.
- **Spice Deep** (`{colors.primary-pressed}` — #af5d3e): The active / press variant. Slightly more saturated.
- **Spice Hover** (`{colors.primary-hover}` — #b76d47): A mid-tone used on hover. Subtle.

### Surface
- **Canvas** (`{colors.canvas}` — #fcfaf6): The default page floor. Warm cream paper. The most distinctive single color choice in the system — Our Place does not use white.
- **Surface Soft** (`{colors.surface-soft}` — #f7f3eb): A slightly more saturated cream used on alternating bands, product card photo plates, and the `{component.button-ghost}` fill.
- **Surface Card** (`{colors.surface-card}` — #f6f3eb): Bundle card / inset surface. Nearly identical to surface-soft, kept as a separate token for the design system's source-of-truth.
- **Surface Warm** (`{colors.surface-warm}` — #ebe5d4): A heavier cream tone — the press-quote band, the FAQ accordion alternating row.
- **Surface Deep** (`{colors.surface-deep}` — #5d2020): The deep-maroon footer surface. The only non-cream surface in the standard system. Brand-named "Sienna".

### Text
- **Ink** (`{colors.ink}` — #35312e): The dominant text color. Cocoa-brown — not black. Used on display headlines, body, button-primary fill (in primary CTAs the ink color becomes the surface), and as the swatch-selected outline.
- **Ink Soft** (`{colors.ink-soft}` — #34312e): A near-identical companion used on ghost-button borders. Functionally interchangeable with `{colors.ink}` but kept distinct because the in-house CSS rolls them up that way.
- **Body** (`{colors.body}` — #4f463f): A warmer running-text color used inside long-form product copy.
- **Muted** (`{colors.muted}` — #60605e): Eyebrow labels, sub-text, "Limited Edition" mini-labels, footer secondary lines.
- **Muted Soft** (`{colors.muted-soft}` — #6e635a): The lightest text color — used very sparingly on disabled link text and meta lines.

### Hairlines & Borders
- **Hairline** (`{colors.hairline}` — #ebe5d4): The default border — search-bar dividers, card outlines on hover, accordion separators. Slightly warm cream — matches the page.
- **Hairline Soft** (`{colors.hairline-soft}` — #e6e6e6): A cooler-grey hairline used on form inputs and table separators.
- **Hairline Strong** (`{colors.hairline-strong}` — #cdb8b4): A heavier dusky-rose stroke used on bottom borders of editorial sections — the only hairline that visibly pulls toward the brand palette.

### Named Swatches (Cookware Finishes)
These are the product-finish names that drive the color-swatch dot beneath each card and the rotating hero photo on the homepage. Hex values are approximated from the brand's product imagery and consistent inline CSS observed across product variants — exact swatch source-of-truth lives in Shopify variant metadata.

- **Spice** (`{colors.spice}` — #d37556): Warm terracotta. The flagship.
- **Char** (`{colors.char}` — #35312e): Cocoa-black. Matches ink — the brand's neutral.
- **Sage** (`{colors.sage}` — #7d836e): Muted olive-green.
- **Steam** (`{colors.steam}` — #e4d3be): Pale cream-beige.
- **Blue Salt** (`{colors.blue-salt}` — #748ea1): Dusty blue-grey, named for the Pakistani salt lake.
- **Cream** (`{colors.cream}` — #ede5da): The ivory finish on certain dinnerware sets.
- **Spruce** (`{colors.spruce}` — #5b653b): Deep olive — limited-edition.
- **Rosa** (`{colors.rosa}` — #dfc9c5): Dusty rose — limited-edition.
- **Lavender** (`{colors.lavender}` — #d3c2ca): Pale lilac — limited-edition / archive.
- **Saffron** (`{colors.saffron}` — #dc9d49): Warm yellow-amber — limited-edition.
- **Chrome** (`{colors.chrome}` — #9caeb2): The metallic finish on the Pro stainless line.
- **Gold** (`{colors.gold}` — #d2bd81): The metallic gold finish on the Cookware Set Pro.
- **Midnight** (`{colors.midnight}` — #262c4d): Deep navy — used in dinnerware.
- **Ember** (`{colors.ember}` — #671011): A deep oxblood used on limited-edition holiday drops.

## Typography

### Font Families

The system runs **three custom families** plus a system-sans backup:
- **Cheltenham** (`Chelt`, `CheltLight`, `CheltBTBolCon`, `CheltBold`, `CheltItalic`): The serif voice. Carries every editorial display moment — hero h1, product card titles, product PDP titles, price, recipe blog cards, and major section heads.
- **Plaid** (`Plaid-XS-Web`, `Plaid-L-Web`, `Plaid-XL-Web`): The brand's custom geometric sans. Used for the wordmark itself, all CTA button labels (uppercase, tracked), eyebrow / kicker labels above section heads, and form labels.
- **Calibre** (`CalibreRegular`, `CalibreSemibold`, `CalibreMedium`, `CalibreBold`): A clean modernist sans used for body-running text on PDPs, product descriptions, FAQ answers, and product variant pills.
- **Fallback**: `Arial, -apple-system, system-ui, "Helvetica Neue", sans-serif`. There is no Inter / Helvetica primary — the brand fully owns its custom stack.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 50px | 400 (CheltBTBolCon) | 1.15 | -1px | h1, homepage hero |
| `{typography.display-lg}` | 40px | 300 (CheltLight) | 1.2 | 0 | Section heads, "Welcome to Our Place" |
| `{typography.display-md}` | 36px | 300 (CheltLight) | 1.24 | 0 | PDP product title, recipe hero |
| `{typography.display-sm}` | 28px | 400 (Chelt) | 1.2 | 0 | Card cluster headers |
| `{typography.title-md}` | 20px | 400 (Chelt) | 1.24 | 0 | Product card title |
| `{typography.title-sm}` | 18px | 400 (Chelt) | 1.22 | 0 | Modal heads, sub-titles |
| `{typography.body-md}` | 16px | 400 (Calibre) | 1.5 | 0 | Default body, PDP copy |
| `{typography.body-sm}` | 14px | 400 (Calibre) | 1.43 | 0 | Card meta, footer links |
| `{typography.body-editorial}` | 18px | 400 (Plaid-XS) | 1.5 | 0 | Long-form editorial paragraphs (About, Sustainability) |
| `{typography.caption}` | 12px | 400 (Calibre) | 1.5 | 0 | Image captions, micro-disclaimers |
| `{typography.eyebrow}` | 10px | 400 (Plaid-L) | 1.2 | 1.2px (uppercase) | "LIMITED EDITION" kicker above product titles |
| `{typography.eyebrow-lg}` | 12px | 400 (Plaid-L) | 1.2 | 1.2px (uppercase) | Section eyebrow above display-md heads |
| `{typography.button-md}` | 14px | 400 (Plaid-L) | 1 | 1px (uppercase) | Primary CTA button labels |
| `{typography.button-sm}` | 12px | 400 (Plaid-L) | 1 | 1px (uppercase) | Secondary / inline CTA labels |
| `{typography.price}` | 18px | 400 (Chelt) | 1.22 | 0 | Product card price, PDP price |
| `{typography.nav-link}` | 14px | 600 (CalibreSemibold) | 1 | 0.4px (uppercase) | Top nav primary links |

### Principles

The system holds **three deliberate typographic tensions**:

1. **Serif headlines + sans CTAs.** Headlines, product titles and prices all set in Cheltenham serif — this is the "editorial magazine" register. Buttons and labels then flip to Plaid sans, uppercase and tracked — the "stamp on a packaging label" register. The juxtaposition is the brand voice in a single page.
2. **Three custom families, one body face.** Three display / utility families (Cheltenham, Plaid, Calibre) is unusually generous. The brand pays for the typographic richness in service of the editorial idea — but body text consolidates on Calibre, keeping running-text reading clean.
3. **Modest weights.** Display weights stay at 300 (CheltLight) for hero headlines — light serif, never bold serif. The single bold-condensed cut (`CheltBTBolCon`) appears only on the largest h1 — a 50px / 1.15 statement.

### Note on Font Substitutes
If Cheltenham, Plaid, and Calibre are unavailable, the closest open-source substitutes are **Playfair Display** for Cheltenham (serif display, slightly stronger contrast — drop the line-height by ~5% to match Chelt's tighter feel), **Inter Display** for Plaid (use it with `text-transform: uppercase` and `letter-spacing: 0.075em` to mimic the wordmark cut), and **Inter** for Calibre.

## 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}` 40px · `{spacing.xxl}` 60px · `{spacing.section}` 96px.
- **Section padding (vertical):** `{spacing.section}` (96px) for major homepage editorial bands — generous, magazine-style.
- **Card internal padding:** `{spacing.lg}` (24px) for bundle / press-quote cards; 0px on product cards (the card is image + meta beneath, no surface).
- **Gutters:** 50px between product cards on the homepage desktop grid; 30px on collection-page grids; 16px on swatch dots.

### Grid & Container
- **Max content width:** ~1440px centered on the homepage; PDPs cap around 1280px.
- **Homepage product grid:** 2-column on mobile, 3-column on tablet, 4-column at desktop. Gap 50px on desktop, 24px on tablet, 16px on mobile.
- **PDP layout:** 2-column with photo gallery on the left (~58% width) and the product info / swatch / variant / ATC stack on the right (~38%). Photo gallery is a vertical scroll-stack of square images on desktop, swipeable carousel on mobile.
- **Footer:** 3-region block — logo, primary copyright, footer links — with the social row on its own line.

### Whitespace Philosophy
The system gives editorial bands 96px of vertical breathing room — more than typical DTC and closer to print-magazine cadence. The contrast is intentional: hero, recipe blog tiles, press quotes and brand story bands all breathe; the product grid then compresses slightly to give marketplace density.

## Elevation

The system is **almost entirely flat**. Our Place uses surface tone separation (cream vs. cream-deeper vs. surface-warm) rather than shadow elevation. The only place a shadow appears is on the floating cart drawer and the (rare) modal — and even there the shadow is a soft, very wide blur rather than a hard rectangular drop.

- **Flat (no shadow):** Body, hero, product cards, recipe cards, bundle cards, footer — every public surface.
- **Modal / cart-drawer float:** `box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08)` — applied to the slide-in cart drawer and overlay modals.
- **Modal scrim:** `{colors.scrim}` at ~40-50% opacity behind cart and modal layers.

There are no progressive elevation tiers — the system is essentially 2D, leaning on cream surface variation for depth.

## Components

### Buttons

**`button-primary`** — Cocoa-ink fill (`{colors.ink}` — #35312e), cream text (`{colors.on-primary}`), 4px radius, 20×40px padding, 54px height, uppercase Plaid label at 14px with 1px letter-spacing. The dominant CTA across the site — "ADD TO CART", "SHOP NOW", "EXPLORE THE COLLECTION". Note the rectangular feel (only 4px radius) — Our Place rejects the soft-pill DTC default.

**`button-primary-hover`** — On hover the background slides to true black (`#000`). No transform, no shadow.

**`button-primary-disabled`** — Muted fill (`{colors.muted}` — #60605e), cream text, `cursor: not-allowed`.

**`button-spice`** — A featured-cell variant: Spice (`{colors.primary}` — #d37556) fill with cream text. Used on the "Shop the Spice Collection" featured tiles and the homepage hero rotating CTA when the "Spice" finish is active. Same shape and dimensions as button-primary.

**`button-secondary`** — Cream fill (`{colors.surface-soft}` — #f7f3eb), ink text, 1.5px ink outline, 4px radius, 40px height. Used as "View All" links and inline secondary CTAs.

**`button-ghost`** — Identical to button-secondary but at 54px height with 20×40px padding — used on full-width "Add to bag" PDP variants.

### Color Swatch (Brand Signature)

**`color-swatch-dot`** — A 20×20px perfectly circular dot rendered in the variant's hex color, sat beneath each product card. The dots sit in a horizontal row with 6px margins. On hover or tap, the card's hero image swaps to the matching finish. The single most recognizable interaction on the site.

**`color-swatch-dot-selected`** — Same 20px dot, but with a 1px solid `{colors.ink}` outline drawn at a `-4px` offset (i.e., the outline floats 4px outside the dot). The visual is a "halo ring" around the active swatch.

**`color-swatch-dot-pdp`** — On the PDP the swatch dot grows to 40×40px and the margins widen to 17px. Same circular ring on selected state, but at a `-3px` offset.

**`color-swatch-out-of-stock`** — A diagonal 1px ink line crosses the dot when the variant is OOS, while the dot stays at full color.

### Product Card

**`product-card`** — Photo-first card. 1:1 aspect-ratio image on a cream surface (`{colors.surface-soft}`), no card outline, no shadow. Beneath the photo: optional eyebrow (`LIMITED EDITION` in `{typography.eyebrow}` muted), product title (`{typography.title-md}` Chelt 20px ink), price (`{typography.price}` Chelt 18px ink), then the swatch-dot row centered. Hover-flips the image to a lifestyle photo via the `.product-card__image--hover` rule.

**`product-card-photo`** — The photo plate. Square ratio, cream background fills any letterboxing. On hover the card swaps to a second image without crossfade.

### Variant Pills (PDP)

**`variant-pill`** — On PDPs where the variant is size-based ("Pan only / Pan + Lid" or "Mini / Standard / Large"), the choices render as rectangular pills — 128px wide, 40px tall, 4px radius, 1px ink border, uppercase eyebrow-lg label. Selected state flips background to ink (`{colors.ink}`) with cream text.

### Navigation

**`nav-bar`** — Cream surface (`{colors.canvas}`), 64px height, 1px hairline bottom border. The wordmark (rendered in Plaid display) sits flush left, three primary nav links (`SHOP`, `OUR STORY`, `RECIPES`) sit slightly off-center, and account / search / cart icons sit flush right.

**`announcement-bar`** — A skinny dark band above the nav at ink fill (`{colors.ink}`), cream text, 36px tall, uppercase eyebrow type. Used for free-shipping and promo announcements. Rotates 2–3 messages on a slow timer.

**`nav-link-active`** — Ink text in nav-link type. No underline. On hover, the link picks up a 1px ink underline.

### Hero

**`hero-section`** — Full-width cream surface, 96px top / bottom padding. Center-aligned editorial layout: kicker (eyebrow), large Cheltenham headline (`{typography.display-xl}`), short Calibre subtitle (`{typography.body-md}`), then a `{component.hero-cta}` primary button. The signature interaction: the hero photo rotates to show the same product in 4–6 different finishes, with a swatch-dot row beneath the photo controlling which finish is on display.

**`hero-cta`** — Identical visual treatment to `button-primary`. The "Shop now" CTA on the hero.

### Recipe / Editorial Cards

**`recipe-card`** — Used on the recipe-blog tiles ("How to braise short ribs in your Perfect Pot"). 4:5 portrait photo, no surface, kicker eyebrow above title in Cheltenham, byline in body-sm muted.

**`recipe-card-eyebrow`** — A small `RECIPE` or `TECHNIQUE` kicker in uppercase eyebrow-lg type, sat 8px above the recipe title.

### Bundle Set Card

**`bundle-set-card`** — The "Set" pattern (Cookware Set, Dinnerware Set, Home Cook Duo). Cream-soft surface, 4px radius, 24px padding. Inside: kicker ("THE COOKWARE SET"), large Cheltenham title, list of items in body-md, then crossed-out individual prices and a Spice-fill price-savings call-out ("$184 SET SAVINGS"), and a primary CTA. The same swatch-dot row sits beneath, allowing the entire set to be viewed in any finish.

### Press Quote Band

**`press-quote-band`** — A horizontal band at `{colors.surface-warm}` fill, 64px vertical padding, containing 1–3 magazine quotes ("…the only pan you'll ever need." — Bon Appétit) set in `{typography.display-md}` Cheltenham light, with publication name in `{typography.eyebrow}` muted beneath.

### Forms

**`text-input`** — Cream surface (`{colors.canvas}`), 1px warm-hairline outline, 4px radius, 54px height, 16×16px padding. Body-md type. Focused state thickens the border to 1.5px and shifts to ink color.

**`email-signup-input`** — A leaner variant used in the footer newsletter capture: 48px height, 14×16px padding, muted-soft outline. Paired with a dark `{component.button-primary}` "Subscribe" button.

### Badges

**`badge-bestseller`** — Small Spice-fill pill (`{colors.primary}`) with cream uppercase eyebrow type. Sits top-left of a product card. Used on the Always Pan and the Cookware Set.

**`badge-new`** — Same shape, ink fill instead of Spice. Used on limited-edition drops.

### Footer

**`footer`** — Deep maroon surface (`{colors.surface-deep}` — #5d2020 / "Sienna"), cream text, 64×11% padding. The only major dark surface in the system. Three-region row: logo (centered), copyright (left), link cluster (right) on desktop, stacking to vertical column on mobile.

**`footer-link`** — Cream text in body-sm. On hover the link picks up a 1px cream underline.

**`footer-legal`** — A skinny strip beneath the footer columns carrying the © line, address, and social icons. Cream caption-size type at 12px.

## Responsive Behavior

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 750px | Top nav collapses to wordmark + hamburger; announcement bar stays; product grid 2-up; PDP photo-gallery becomes swipeable carousel; hero headline drops to 32–36px; swatch dots stay at 20px but row scrolls horizontally if more than 6; bundle card stacks vertically; footer flattens to one-column. |
| Tablet | 750–1024px | Three nav links visible; product grid 3-up; PDP becomes 2-column with narrower image rail; bundle-set photo grid wraps to 2-up; hero headline at 40–46px. |
| Desktop | 1024–1440px | Full nav with all primary links; product grid 4-up; PDP at canonical 58/38 split; hero at 50px headline; footer in 3-region row. |
| Wide | > 1440px | Content width caps at 1440px; outer gutters absorb the rest of the viewport with the cream canvas. |

### Touch Targets
- Primary CTAs at 54px height — well above WCAG AAA.
- Color-swatch dots are 20px circular on product cards. The dot itself is small (below WCAG AAA), but the radio-input parent has a 9px margin halo, making the effective tap target 38px.
- PDP swatch dots are 40×40px — well above AAA.
- Hamburger / cart icons are 44×44px on mobile.

### Collapsing Strategy
- Top nav links collapse into a hamburger drawer below 750px.
- The hero swatch row stays horizontal on mobile but scrolls if more than 6 finishes.
- Product card stays full-width inside its grid cell; the grid changes column count rather than reflowing card content.
- Bundle-set cards stack their photo + price-callout vertically on mobile from a horizontal layout on desktop.
- PDP photo gallery switches from vertical scroll-stack to a swipeable carousel below 750px.
- Footer columns collapse to one column on mobile, with social icons centering beneath.

## 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 named-swatch hex source-of-truth:** The hex values for individual finishes (Spice, Sage, Steam, Blue Salt, etc.) were inferred from page imagery and the broader brand CSS variable set (`--twc-special` HSL → Spice; `--twc-background-primary` HSL → Canvas). The Shopify variant metadata almost certainly holds canonical hex values per SKU that we could not extract from the public HTML alone.
- **Limited-edition swatches:** Rosa, Lavender, Saffron, Ember, Spruce, Midnight rotate on and off the storefront seasonally. Hex values approximated from archived product imagery — confirm against current production variants before using.
- **Cart drawer styling:** The slide-in cart drawer was not captured in the homepage HTML. Padding, header, line-item styling, and the upsell-tile inside cart are TBD.
- **Modal / dialog system:** Beyond the geolocation modal (which uses Plaid-XL-Web at 12px / 150%), the broader modal styling for size charts, shipping info, and login is not captured here.
- **Hover state colors:** Only the button-primary hover (`#000`) is canonically documented. Other components' hover treatments are TBD.
- **Spacing micro-tokens beyond `{spacing.section}`:** The actual production design system has finer-grained spacing tokens (8/12/16/20/24/32/40/48/60/96px) — only the most commonly observed steps are extracted here.
- **Iconography:** The system uses thin-stroke 24×24px line icons (search, account, cart, hamburger). Exact icon library / SVG specifics not captured.
- **PDP zoom / image gallery interaction:** The desktop image zoom-on-hover and the mobile carousel pagination dots styling are TBD.
- **Email capture modal:** A welcome modal appears on first visit but its precise tokens are TBD.
- **Recipe blog template:** Captured at the tile level but full blog detail template (article layout, ingredient list typography) was not in the homepage scrape.