---
version: alpha
name: Warby Parker
description: A two-typeface eyewear brand where Ivory LL's editorial serif carries every headline and ABC Social's clean grotesque handles utility — navy-deep CTAs alongside brilliant blue accents on white, full-radius pill buttons, and product photography so good the chrome barely needs to try.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#fcfbf9"            # warm off-white sections, hero card ground
  surface-cool: "#e1e5e6"       # light dividers, input borders, neutral chip fills

  # Ink / text
  ink: "#121212"                # near-black body, headings, primary text
  ink-secondary: "#3a434c"      # secondary body copy, subdued labels
  ink-muted: "#72777c"          # captions, metadata, placeholder text

  # Brand / accent hierarchy
  primary: "#1050d0"            # brilliant interactive blue — links, ghost button stroke
  on-primary: "#ffffff"         # text on blue fills
  primary-deep: "#072369"       # navy — primary CTA fill, logo, dark hero surfaces
  on-primary-deep: "#ffffff"    # text on navy fills
  primary-container: "#caeaf5"  # light Warby blue — tinted badge fills, subtle panels
  primary-faded: "#8aa9e8"      # faded blueprint — secondary badge, inactive states

  # Semantic
  error: "#d6003c"              # --wp-color-support-red
  error-dark: "#bf0025"         # --wp-color-support-dark-red
  success: "#09624d"            # --wp-color-support-classroom-green
  warning: "#c93700"            # --wp-color-support-orange

  # Borders
  border: "#e1e5e6"             # default hairline dividers, input strokes
  border-strong: "#1050d0"      # active/focus input border (blue)

  # Shadow tints (opaque approximations — originals were rgba)
  shadow-soft: "#000000"        # was rgba(0,0,0,0.02–0.04) — card ambient
  shadow-card: "#121212"        # was rgba(18,18,18,0.12) — elevated card hover
  shadow-overlay: "#3a434c"     # was rgba(65,75,86,0.24) — modal / flyout

  # Focus
  focus-ring: "#414b56"         # --wp inline focus: white 2px + #414b56 3px compound ring

typography:
  display-hero:
    fontFamily: "Ivory LL, Playfair Display, Georgia, Times New Roman, serif"
    fontSize: 70px
    fontWeight: 400
    lineHeight: 1.09
    letterSpacing: -0.7px
  display:
    fontFamily: "Ivory LL, Playfair Display, Georgia, Times New Roman, serif"
    fontSize: 55px
    fontWeight: 400
    lineHeight: 1.11
    letterSpacing: -0.55px
  heading-section:
    fontFamily: "Ivory LL, Playfair Display, Georgia, Times New Roman, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.4px
  heading-sub:
    fontFamily: "Ivory LL, Playfair Display, Georgia, Times New Roman, serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.3px
  heading-small:
    fontFamily: "Ivory LL, Playfair Display, Georgia, Times New Roman, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.24px
  body-large:
    fontFamily: "ABC Social, Inter, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.42
    letterSpacing: 0.48px
  body:
    fontFamily: "ABC Social, Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0.36px
  body-emphasis:
    fontFamily: "ABC Social, Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.56
    letterSpacing: 0.36px
  button-ui:
    fontFamily: "ABC Social, Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0.32px
  nav-link:
    fontFamily: "ABC Social, Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.63
    letterSpacing: 0px
  caption:
    fontFamily: "ABC Social, Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: -0.13px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 32px
  2xl: 48px
  3xl: 60px
  4xl: 88px

rounded:
  none: 0px
  sm: 4px
  md: 12px
  lg: 16px
  pill: 100px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"

  button-navy:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary-deep}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 24px
  button-navy-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"

  button-white:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 24px
  button-white-hover:
    backgroundColor: "{colors.surface-cool}"
    textColor: "{colors.ink}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 24px
    border: 1px solid {colors.primary}
  button-outline-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"

  button-ghost-dark:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    border: 1px solid {colors.ink}
  button-ghost-dark-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 16px
  card-hover:
    backgroundColor: "{colors.background}"
    boxShadow: "0px 8px 12px {colors.shadow-card}, 0px 1px 4px {colors.shadow-card}"

  card-floating:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 8px 16px
    boxShadow: "0px 1px 4px {colors.shadow-soft}, 0px 4px 12px {colors.shadow-soft}"
  card-floating-hover:
    backgroundColor: "{colors.background}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    border: 1px solid {colors.border}
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    border: 1px solid {colors.border-strong}

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  nav-bar:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary-deep}"
    typography: "{typography.nav-link}"
    padding: 12px 20px
