---
version: alpha
name: "Wales Bonner"
description: "Scholarly British-Caribbean luxury label — ultra-light UniversLTStd grotesque on a warm parchment canvas, deep burgundy editorial accents, and photography as cultural argumentation."

colors:
  # Surface / canvas
  background: "#fdfcfb"          # warm parchment white — rgb(253,252,251); the site's dominant ground
  surface: "#f5f3f1"             # slightly deeper warm off-white for secondary panels /* estimated */
  surface-dark: "#2a0a0e"        # deep burgundy-black for modal overlays, inverted sections /* estimated from screenshot modal */

  # Ink / text
  ink: "#151515"                 # primary text — near-black; rgb(21,21,21); self-hosted UniversLTStd
  ink-secondary: "#5a5754"       # secondary captions, muted metadata /* estimated */
  ink-ghost: "#9e9a96"           # placeholders, disabled, fine print /* estimated */
  on-dark: "#fdfcfb"             # text on dark modal/inverted surface

  # Brand accent — deep scholarly burgundy
  primary: "#5c0a12"             # deep burgundy; CTA fills, modal chrome /* estimated from screenshot */
  on-primary: "#fdfcfb"          # warm parchment text on burgundy fill
  primary-hover: "#3d0009"       # darker burgundy on hover /* estimated */

  # Interactive states
  text-hover: "#000000"          # link hover — deepens to absolute black
  focus-ring: "#151515"          # keyboard focus outline, near-black

  # Borders
  border: "#151515"              # 1px structural rule — inputs, section dividers
  border-subtle: "#eeeeee"       # light hairline separator; rgb(238,238,238) — extracted from dembrandt

  # Shadow tints
  shadow-soft: "#c0bebb"         # modal overlay tint — was rgba(0,0,0,0.2); opaque approximation /* estimated */

typography:
  display-hero:
    fontFamily: "UniversLTStd, Verdana, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 200
    lineHeight: 1.05
    letterSpacing: 0.02em
  display:
    fontFamily: "UniversLTStd, Verdana, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 200
    lineHeight: 1.1
    letterSpacing: 0.03em
  heading-section:
    fontFamily: "UniversLTStd, Verdana, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 200
    lineHeight: 1.3
    letterSpacing: 0.05em
  heading-sub:
    fontFamily: "UniversLTStd, Verdana, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 200
    lineHeight: 1.5
    letterSpacing: 0.08em
  body-large:
    fontFamily: "UniversLTStd, Verdana, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 200
    lineHeight: 1.6
    letterSpacing: 0.02em
  body:
    fontFamily: "UniversLTStd, Verdana, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 200
    lineHeight: 1.5
    letterSpacing: 0.01em
  nav-link:
    fontFamily: "UniversLTStd, Verdana, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 200
    lineHeight: 1.5
    letterSpacing: 0.01em
  button-ui:
    fontFamily: "UniversLTStd, Verdana, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 200
    lineHeight: 1.0
    letterSpacing: 0.08em
  caption:
    fontFamily: "UniversLTStd, Verdana, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 200
    lineHeight: 1.5
    letterSpacing: 0.02em
  micro:
    fontFamily: "UniversLTStd, Verdana, Arial, sans-serif"
    fontSize: 9px
    fontWeight: 200
    lineHeight: 1.4
    letterSpacing: 0.01em

spacing:
  xs: 5px
  sm: 8px
  md: 20px
  lg: 30px
  xl: 50px
  2xl: 70px
  3xl: 125px

rounded:
  none: 0px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px
    textTransform: uppercase
    letterSpacing: 0.08em
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 12px 20px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px
    border: "1px solid {colors.border}"
    textTransform: uppercase
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 12px 20px

  button-ghost:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 20px
    textTransform: uppercase
  button-ghost-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 12px 20px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    borderBottom: "1px solid {colors.border-subtle}"
  input-focus:
    borderBottom: "1px solid {colors.border}"
    outline: "none"
    boxShadow: "rgb(255, 255, 255) 0px 0px 0px 1000px inset"

  input-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    borderBottom: "1px solid {colors.on-dark}"
  input-dark-focus:
    boxShadow: "rgb(255, 255, 255) 0px 0px 0px 1000px inset"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 25px 20px
    borderBottom: "none"

  modal:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.none}"
    padding: 30px

  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 2px 5px
    textTransform: uppercase
---

