---
version: alpha
name: "Wayfair"
website: "https://www.wayfair.com"
description: >-
  A US home-goods e-commerce brand anchored on a saturated purple (#7f187f) that carries the top-nav bar, primary CTA buttons, and all interactive link text — a bold, singular brand voltage on a white canvas that reads warm-commercial rather than the neutral blacks and blues most furniture retail defaults to. Wayfair runs Nunito Sans (a friendly rounded geometric sans) for display headings and Roboto for body and caption copy, a two-family split that separates editorial warmth from functional legibility. Buttons use a fully-rounded pill at 40px height; product cards hover in soft shadow at a 4px corner radius. The system is one of a small set of home-furnishing e-commerce platforms that commits a chromatic primary to the entire nav surface rather than holding it in reserve for CTA accents alone.

seo:
  title: "Wayfair Design System for React — purple #7f187f nav, Nunito Sans, 15 components"
  metaDescription: "Wayfair's home-goods e-commerce design system as a DESIGN.md file. Purple #7f187f nav fill and CTA, Nunito Sans display headings, Roboto body, pill buttons, 14 color tokens, 15 components. For React, Next.js, and AI tools."
  highlights:
    - "Purple nav canvas — #7f187f fills the entire top-navigation bar, making Wayfair's brand color a structural surface element rather than a held-in-reserve accent"
    - "Pill-first button geometry — primary CTAs use a fully-rounded pill at 40px height, the warmest button shape in the furniture-retail category"
    - "Nunito Sans for headings, Roboto for body — the two-family split maps editorial warmth to catalog function: Nunito identifies brand-voice moments, Roboto identifies navigation moments"
    - "Shadow-lift product cards — cards use a soft multi-layer shadow on hover rather than a border-only edge, tuning the browse experience toward depth rather than flatness"
    - "Single chromatic voltage — purple is the only non-neutral color in the chrome; all other chromatic moments come from product photography of furniture, rugs, and decor"
  tags:
    - "E-commerce & Retail"
    - "Real Estate & Property"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Wayfair's homepage does something almost no other furniture retailer attempts at scale: it paints the entire top-navigation bar with the brand's saturated purple, then uses that same purple for every primary CTA button and every interactive link text across the page. IKEA keeps its nav matte black. Pottery Barn keeps its nav white. Restoration Hardware keeps its nav gray. Wayfair makes the nav bar a chromatic brand statement, and the single hue has to do that work without a second accent or a gradient to support it. The result reads as commercial-warm — closer to a catalog brand than to a luxury furniture house — and the fully-rounded pill buttons reinforce the approachable-consumer register.

    The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Extraction of the live Wayfair storefront was blocked by a CAPTCHA challenge at the time of capture, so the token values here are built from Wayfair's public Cinder design system documentation and visual analysis of the site's product surfaces. Inside: 14 color tokens covering the purple nav voltage in two depth levels, a white canvas, five neutral gray tiers, and semantic red/green for status; 12 typography tokens running Nunito Sans at display sizes and Roboto at body sizes; 5 radius tokens anchored at 4px for cards and a full pill for buttons; 8 spacing values on a 4px base; and 15 component definitions covering the purple top-nav, pill CTA button, product card with shadow elevation, and the search input.

    Feed this file to Claude or Cursor and it will reproduce Wayfair's specific moves: purple-fill nav bar and primary button (not a held-in-reserve accent), Nunito Sans at 700 for every heading, Roboto for body and nav, fully-rounded pill buttons at 40px, and 4px card rounding with shadow-lift hover states. The single most transferable structural choice is the decision to commit the brand color to a structural nav surface — it means the page has a persistent brand signal at the top of every scroll position, at the cost of making the purple feel obligatory rather than precious.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.wayfair.com"
      title: "Wayfair — official site"
      description: "Wayfair's public US storefront — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Wayfair's primary brand color?"
      answer: "Wayfair's brand voltage is a saturated purple at approximately #7f187f, used as the top-navigation bar fill and as the primary CTA button background. It also carries all interactive link text across the product pages. This is distinct from the convention at most furniture retailers — IKEA uses black for the nav, Pottery Barn uses white, West Elm uses charcoal — making Wayfair's purple the single most visible differentiator in the category. A hover variant at a slightly deeper hue handles pressed states on both the nav elements and the CTA buttons. The purple is the only CSS-declared chromatic color in the chrome; all other colors on the page come from product photography."
    - id: "typeface"
      title: "What typefaces does Wayfair use and what should I substitute?"
      answer: "Wayfair's public Cinder design system uses Nunito Sans for display headings and section titles, and Roboto as the body and navigation copy typeface. Nunito Sans is a geometric humanist sans with rounded terminals — slightly different from the original Nunito by the same designer (Nunito Sans has less extreme rounding). Display headings sit at 24–40px in weight 700; body copy at 14–16px in weight 400 in Roboto. For substitutes: Nunito Sans is open-source (Google Fonts) and can be used directly. Roboto is also open-source. If you need to consolidate to a single family, DM Sans at similar weights covers both the rounded-heading and neutral-body roles."
    - id: "button-geometry"
      title: "What corner-radius style does Wayfair use for buttons?"
      answer: "Wayfair uses a fully-rounded pill geometry for all primary CTA buttons — the button radius is 9999px, rendering each button as a capsule shape. At the standard 40px button height the pill reads as distinctly warm and consumer-oriented, closer to the rounded style of Etsy or Target than to the rectangular 4–8px buttons of IKEA or West Elm. Secondary buttons follow the same pill geometry. This across-the-board pill commitment means there is no rectangular CTA in the system — developers should not introduce a 4px or 8px radius on buttons, as it immediately reads as off-brand. The pill radius is the single most recognizable shape element of Wayfair's UI."
    - id: "product-card-elevation"
      title: "How does Wayfair handle product-card elevation?"
      answer: "Wayfair uses a soft multi-layer shadow on product card hover states, rather than the hairline-border-only approach of brands like PUMA or Zara. At rest, cards use a 1px light-gray border. On hover, the border lifts into a shadow at approximately rgba(0,0,0,0.12) — a low-opacity black that adds depth without color tint. Cards themselves use a 4px corner radius, matching the input-field radius for consistency across interactive surfaces. The combination of resting hairline and hover shadow is the standard approach among US furniture e-commerce (Wayfair, Overstock, Target) and contrasts with the border-only flat approach of IKEA."
    - id: "known-limitations"
      title: "Why is this file marked as having limited extraction?"
      answer: "Wayfair's website deployed a bot-detection CAPTCHA challenge during the automated extraction run, returning a blank challenge page rather than the product storefront. The token values in this file are derived from Wayfair's public Cinder design system documentation and visual analysis of publicly available product screenshots rather than from a live CSS extraction. As a result, some token values (particularly spacing and component-level details) may differ from the live site's rendered CSS. The Known Gaps section documents this limitation explicitly. Users building from this spec should visually verify the purple hex, button radius, and typography values against the live site before shipping."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  primary: "#7f187f"
  primary-dark: "#5f1260"
  ink: "#2d2d2d"
  ink-secondary: "#626364"
  ink-muted: "#b1b5b8"
  canvas: "#ffffff"
  surface-1: "#f5f5f5"
  surface-2: "#fafbfc"
  hairline: "#e0e0e0"
  hairline-dark: "#bdbdbd"
  success: "#2e7d32"
  danger: "#c62828"
  shadow: "#000000"
  overlay: "#000000"

typography:
  display-xl:
    fontFamily: "\"Nunito Sans\", system-ui, -apple-system, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 48px
    letterSpacing: 0
  display-lg:
    fontFamily: "\"Nunito Sans\", system-ui, -apple-system, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: 0
  heading-md:
    fontFamily: "\"Nunito Sans\", system-ui, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 32px
    letterSpacing: 0
  heading-sm:
    fontFamily: "\"Nunito Sans\", system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 28px
    letterSpacing: 0
  body-lg:
    fontFamily: "Roboto, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-md:
    fontFamily: "Roboto, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  body-sm:
    fontFamily: "Roboto, -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0
  label-md:
    fontFamily: "Roboto, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0
  caption:
    fontFamily: "Roboto, -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0
  button-md:
    fontFamily: "Roboto, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0
  nav-link:
    fontFamily: "Roboto, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  price-lg:
    fontFamily: "Roboto, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "4px"
  sm: "8px"
  md: "16px"
  full: "9999px"

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "8px 24px"
    height: "40px"
    border: "0"
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "8px 24px"
    height: "40px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "8px 24px"
    height: "40px"
    borderColor: "{colors.primary}"
  top-nav:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 24px"
    height: "64px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    padding: "8px 12px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    padding: "0"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xs}"
    padding: "16px"
    borderColor: "{colors.hairline}"
  price-display:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.price-lg}"
    padding: "0"
  category-chip:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "8px 16px"
    height: "36px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.xs}"
    padding: "8px 16px"
    height: "48px"
    borderColor: "{colors.hairline-dark}"
  search-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.full}"
    padding: "12px 24px"
    height: "48px"
    borderColor: "{colors.hairline-dark}"
  footer:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-sm}"
    padding: "48px 24px"
    borderColor: "{colors.hairline}"
  product-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "0"