---

# Warby Parker Design System

## Overview

Warby Parker's site is built on a clean, photographic confidence — the kind of design that trusts its products to sell themselves, then builds just enough thoughtful chrome around them to feel premium without feeling cold. The page opens on `{colors.primary-deep}` navy, a deep ink-blue (`#072369`) that anchors the navigation and logo, then releases into a warm `{colors.background}` white punctuated by the `{colors.surface}` off-white (`#fcfbf9`) that reads almost like uncoated paper. The effect is optician-meets-editorial: calm, clean, and slightly upmarket.

The typographic decision is the most interesting thing about the system. Display headlines, section titles, and product callouts are set in **Ivory LL** — a low-contrast, elegant serif with tight negative tracking at large sizes. It reads like a Parisian optician's signage: gentle confidence without shouting. Body copy, UI labels, and navigation text shift to **ABC Social** — a humanist grotesque with subtle warmth and medium letterspacing. The contrast between the two faces does all the heavy lifting a brand color might otherwise do, creating a visible gear-shift between aspirational content and functional utility. There is no monospace, no condensed, no italic emergency — just two well-chosen faces used with discipline.

Interactivity is governed by a blue spectrum: `{colors.primary}` (`#1050d0`) as the live, clickable signal and `{colors.primary-deep}` (`#072369`) as its authoritative anchor. Buttons are full-radius pills at `100px` — a choice that reads friendly and considered rather than hard-edged. Cards use `{rounded.lg}` (16px) throughout the product grid, and the border system is minimal, preferring fine-line `{colors.border}` hairlines over boxes. The overall impression is a confident, design-literate retailer that knows exactly who it's for.

**Key Characteristics:**
- Two-typeface system: **Ivory LL serif** for display + headlines; **ABC Social grotesque** for UI + body — one brand voice, two registers
- Navy-primary canvas hierarchy: `{colors.primary-deep}` anchors the nav and dark CTAs; `{colors.primary}` drives interactive blue for links and ghost buttons
- Full-pill buttons at `{rounded.pill}` (100px) — the primary button shape, friendly and product-forward
- Product cards at `{rounded.lg}` (16px) — soft but structured; never sharp, never fully round
- Photography-first layout: oversized product and lifestyle imagery at full-bleed; chrome recedes to serve the frame
- Warm off-white `{colors.surface}` (`#fcfbf9`) as secondary surface — reads like paper, not gray
- Four-color blue vocabulary: `{colors.primary-deep}` (navy) → `{colors.primary}` (interactive) → `{colors.primary-faded}` (passive) → `{colors.primary-container}` (tinted panel)
- Dual custom shadow levels: featherweight ambient (`{colors.shadow-soft}`) on resting cards; stronger lift (`{colors.shadow-card}`) on hover — depth is earned
- Ivory LL at `-0.7px` negative tracking at 70px; spacing tightens proportionally as size grows
- ABC Social with positive `+0.32–0.48px` letter-spacing on body and labels — warmth through airiness
- 8px spacing base; major section rhythm at `{spacing.3xl}` (60px) and `{spacing.4xl}` (88px)
- CSS custom property system (`--wp-color-core-blues-*`, `--wp-color-support-*`) — well-named token layer

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The default page canvas. Dominant across product pages and most editorial layouts.
- **Warm Off-White** (`{colors.surface}`): Section bands, hero card backgrounds, and material-feeling surfaces. The faint warmth (`#fcfbf9`) separates it from clinical white without going beige.
- **Cool Gray** (`{colors.surface-cool}`): Dividers, input border fills, neutral chip fills. The system's one cool neutral.