# Wales Bonner Design System

## Overview

Wales Bonner's digital identity carries the same intellectual density as its collections: it arrives quietly, on a warm parchment ground (`{colors.background}`), and asks you to look rather than be directed. The homepage opens on full-bleed editorial photography — a figure in a striped knit, arms raised, against that near-cream background — and the brand wordmark appears at the top in UniversLTStd at weight 200, barely heavier than a breath. The site's visual argument is that luxury does not announce itself; it accumulates, photograph by photograph, in the manner of a scholarly monograph or an artist's catalogue raisonné.

The typographic system is a radical commitment to a single face at a single weight. UniversLTStd (self-hosted as `UniversLTStd.woff2`), deployed exclusively at weight 200 — the Extra Light cut — across every role: display, navigation, body, button label, caption. Where peers like The Row use Basic Commercial at two weights or Aimé Leon Dore pairs three families, Wales Bonner achieves all hierarchy through scale and spacing alone. At 12px with 0.08em tracking for navigation, the text reads as a murmur. At display sizes, that same lightness becomes monumental through sheer scale. The typeface's Swiss grotesque architecture, thinned almost to translucency, gives the site a peculiarly literary quality — an academic journal designed by someone who also read Barthes. This is UniversLTStd doing exactly what the brand requires: scholarly restraint made visible.

Color occupies the narrowest imaginable band. The canvas is `{colors.background}` — not pure white but a faintly warm parchment (rgb 253, 252, 251) that references aged paper, linen, or the warm light of a West African studio rather than a clean digital surface. Against it, `{colors.ink}` (rgb 21, 21, 21) carries every text and structural element. The single chromatic departure — visible in the newsletter modal overlay — is a deep `{colors.primary}` burgundy approaching the color of a dark red wine or museum velvet: scholarly, archival, culturally specific. No other hue appears. The restraint is not poverty; it is a curatorial decision, a signal that color, when Wales Bonner finally uses it, carries the weight of all the emptiness that preceded it.

**Key Characteristics:**
- Warm parchment canvas (`{colors.background}`) — not pure white; the faint warmth references aged paper and the brand's cross-cultural material references
- Single typeface, single weight: UniversLTStd at 200 (Extra Light) across every typographic role — hierarchy built entirely from scale and tracking
- Deep burgundy `{colors.primary}` as the sole chromatic accent — appears in modal overlays and inverted sections; resonant, archival, not commercial
- Hard `{rounded.none}` on every surface — buttons, inputs, image frames, modals — no softening, no consumer-app warmth
- Full-bleed editorial photography at the structural core — the image is the page; the UI is its caption
- Navigation at 12px UniversLTStd weight 200 — text so light it reads as negative space occupying the header zone
- Bottom-border-only inputs: `1px solid {colors.border-subtle}` at rest; `1px solid {colors.border}` on focus — no box, no fill
- Modal chrome in `{colors.surface-dark}` deep burgundy-black, providing the only dark-surface context in the system
- Motion at considered pace: 0.2s on button states, 0.3–0.4s on modal and panel transitions, 0.8s on media opacity — slow, deliberate ease
- Spacing scale derived from actual extracted values: 20px base, 50px section unit, 125px editorial gap — the proportions of a printed art book
- No border-radius anywhere in the system — every element is architectural, sharply cornered

## Colors

### Surface & Canvas
- **Parchment White** (`{colors.background}`): The only page background — a faintly warm off-white that reads as aged cotton or quality paper rather than a digital white. Never pure `#ffffff`; the warmth is intentional.
- **Warm Off-White** (`{colors.surface}`): A slightly deeper tone for secondary panels and filter drawers, maintaining the material warmth of the canvas.
- **Burgundy-Black** (`{colors.surface-dark}`): The inverted surface for modal overlays and newsletter panels. A near-black with a deep red undertone — museum velvet, not pure black. Carries the brand's sole chromatic gesture.

### Ink / Text
- **Wales Bonner Ink** (`{colors.ink}`): Primary text — rgb(21, 21, 21); a near-black that reads as printed ink rather than screen black. Used for all navigation, body copy, product labels, and structural chrome.
- **Secondary Ink** (`{colors.ink-secondary}`): Muted mid-tone for secondary labels, price metadata, and caption text where the full ink would be too present.
- **Ghost Ink** (`{colors.ink-ghost}`): Placeholders, disabled states, fine-print legal copy — the lowest-contrast tier.
- **On Dark** (`{colors.on-dark}`): Warm parchment text for all inverted contexts — modal copy, newsletter fields, dark hero overlays. Matches `{colors.background}` precisely.