---

## Overview

Wayfair's homepage commits to a structural choice that almost no other US furniture retailer makes. **Voltage as infrastructure.** The brand's saturated purple fills the entire top-navigation bar rather than appearing as a reserved CTA accent — the result is a persistent chromatic brand signal at the top of every page scroll. IKEA places its nav on matte black. Pottery Barn uses white. West Elm uses charcoal. Wayfair makes the nav a purple surface, and every primary button on the page continues the same hue. The system has a single chromatic voltage and it is not held in reserve — it is infrastructure.

The button geometry reinforces the commercial-warm register. Primary CTAs use a fully-rounded pill shape at 40px height — not the 4px or 8px rounding that furniture brands with editorial aspirations (Restoration Hardware, Article) use. The pill reads as consumer-first and transactional-positive: "tap here to shop," not "here is a considered design statement." Etsy uses the same pill geometry for similar reasons. The shape is about minimizing decision friction in a browse-and-buy flow, not about communicating brand restraint.

Two typefaces divide the page along functional lines. **Nunito Sans** handles every surface that announces or organizes — headings, section titles, category names. **Roboto** handles every surface that informs or navigates — body copy, nav links, price labels, filter text. The split maps exactly to editorial versus functional duties, using Nunito Sans's rounded geometric warmth where the brand speaks and Roboto's neutral legibility where the user navigates.