### Ink & Text
- **Near-Black** (`{colors.ink}`): Primary text, display copy on light surfaces. `#121212` — intentionally off true black.
- **Slate** (`{colors.ink-secondary}`): Secondary copy, subdued labels, less-emphasized headlines.
- **Muted Gray** (`{colors.ink-muted}`): Captions, metadata, placeholder text — `--wp-color-sliver` territory.

### Brand Accent Hierarchy
- **Interactive Blue** (`{colors.primary}`): Links, ghost button strokes, active states, focus rings. The "tap me" signal. CSS: `--wp-color-core-blues-dark-blueprint` neighbor.
- **Navy** (`{colors.primary-deep}`): The CTA authority color. Navigation bar fill, primary shop buttons, logo. CSS: `#072369` — the logo background confirms it.
- **Light Warby Blue** (`{colors.primary-container}`): Tinted panels, soft badge fills. CSS: `--wp-color-core-blues-light-warby` (`#caeaf5`).
- **Faded Blueprint** (`{colors.primary-faded}`): Ink-wash states, secondary badge fills. CSS: `--wp-color-core-blues-faded-blueprint` (`#8aa9e8`).

### Semantic
- **Error** (`{colors.error}`): Form validation, destructive states. CSS: `--wp-color-support-red`.
- **Error Dark** (`{colors.error-dark}`): Critical alerts. CSS: `--wp-color-support-dark-red`.
- **Success** (`{colors.success}`): Confirmation, positive feedback. CSS: `--wp-color-support-classroom-green`.
- **Warning** (`{colors.warning}`): Caution states. CSS: `--wp-color-support-orange`.

### Borders, Shadows & Focus
- **Default Border** (`{colors.border}`): Hairline input edges, card dividers — `#e1e5e6` light gray.
- **Active Border** (`{colors.border-strong}`): Interactive blue stroke on focused inputs, outlined CTAs.
- **Focus Ring** (`{colors.focus-ring}`): The compound focus treatment — `2px white` + `3px #414b56` inset ring around interactive elements.

## Typography

### Font Family
- **Display**: `Ivory LL` — a refined low-contrast serif with gentle optical quirks. Self-hosted (`IvoryLL_Regular.woff2`, `IvoryLL_Italic.woff2`). Closest Google Font substitute: Playfair Display (display, editorial). Fallback stack: `Georgia, Times New Roman, serif`.
- **UI / Body**: `ABC Social` — a humanist grotesque with warmth. Self-hosted (`ABCSocial_Regular.woff2`, `ABCSocial_Medium.woff2`). Closest Google Font substitute: Inter (tight variant). Fallback stack: `system-ui, sans-serif`.
- **Italic availability**: Ivory LL italic available for editorial emphasis; not used for standard UI.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 70px / Ivory LL / −0.7px — principal campaign headline |
| `display` | 55px / Ivory LL / −0.55px — major section titles |
| `heading-section` | 40px / Ivory LL / −0.4px — category headings, feature panels |
| `heading-sub` | 30px / Ivory LL / −0.3px — product group names, callout labels |
| `heading-small` | 24px / Ivory LL / −0.24px — card headings, feature sub-labels |
| `body-large` | 24px / ABC Social 500 / +0.48px — intro paragraphs, callout copy |
| `body` | 18px / ABC Social 400 / +0.36px — standard reading copy |
| `body-emphasis` | 18px / ABC Social 500 / +0.36px — emphasized body, price lines |
| `button-ui` | 16px / ABC Social 400 / +0.32px — all button and interactive labels |
| `nav-link` | 16px / ABC Social 600 / 0px — navigation links |
| `caption` | 14px / ABC Social / −0.13px — metadata, helper text, fine print |