### Brand Accent
- **Scholarly Burgundy** (`{colors.primary}`): Deep red-black used for modal chrome, newsletter panel fill, and primary CTA surfaces. The color of a museum catalog cover or a Bordeaux wine — specific, not commercial. The system's sole chromatic statement.
- **On Burgundy** (`{colors.on-primary}`): Warm parchment label text on the burgundy CTA surface.
- **Deep Burgundy Hover** (`{colors.primary-hover}`): A darker step for primary button hover — the color deepens rather than changes.

### Borders
- **Structural Border** (`{colors.border}`): `1px` rules on inputs (focus state), section bottom edges, and form divisions. Near-black, ink-weight.
- **Hairline Divider** (`{colors.border-subtle}`): Light separator — extracted at rgb(238, 238, 238) — for resting input underlines and secondary section rules.

### Shadow
- **Warm Mist** (`{colors.shadow-soft}`): Modal overlay shadow tint — a warm-neutral opaque approximation of the original `rgba(0,0,0,0.2)`.

## Typography

### Font Family
- **Primary (sole)**: `UniversLTStd`, with fallbacks: `Verdana, Arial, sans-serif`. Self-hosted as `UniversLTStd.woff2`. A Swiss grotesque of the International Typographic Style tradition — Univers was designed by Adrian Frutiger in 1957; the LTStd cut is the Linotype Standard variant. Weight 200 (Extra Light) used exclusively across all roles.
- **OpenType Features**: No explicit feature-settings detected. The extreme lightness of weight 200 is the design's singular typographic gesture; no additional OpenType manipulation is needed.

### Hierarchy

The complete type scale is in the `typography:` token block above. All tokens share one face and one weight; differentiation comes from size, tracking, and text-transform alone.

| Token | Use |
|---|---|
| `display-hero` | Campaign headline, collection title overlays — 72px weight 200 |
| `display` | Secondary editorial heads, category page titles |
| `heading-section` | Section titles, editorial subheadings — 20px with 0.05em tracking |
| `heading-sub` | Product card names, list sub-headers — 14px with open tracking |
| `body-large` | Editorial copy, expanded descriptions — 16px at 1.6 line-height |
| `body` | Product descriptions, navigation text, all running copy — 12px |
| `nav-link` | Global navigation, footer links — 12px; murmured presence |
| `button-ui` | CTA and action labels — 12px uppercase with 0.08em tracking |
| `caption` | Size selectors, price metadata, image credits — 10px |
| `micro` | Legal fine print, footer notices — 9px |

### Principles
- **One face, one weight — always**: UniversLTStd at weight 200 for every role without exception. Introducing a second weight or a second family immediately disrupts the scholarly consistency.
- **Tracking as the hierarchy lever**: Since weight never changes, letter-spacing becomes the primary differentiator — 0.01em for reading text, 0.08em for button labels and micro-headers, 0.05em for section heads. Tracking creates register, not weight.
- **Uppercase with discipline**: `text-transform: uppercase` on button labels, badge text, and selected metadata. Editorial body and navigation remain lowercase. Uppercase signals action or classification — never decoration.
- **Scale as authority**: When the brand needs to command attention, it increases size within the same 200-weight family. Lightness at large scale becomes monumental.
- **Line-height as editorial breath**: Navigation and captions at 1.0–1.5; editorial body at 1.6. The higher the reading demand, the more space the line receives.

## Layout

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

Wales Bonner pages breathe at the pace of a museum wall. The 125px (`{spacing.3xl}`) editorial gap mirrors the generous margins of a scholarly catalogue; 50px section units separate content blocks with the deliberateness of a chapter break. The spacing is neither the tight commerce of a shopping site nor the overwhelming air of a single-product luxury brand — it is the measured pace of an artist book, where white space is used as punctuation.

### Grid & Container
- Max content width: approximately 1200–1800px at large breakpoints; multiple detected at 553px, 800px, 1080px, 1200px
- Navigation: full-width single bar; WALES BONNER wordmark centered (SVG wordmark, ~310px wide); nav items left (Archive Sale, Men, Women, Gallery, About) and right (search, bag) in `{typography.nav-link}` 12px weight 200
- Editorial grid: full-bleed photography at hero; multi-column product grids below with tight gutters
- Breakpoints span from 600px through 1800px in 9 steps — reflecting fine-grained Shopify responsive logic