**Key Characteristics:**
- Purple (#7f187f) fills the top-nav bar and all primary CTA buttons — not a held-in-reserve accent but a structural surface element running across the full width of every page.
- Nunito Sans at weight 700 for all headings and section titles; Roboto at weight 400 for all body, nav, and metadata.
- Full-pill button geometry (9999px radius) at 40px height — across-the-board, no rectangular CTAs in the system.
- 4px card rounding with shadow-lift hover state — warmer than IKEA's flat square cards, sharper than the 12–16px that some consumer-first brands use.
- White canvas (#ffffff) below the nav with a very light gray (#f5f5f5) for category-panel backgrounds and page-section alternation.
- Single chromatic voltage — purple is the only non-neutral hue in the chrome; all other color on the page originates from product photography.

**Note:** The live site extraction was blocked by a CAPTCHA challenge at capture time. Token values are derived from Wayfair's public Cinder design system documentation and visual analysis. Some values may differ from the current live render — verify the purple hex and component spacing before shipping.

## Colors

### Brand

- **Primary** (`{colors.primary}` — #7f187f): the Wayfair brand purple. Fills the top-nav surface, all primary CTA button backgrounds, and all interactive link text. The single chromatic voltage in the system — used as a structural fill, not a reserved accent.
- **Primary Dark** (`{colors.primary-dark}` — #5f1260): the hover/press variant — one step deeper on the same purple hue. Used for hover states on the nav elements and the CTA button press state.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): pure white — the page floor for all product-grid sections, card interiors, and the search-bar fill.
- **Surface-1** (`{colors.surface-1}` — #f5f5f5): the off-white page section background, used to alternate catalog bands and panel backgrounds without a sharp contrast edge.
- **Surface-2** (`{colors.surface-2}` — #fafbfc): the near-white footer and secondary-surface background. Slightly cooler than surface-1.

### Text

- **Ink** (`{colors.ink}` — #2d2d2d): the primary text color — headings, product names, price labels, and body copy. A warm very dark gray rather than pure black; softens the contrast on white-canvas sections.
- **Ink Secondary** (`{colors.ink-secondary}` — #626364): secondary body copy, filter labels, and nav sub-links. The mid-gray that carries informational text below the primary hierarchy.
- **Ink Muted** (`{colors.ink-muted}` — #b1b5b8): the tertiary text tier — availability notices, legal footnotes, rating counts beneath product cards.

### Hairlines

- **Hairline** (`{colors.hairline}` — #e0e0e0): the primary card border and section divider. The light gray that defines product-card edges at rest.
- **Hairline Dark** (`{colors.hairline-dark}` — #bdbdbd): the stronger border variant, used on form inputs and search bars where the outline needs to read against both white and off-white backgrounds.

### Semantic

- **Success** (`{colors.success}` — #2e7d32): availability-in-stock indicators and confirmation state color.
- **Danger** (`{colors.danger}` — #c62828): out-of-stock flags, form validation errors, and warning badges.

### Shadow

- **Shadow** (`{colors.shadow}` — #000000): the shadow ink at low opacity — used for the product-card hover elevation and for modal overlay scrims.
- **Overlay** (`{colors.overlay}` — #000000): modal scrim at approximately 50% opacity — the full-page overlay behind quick-view product modals.

## Typography

### Font Families

The system runs two voices: **Nunito Sans** for all editorial authority surfaces (display headings, section titles, promotional callouts) and **Roboto** for all navigational and informational surfaces (body copy, nav links, price metadata, filter chips). Nunito Sans is a rounded geometric humanist sans — slightly less extreme in its rounding than the original Nunito, but warmer than Roboto's neutral geometry. Both are open-source typefaces available on Google Fonts.

### Hierarchy

| Token | Family | Size | Weight | Line Height | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | Nunito Sans | 40px | 700 | 48px | Hero headings, major promotional banners |
| `{typography.display-lg}` | Nunito Sans | 32px | 700 | 40px | Section-level headings |
| `{typography.heading-md}` | Nunito Sans | 24px | 700 | 32px | Sub-section titles, category headers |
| `{typography.heading-sm}` | Nunito Sans | 20px | 700 | 28px | Product-category intro headings |
| `{typography.body-lg}` | Roboto | 16px | 400 | 24px | Lead paragraph body copy |
| `{typography.body-md}` | Roboto | 14px | 400 | 20px | Default product-grid body text |
| `{typography.body-sm}` | Roboto | 12px | 400 | 16px | Product card metadata, caption text |
| `{typography.label-md}` | Roboto | 14px | 500 | 20px | Filter chip labels, badge text |
| `{typography.caption}` | Roboto | 12px | 400 | 16px | Legal footnotes, availability notices |
| `{typography.button-md}` | Roboto | 16px | 700 | 24px | Primary and secondary CTA button labels |
| `{typography.nav-link}` | Roboto | 14px | 400 | 20px | Top-nav and sub-nav link labels |
| `{typography.price-lg}` | Roboto | 18px | 700 | 24px | Product price display, savings callouts |

### Principles

Nunito Sans tops out at 40px / 700 for hero promotions. Below 20px, all text in the system uses Roboto — there is no small-size Nunito Sans in the captured surfaces. The functional boundary at 20px aligns with the heading/body divide: everything that functions as a heading or title uses Nunito Sans, everything that functions as body uses Roboto. The weight split (700 for headings, 400 for body) holds strictly across both families.

### Note on Font Substitutes

Both Nunito Sans and Roboto are open-source (Google Fonts) and can be used directly without licensing. If consolidating to a single family: DM Sans at 400 (body) and 700 (headings) is the closest single-family equivalent, as it has similar rounded geometry to Nunito Sans and comparable neutral body texture to Roboto. Poppins is another option for the heading tier but its fixed-width geometric forms read narrower than Nunito Sans at display sizes.

## Layout

### Spacing System

- **Base unit:** 4px — the fundamental grid unit.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px.
- **Card internal padding:** 16px — the `{spacing.md}` token applied to all product-card interiors.
- **Section vertical rhythm:** ~48px between major content bands on the homepage.
- **Nav padding:** 0×24px horizontal, creating a spacious nav with flush-top content.

### Grid & Container

- **Max content width:** ~1440px at desktop. Product grids run at 4–5 columns for the main product listing, collapsing to 2-column at tablet.
- **Hero zone:** full-bleed promotional banner, text-and-CTA stack at left-center.
- **Product card grid:** uniform 4px-radius cards with hairline borders at rest and shadow-lift on hover.
- **Category rail:** a horizontal scroll of category chips above the product grid.

### Rhythm

The homepage alternates between **promotional hero** (large image, Nunito Sans heading, purple CTA), **product-category rail** (horizontal-scroll chips), and **product-card grid** (4-column, shadow-hover). Section backgrounds alternate between white canvas and light gray, creating a quiet visual pulse without color.

## Elevation

Wayfair uses a **resting-border plus hover-shadow** model for product cards:

- **Resting state:** 1px `{colors.hairline}` border — no shadow. Cards sit flat on the white canvas at rest.
- **Hover state:** the hairline lifts into a soft multi-layer shadow at low opacity over `{colors.shadow}` (#000000). The shadow is neutral — no color tint — adding depth without competing with the product photography inside the card.
- **Modal elevation:** a full-page scrim at `{colors.overlay}` at approximately 50% opacity, used behind quick-view product modals.

## Shapes

The radius scale runs **two functional registers**:

- `{rounded.none}` 0px — full-bleed hero panels and the top-nav itself.
- `{rounded.xs}` 4px — product cards and form inputs. The standard content-surface rounding, warmer than IKEA's 0px and sharper than the 8–16px some consumer brands use.
- `{rounded.sm}` 8px — secondary tile surfaces and image overlays.
- `{rounded.md}` 16px — large promotional panel chips and filter-summary tags.
- `{rounded.full}` 9999px — all primary and secondary CTA buttons, the search bar, and category filter chips. The pill is the system's warmest shape, appearing on every interactive surface the user is expected to tap.

The pill is not reserved for special moments — it is the system-wide button standard. There are no rectangular buttons in Wayfair's UI.

## Components

**`button-primary`** — Purple `{colors.primary}` fill, white text at `{typography.button-md}` (Roboto / 16px / 700), fully-rounded `{rounded.full}` pill, 8×24px padding, 40px height. "Shop Now," "Add to Cart," and all primary catalog CTAs.

**`button-primary-hover`** — Deepens to `{colors.primary-dark}` — a darker purple on press, staying within the brand-voltage hue without adding a second color.

**`button-secondary`** — White fill, purple text and border, same pill geometry. Used for secondary browse actions and promotional "View All" links.

**`top-nav`** — Purple `{colors.primary}` surface, white text and icons, 64px height, 0×24px padding. The persistent brand-voltage surface — the Wayfair logo, main navigation links (Furniture, Décor, Bed & Bath, Lighting, etc.), search bar, and account/cart icons all sit on the purple field.

**`nav-link`** — Transparent background, white text at `{typography.nav-link}` (Roboto / 14px / 400) on the purple nav surface. Hover state adds a slight white-alpha underline rather than a background fill.

**`hero-heading`** — Ink text on the white-canvas below-nav hero section, `{typography.display-xl}` (Nunito Sans / 40px / 700). The promotional headline above the product grid.

**`section-heading`** — Ink text at `{typography.heading-md}` (Nunito Sans / 24px / 700). Used for "Shop by Category," "Today's Deals," and department-section headers.

**`body-paragraph`** — Ink text at `{typography.body-md}` (Roboto / 14px / 400). Default product description and promotional copy text.

**`card`** — White canvas fill, 1px hairline border, `{rounded.xs}` 4px radius, 16px padding, shadow on hover. The standard product card — contains an image panel, product label, price, and add-to-cart button.

**`price-display`** — Ink text at `{typography.price-lg}` (Roboto / 18px / 700) for the price amount; secondary text at `{typography.body-sm}` for "was" and savings callouts.

**`category-chip`** — Light-gray `{colors.surface-1}` fill, ink text at `{typography.label-md}` (Roboto / 14px / 500), full-pill `{rounded.full}` rounding, 8×16px padding, 36px height. Used in the category-filter rail above the product grid.

**`text-input`** — White fill, ink text, 1px `{colors.hairline-dark}` border, `{rounded.xs}` 4px radius, 8×16px padding, 48px height.

**`search-bar`** — White fill, ink-secondary placeholder text, 1px `{colors.hairline-dark}` border, full-pill `{rounded.full}` rounding, 12×24px padding, 48px height. The search bar inside the purple top-nav uses a white-pill shape — the single white element on the purple surface.

**`footer`** — Near-white `{colors.surface-2}` background, ink-secondary text at `{typography.body-sm}`, 1px `{colors.hairline}` top border, 48×24px padding.

**`product-label`** — Transparent, ink text at `{typography.body-md}`. Product name displayed below the card image.

## Do's and Don'ts

**Do** use `{colors.primary}` (#7f187f) as the top-nav background fill and all primary button fills — not just as a text-link accent. This system commits the brand voltage to structural surface duty; holding it in reserve and using a dark gray nav instead would neutralize the single chromatic identity move that differentiates Wayfair in the furniture-retail category.

**Do** apply the full-pill `{rounded.full}` geometry to every CTA button and the search bar. A developer from a different system would instinctively add 4–8px rounding to buttons. At 4px Wayfair's buttons read as a generic form input, not a brand-coded CTA. The pill is the interactive signature.

**Do** use Nunito Sans for headings (≥20px) and Roboto for everything else. Mixing Nunito Sans into body copy or price labels dissolves the functional boundary the system relies on for visual parsing. The two-family split is a navigation affordance, not a decorative choice.

**Do** keep product cards at `{rounded.xs}` 4px with a shadow-lift hover state rather than a resting shadow. The resting-border / hover-shadow combination is the category-standard approach for browse-heavy product grids — it reduces visual noise at rest while confirming interactivity on hover.

**Don't** add a second accent color to the chrome. A developer might reach for a teal or coral accent to differentiate promotional banners. The system has exactly one chromatic voltage (purple); any added accent competes with it and the product photography, creating three simultaneous color conversations on a single page scroll.

**Don't** use `{colors.ink-muted}` (#b1b5b8) for body text — it is a tertiary-only token for availability footnotes and rating counts. WCAG AA requires at minimum 4.5:1 contrast for body text on white; ink-muted at this value falls below that threshold at 14px. Use `{colors.ink}` or `{colors.ink-secondary}` for any body copy that requires readability.

**Don't** round product cards beyond `{rounded.xs}` 4px. The two-register shape system is 4px for cards and full-pill for buttons; introducing 8–16px on cards blurs the distinction between content surfaces and interactive affordances.

**Don't** use the purple on text-only secondary body copy — link affordances at the `{colors.primary}` hue on white pass AA contrast for larger sizes but not for 12px body. Reserve purple text for explicit interactive links (≥16px) and use `{colors.ink}` for all other copy.

## Known Gaps

- **Bot-block extraction limitation:** Wayfair's live site deployed a CAPTCHA at capture time. Token values in this file are derived from Wayfair's public Cinder design system documentation and visual analysis rather than from a live CSS extraction. Hex values for the primary purple, card radius, and spacing are derived from public documentation and should be verified against the live render before shipping.
- **Exact purple hex confirmation:** the canonical purple may be declared as a CSS custom property not directly visible in the public Cinder docs — verify by inspecting the top-nav background-color on the live site.
- **Checkout flow:** the cart, address, and payment surfaces live behind authentication and are not represented. Button states (disabled, loading), input validation error colors, and progress-indicator tokens are absent.
- **Dark mode:** no dark-mode surface is exposed in Wayfair's current public marketing layer.
- **Mobile breakpoints:** desktop-first capture. The collapsed nav, hamburger menu, 2-column product grid, and mobile search bar carry different padding and radius behavior at 375px.
- **Animation:** page transitions, product-image carousel timing, and add-to-cart micro-interactions are not documented. Wayfair's Cinder system documents easing curves but these are not represented here.
- **Sub-brand surfaces:** AllModern, Birch Lane, Joss & Main, and Perigold (Wayfair's portfolio brands) each run distinct color palettes that are not included in this token set.