### Principles
- **Serif for desire, sans for decision**: Ivory LL sets the editorial tone; ABC Social handles the functional layer. Never mix them at the same hierarchy level.
- **Negative tracking at display size**: every serif headline carries negative tracking (`-0.24px` to `-0.7px`) — proportional to size, giving the type its refined, condensed elegance.
- **Positive tracking on body**: ABC Social gains slight airiness through `+0.32–0.48px` letter-spacing — friendly warmth for long-form reading.
- **Weight restraint**: Ivory LL stays at weight 400 throughout; ABC Social reaches 500 for emphasis and 600 for nav/labels. Bold (700) exists but is reserved for screen-reader-supporting states.
- **No all-caps lockup**: Warby Parker does not use uppercase tracking as a stylistic device — sentence case throughout.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Section-level rhythm uses `{spacing.3xl}` (60px) and `{spacing.4xl}` (88px) as the dominant vertical separators. Component internals run tighter at `{spacing.sm}` to `{spacing.lg}`.

### Grid & Container
- Max content width: ~1296px, centered
- Product grid: 3–4 columns at desktop, 2 at tablet, 1 at mobile — with 20px gutters
- Hero: full-bleed photography to container edge with overlaid headline and single CTA
- Notable pattern: editorial "frame within a frame" — product images in 16px-radius cards tiled inside full-width container bands

### Whitespace Philosophy
- **Generous section breathing room**: 60–88px between major page sections — unhurried pace
- **Tight card grid**: product cards carry 16px internal padding, sitting close together in the grid
- **Warm surfaces as rest zones**: `{colors.surface}` off-white bands interrupt the white canvas, not as decoration but as visual pauses

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Body text zones, photography frames, flush image cards |
| Subtle (Level 1) | `0px 1px 4px rgba(0,0,0,0.04), 0px 4px 12px rgba(0,0,0,0.02)` | Resting floating cards — try-on cards, promo tiles |
| Card (Level 2) | `0px 8px 12px rgba(18,18,18,0.12), 0px 1px 4px rgba(18,18,18,0.12)` | Card hover elevation — product cards lift on pointer-over |
| Overlay (Level 3) | `0px 6px 24px rgba(65,75,86,0.24)` | Dropdowns, flyout menus, modals |
| Focus Ring | `0 0 0 2px white, 0 0 0 3px #414b56` | Keyboard-navigable interactive elements |

**Shadow Philosophy**: Warby Parker uses shadow as a purposeful signal rather than decoration. Resting cards are nearly flat — the featherweight Level 1 shadow barely shows at normal brightness. The more deliberate Level 2 appears on hover to confirm interactivity, giving product cards a tactile sense of lift. This tiered approach keeps the page from feeling heavy while still communicating interactive depth.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Rarely used — internal image frames, separator lines |
| `sm` | 4px | Checkboxes, small form controls, tabs |
| `md` | 12px | Search inputs, secondary form fields |
| `lg` | 16px | Product cards, floating panels, content tiles |
| `pill` | 100px | All CTA and navigation buttons — the defining shape |

The system is built around a two-mode radius vocabulary: **pill for actions, `lg` for containers**. Buttons are always fully rounded pills — 100px radius at any size. Cards and panels settle at 16px. The discontinuity between the two is intentional: it clearly signals what can be clicked (round) versus what is a surface (softly cornered). Sharp corners essentially don't exist in brand-visible UI.

## Components

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

### Button Variants

- **`button-primary`** — Interactive blue (`{colors.primary}`) fill, white text, pill shape. The default CTA for sign-up and quiz flows. Hover darkens to navy (`{colors.primary-deep}`).
- **`button-navy`** — Navy (`{colors.primary-deep}`) fill, white text, pill shape. The commerce CTA — "Shop eyeglasses", "Shop Summer", the main transactional action. Hover brightens to interactive blue.
- **`button-white`** — White fill, near-black text, pill shape. Used over photography and dark surfaces.
- **`button-outline`** — Transparent fill with `{colors.primary}` blue 1px border and matching text. Secondary action for content zones. Hover fills blue, inverts text.
- **`button-ghost-dark`** — Transparent fill with near-black 1px border. Tertiary / neutral contexts on white surfaces.

### Cards

- **`card`** — White surface, 16px radius, 16px padding, no resting shadow. The default product grid card.
- **`card-floating`** — White surface with Level 1 ambient shadow, 16px radius. Used for try-on prompts, feature tiles that need to feel "above" the canvas.
- Both variants gain Level 2 shadow on hover, confirming interactivity before click.