### Whitespace Philosophy
- Parchment ground as active surface — the warm canvas is as much a design element as any typographic choice
- Photography breathes at full width or near-full width; UI orbits at the edges in small, quiet type
- Section gaps at 125px on desktop; the vertical breathing rate of a printed art catalog

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All product cards, campaign images, standard layout surfaces |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border-subtle}` | Resting input underlines, section separators |
| Input Focus (Level 1) | `border-bottom: 1px solid {colors.border}` | Input focus — underline darkens to ink |
| Modal (Level 3) | `background: {colors.surface-dark}` + warm mist shadow | Newsletter modal, overlay panels |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard focus on interactive elements |

**Shadow Philosophy**: Wales Bonner's interface is architecturally flat. No product card lifts; no section carries a drop shadow. The site's sole depth moment is the newsletter modal — a `{colors.surface-dark}` burgundy-black overlay that slides or fades into view against the parchment page. Its depth is created by color contrast (warm near-white vs. deep near-black), not by CSS elevation. The system trusts the photography's own tonal depth rather than competing with it through box-shadow.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every designed element: buttons, cards, inputs, modals, image frames |

Wales Bonner's shape language is absolute zero. There is no border-radius anywhere in the detected system — not even the 2px concession that appears in The Row or Kinfolk. Every element is sharply cornered. Buttons are rectangular slabs. Modals are hard-edged overlays. Input fields are bare underlined fields without any box. The system is architecturally precise, mirroring the tailoring discipline of the garments — the clean fold of a lapel, the right angle of a pocket welt.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing values.

### Button Variants

- **`button-primary`** — `{colors.primary}` burgundy fill, `{colors.on-primary}` warm parchment label, `{rounded.none}`, 12px UniversLTStd uppercase at 0.08em tracking, padding 12px 20px. Hover deepens to `{colors.primary-hover}`. The CTA surface that introduces the brand's sole chromatic gesture.
- **`button-secondary`** — `{colors.background}` parchment fill, `{colors.ink}` text, `1px solid {colors.border}` outline, same geometry. For secondary and ghost actions on light surfaces.
- **`button-ghost`** — `{colors.surface-dark}` fill with `{colors.on-dark}` text; the inverted CTA used inside the modal or dark overlay context.

### Cards

- **`card`** — Flat parchment surface, no border, no shadow, `{rounded.none}`. Product photography sits edge-to-edge; product name in `{typography.heading-sub}` and price in `{typography.body}` appear below with minimal clearance. Cards are pure frames, not chrome containers.

### Inputs

- **`input`** — Parchment fill, `border-bottom: 1px solid {colors.border-subtle}` only, `{rounded.none}`, 12px UniversLTStd weight 200. Focus switches the underline to `{colors.border}` and applies a `box-shadow: rgb(255, 255, 255) 0px 0px 0px 1000px inset` to maintain the parchment appearance against autofill browser overrides.
- **`input-dark`** — Inverted: `{colors.surface-dark}` fill, `{colors.on-dark}` text, underline in `{colors.on-dark}`. Used in the newsletter modal.

### Navigation

- **`nav-bar`** — Parchment background, `{colors.ink}` text, `{typography.nav-link}` (12px weight 200). WALES BONNER wordmark centered as SVG. Navigation items barely perceptible at this weight — the header zone is quiet by design. Motion on interactive elements at 0.3s ease.

### Modal

- **`modal`** — Deep `{colors.surface-dark}` burgundy fill, `{colors.on-dark}` text, `{rounded.none}`. 0.4s ease fade-in on opacity and transform. Contains the newsletter email input in its inverted `{components.input-dark}` variant.

### Badges

- **`badge`** — Typographic-only, no fill, 10px UniversLTStd uppercase in `{colors.ink-secondary}`. Appears over product tiles for "NEW" or collection labels.

## Do's and Don'ts

### Do
- Use `{colors.background}` parchment as the only page canvas — never pure white, never gray, never a tinted section band
- Set every typographic role in UniversLTStd weight 200 — introduce hierarchy through scale and tracking only; never change weight
- Apply `{rounded.none}` to every element without exception: buttons, inputs, cards, image frames, modals — no softening anywhere
- Keep navigation at 12px weight 200; it should read as quiet presence, not typographic authority
- Use `{colors.primary}` burgundy only for modal chrome, inverted CTA surfaces, and the newsletter panel — preserve its rarity as a chromatic signal
- Let full-bleed photography define the emotional register; position UI text as caption or structural chrome, never as the primary visual event
- Use `border-bottom: 1px solid {colors.border-subtle}` as the only input treatment at rest — the line, not the box
- Maintain the `0.3–0.4s ease` motion timing on overlays and panels; faster reads as commercial, slower reads as considered

### Don't
- Don't introduce a second typeface or a heavier UniversLTStd weight — the 200 weight is the design system's signature; changing it abandons the scholarly register
- Don't use pure `#ffffff` as the canvas — the warmth of `{colors.background}` (#fdfcfb) is the material reference; cold white would read as generic
- Don't add border-radius to any element — not 2px, not 4px, nothing — every corner is sharp
- Don't apply `{colors.primary}` burgundy to UI chrome outside the modal context — saturating more elements with it destroys its significance
- Don't add box-shadow to product cards or layout tiles — elevation is created through photography's own tonal depth, never CSS shadow
- Don't set navigation or caption text heavier than weight 200 — the extreme lightness is definitional, not a design preference to be adjusted for readability
- Don't add chromatic hover effects — transitions work through color deepening (`{colors.text-hover}`) or opacity, never by introducing new hues
- Don't use more than one uppercase level per screen zone — uppercase is classification-only; stacking multiple uppercase labels in the same visual area creates noise in a system designed for silence

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <600px | Single column; hamburger nav; hero photography full-height; wordmark centered |
| Mobile | 600–750px | Single-column product grid; nav collapsed; spacing compressed |
| Tablet Small | 751–900px | Two-column product grid begins; nav still collapsed |
| Tablet | 901–1100px | Wider product grid; section typography scales up slightly |
| Desktop | 1100–1200px | Full horizontal nav visible; 3–4 column product grid; editorial sections at full expression |
| Large Desktop | >1200px | Full editorial layout; maximum container ~1800px; 125px vertical section gaps |

### Touch Targets
- Primary buttons: 12px vertical padding — effective height around 40–44px; adequate for primary actions
- Navigation items on mobile: full-width tap targets in hamburger overlay
- Product tiles: entirely tappable card regions via wrapping anchor
- Input fields: full-width on mobile with minimum 44px effective height

### Collapsing Strategy
- **Navigation**: Full horizontal bar with centered wordmark → hamburger drawer on mobile; overlay panel reveals nav items in `{typography.nav-link}` weight 200
- **Type scale**: Display type scales from 72px toward 32–36px on mobile; body holds at 12px; captions at 10px throughout
- **Product grids**: 4-column desktop → 2-column tablet → 1-column mobile; photography always fills cell completely
- **Spacing**: 125px editorial gaps compress toward 50–70px on mobile while preserving the art-book pacing

### Image Behavior
- Campaign photography: full-bleed at every breakpoint, `object-fit: cover`, `{rounded.none}` always — the warm parchment of `{colors.background}` bleeds seamlessly into the faintly warm image sweep
- Product tile photography: fills cell edge-to-edge, portrait orientation maintained, no shadow, no radius
- Media transitions: 0.8s ease on opacity — images appear with the unhurried presence of a gallery reveal

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Parchment (`{colors.background}`)
- Primary text: Wales Bonner Ink (`{colors.ink}`)
- Secondary text: `{colors.ink-secondary}`
- CTA fill: Scholarly Burgundy (`{colors.primary}`)
- CTA text: `{colors.on-primary}`
- Modal / inverted: `{colors.surface-dark}`
- Text on dark: `{colors.on-dark}`
- Input underline (rest): `{colors.border-subtle}`
- Input underline (focus): `{colors.border}`

### Example Component Prompts

- "Build a Wales Bonner campaign hero: `{colors.background}` parchment (#fdfcfb) ground, full-viewport-height editorial photograph (model against warm-toned backdrop), object-fit cover, no border-radius. Float WALES BONNER wordmark centered at top in UniversLTStd weight 200, 12px, `{colors.ink}`. Navigation items left (Archive Sale, Men, Women, Gallery, About) and right (search, bag icon) in the same `{typography.nav-link}` — barely present, never emphatic. No overlay, no tint, no gradient on the hero image."