### Inputs

- **`input`** — White fill, `{colors.border}` 1px stroke, 12px radius, `{typography.body}` at 18px. Generous 12px vertical padding. Focus: border shifts to `{colors.border-strong}` interactive blue — clean, no glow.

### Badges

- **`badge`** — Light Warby Blue (`{colors.primary-container}`) fill, navy text, pill shape. Quiet brand-tinted tag for "New", "Limited", category markers.

### Navigation

- **`nav-bar`** — Navy (`{colors.primary-deep}`) fill, white text, 600-weight ABC Social at 16px. Sticky on scroll. Logo is a white wordmark. Nav links carry `0.35s` transition for color.

## Do's and Don'ts

### Do
- Set every display headline in Ivory LL with negative tracking — at 40px use `-0.4px`, at 70px use `-0.7px`; scale proportionally
- Make every button a pill (`{rounded.pill}` = 100px) — this is the system's most distinctive interaction signature
- Use `{colors.primary-deep}` navy for the primary shop/commerce CTA and `{colors.primary}` blue for links and quiz-style flows
- Give product cards `{rounded.lg}` (16px) with a featherweight Level 1 shadow that lifts to Level 2 on hover
- Apply the warm `{colors.surface}` off-white (`#fcfbf9`) for section alternation — not gray, not cool white
- Keep ABC Social's body text at `+0.32–0.48px` letter-spacing — the airiness is intentional
- Separate functional copy (ABC Social) from aspirational display (Ivory LL) — never use the serif for button labels
- Expand the four-step blue vocabulary: reach for `{colors.primary-container}` for tinted badge fills before inventing new colors

### Don't
- Don't set button labels in Ivory LL serif — `{typography.button-ui}` is ABC Social, always
- Don't use sharp `{rounded.none}` corners for buttons or product cards — squared edges break the approachable brand register
- Don't introduce a third typeface — Ivory LL + ABC Social is the complete typographic vocabulary
- Don't flatten the shadow hierarchy: resting cards get Level 1, hover gets Level 2 — omitting either collapses the interaction model
- Don't use `{colors.error}` or `{colors.warning}` as accent or CTA color — they are semantic only
- Don't over-track at display sizes — Ivory LL headlines need negative tracking (`-0.24px` minimum); positive tracking on serif headlines breaks the refinement
- Don't set navy (`{colors.primary-deep}`) as link or inline text color — `{colors.primary}` interactive blue is the link signal
- Don't add gradients to button fills — Warby Parker's button system is flat solid fills, no gradient
- Don't mix the `{rounded.sm}` (4px) checkbox radius and the `{rounded.lg}` (16px) card radius on the same component — radius roles are context-specific, not interchangeable

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single column, nav collapses to hamburger; hero headline drops to ~40px; pill buttons go full-width |
| Mobile | 480–768px | Single-column product grid; 2-up occasional; hero shifts to portrait crop |
| Tablet | 768–1024px | 2-column product grid; nav bar expands to partial horizontal; 55px headlines |
| Desktop | 1024–1296px | 3–4 column product grid; full horizontal nav with flyouts; display-hero at 70px |
| Large Desktop | >1296px | Container max ~1296px centered; full editorial layouts; oversized hero photography |

### Touch Targets
- Pill buttons carry 13px vertical padding — comfortable tap height at ~42px total
- Product cards are full-card tappable with 16px corner radius maintaining visual affordance
- Nav links at 16px 600-weight have adequate tap area in the sticky bar

### Collapsing Strategy
- **Navigation**: Full horizontal nav → hamburger with off-canvas drawer; navy bar persists at all sizes
- **Typography**: Ivory LL display scales from 70px → ~36px on mobile while keeping negative tracking
- **Grid**: 4-col → 2-col → 1-col product grid; gutter compresses from 20px → 12px
- **Spacing**: Section breaks compress from 88px at desktop toward 48px on mobile; internal card padding holds at 16px
- **Buttons**: Full-width CTA on mobile, auto-width on tablet+