- "Create a primary CTA button in Wales Bonner style: `{colors.primary}` burgundy (#5c0a12) fill, `{colors.on-primary}` warm parchment text, `{typography.button-ui}` (UniversLTStd weight 200, 12px, `text-transform: uppercase`, `letter-spacing: 0.08em`), `border-radius: 0`, `padding: 12px 20px`. Hover deepens fill to `{colors.primary-hover}` (#3d0009) via `0.2s ease` on background-color. No shadow, no scale, no radius."

- "Design a Wales Bonner product card: `{colors.background}` parchment surface, `border-radius: 0`, no shadow, no border. Full-width portrait product image edge-to-edge (photography on warm neutral sweep). Below: `{typography.heading-sub}` product name (UniversLTStd 14px weight 200, `{colors.ink}`, 0.08em tracking), then `{typography.body}` price in `{colors.ink-secondary}`. Card is a pure editorial frame — no chrome, no hover lift, no background change on hover."

- "Build the Wales Bonner newsletter modal: `{colors.surface-dark}` (#2a0a0e) deep burgundy-black fill, `border-radius: 0`, `padding: 30px`. Fade in at 0.4s ease on opacity. Inside: 'Newsletter' label in `{typography.heading-sub}` (UniversLTStd 14px weight 200 uppercase, `{colors.on-dark}`), a short description line in `{typography.body}` (12px, `{colors.on-dark}` at reduced opacity), then an email input in `{components.input-dark}` (no border except bottom hairline in `{colors.on-dark}`, `box-shadow: rgb(255,255,255) 0px 0px 0px 1000px inset` for autofill control). Close button (×) top-right in `{colors.on-dark}`."

- "Create a Wales Bonner navigation bar: `{colors.background}` parchment fill, no bottom border. WALES BONNER SVG wordmark centered (~310px wide). Left nav items in `{typography.nav-link}` (UniversLTStd 12px weight 200, `{colors.ink}`): Archive Sale · Men · Women · Gallery · About. Right utilities: search icon + bag icon. Hover shifts text from `{colors.ink}` to `{colors.text-hover}` via `0.3s ease` on color. No background fill, no underline animation, no border-bottom at rest."

- "Design a product grid section: 4-column layout on desktop, `{spacing.md}` gutters, `{colors.background}` throughout. Each tile: `{components.card}` — portrait image full cell width, `{typography.heading-sub}` name below, `{typography.body}` price. Section separated from the next by `{spacing.3xl}` (125px) vertical gap. No card border, no card shadow, `{rounded.none}` on all image frames. Hover on tile: image fades to 0.9 opacity via `0.3s ease` only — no lift, no border, no shadow."

### Iteration Guide

1. Begin on `{colors.background}` (#fdfcfb) parchment — not white, not gray. The warmth of the canvas is the material foundation of the entire system.
2. Set every typographic element in UniversLTStd weight 200. If a bolder weight appears, remove it — hierarchy is expressed through size and tracking, never weight.
3. Apply `border-radius: 0` to every element before starting detail work. If any corner is rounded on a button, card, input, or image frame, flatten it.
4. Use `{colors.primary}` burgundy (#5c0a12) only for the modal chrome and primary CTA fill. If it appears elsewhere — in a border, a hover state, an underline — remove it. Its power is its rarity.
5. Set button labels to `text-transform: uppercase` at `{typography.button-ui}` (12px, 0.08em tracking). Do not increase font-size to create prominence — that is not Wales Bonner's mechanism.
6. Confirm inputs use only a bottom-border treatment: `border-bottom: 1px solid {colors.border-subtle}` at rest, `{colors.border}` at focus. No box border, no fill, no glow.
7. Set all transition durations to the extracted scale: `0.2s ease` on button state, `0.3s ease` on color and nav hover, `0.4s ease` on modal appearance, `0.8s ease` on image opacity. Faster than 0.2s reads as digital commerce; slower than 0.8s reads as broken.
8. Verify the page against the parchment-and-ink standard: if the palette on screen reads as white-and-black rather than warm-parchment-and-near-black, the material warmth has been lost — pull the background back to `{colors.background}` and check that text uses `{colors.ink}` (#151515) rather than pure `#000000`.

---

## 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 Wales Bonner. Brand names and trademarks belong to their respective owners.