### Image Behavior
- Product photography maintains aspect ratio — no distortion on grid reflow
- Hero images served with art-direction alternates for mobile portrait viewports
- Card images fill the `{rounded.lg}` 16px container edge-to-edge at the top, no inset

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (white)
- Warm surface: `{colors.surface}` (#fcfbf9 — off-white paper)
- Primary text: `{colors.ink}` (#121212)
- Secondary text: `{colors.ink-secondary}`
- Commerce CTA fill: `{colors.primary-deep}` (navy)
- Interactive blue: `{colors.primary}` (#1050d0)
- Border: `{colors.border}` (#e1e5e6)
- Error: `{colors.error}`

### Example Component Prompts

- "Build a Warby Parker hero: full-bleed product photography with a `{colors.primary-deep}` navy sticky nav holding a white wordmark. Overlay a 70px Ivory LL Regular headline in `{colors.ink}` with letter-spacing `-0.7px` and line-height `1.09`. Below it, a navy pill CTA (`{colors.primary-deep}`, `{rounded.pill}` 100px, `13px 24px` padding, ABC Social 16px weight 400) labeled 'Shop Summer'."
- "Design a Warby Parker product card: `{colors.background}` white surface, `{rounded.lg}` 16px radius, 16px padding, product photo full-width at top. Below: brand name in 30px Ivory LL at `−0.3px` tracking, price in 18px ABC Social 500. Resting shadow: `0px 1px 4px rgba(0,0,0,0.04), 0px 4px 12px rgba(0,0,0,0.02)`. Hover shadow: `0px 8px 12px rgba(18,18,18,0.12), 0px 1px 4px rgba(18,18,18,0.12)`."
- "Create a pill outline button: transparent fill, `1px solid {colors.primary}` border, `{colors.primary}` blue text, `{rounded.pill}` 100px radius, `13px 24px` padding, ABC Social 16px weight 400. Hover: fill transitions to `{colors.primary}`, text to white over `0.2s cubic-bezier(0.25,0,0.35,0.95)`."
- "Build a Warby Parker nav bar: full-width `{colors.primary-deep}` navy background, white wordmark centered or left-aligned, horizontal links in ABC Social 16px weight 600 `{colors.on-primary-deep}`, with `0.35s` color-fade transition. Sticky; collapses to hamburger below 1024px."
- "Style a form input in Warby Parker: `{colors.background}` fill, `1px solid {colors.border}` default stroke, `{rounded.md}` 12px radius, `12px 16px` padding, ABC Social 18px weight 400 text `{colors.ink}`. Focus: border shifts to `1px solid {colors.border-strong}` interactive blue, no glow. Transition `0.2s`."
- "Create a tinted badge: `{colors.primary-container}` light blue fill, `{colors.primary-deep}` navy text, ABC Social 14px weight 400, `{rounded.pill}` shape, `4px 12px` padding. For product tags like 'New' or collection labels."

### Iteration Guide

1. Start with `{colors.background}` white as the canvas. Introduce `{colors.surface}` off-white for alternate section bands — never gray.
2. Set display headlines in Ivory LL with negative tracking scaled to size. At 70px use `−0.7px`; at 40px `−0.4px`. If the serif looks loose, tighten the tracking before changing anything else.
3. Keep all functional text (buttons, nav, body) in ABC Social. The typeface boundary is load-bearing — crossing it reads as broken.
4. Every button is a pill (`{rounded.pill}` = 100px). Commerce CTAs use `{colors.primary-deep}` navy fill. Content-zone CTAs use `{colors.primary}` blue fill. Ghost/outline CTAs use blue stroke on transparent.
5. Cards always carry 16px radius. Add Level 1 featherweight shadow at rest; elevate to Level 2 on hover. The lift is confirmation, not decoration.
6. Use the blue vocabulary in hierarchy: `{colors.primary-deep}` for authority (nav, fill CTAs), `{colors.primary}` for interaction (links, focus, ghost strokes), `{colors.primary-container}` for tinted fills.
7. If a new element needs a background other than white — reach for `{colors.surface}` warm off-white before anything else.

---

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