---
version: alpha
name: "West Elm"
website: "https://www.westelm.com"
description: >-
  A mid-century-modern furniture retailer whose marketing site reads more like a Kinfolk spread than a category-page e-commerce funnel — a Sanomat serif display ("Up to 60% Off") at 48px in weight 300 sits over warm-cream walls and walnut-toned room photography, while GT Eesti Text carries every body row, nav link, and uppercase chip in weight 300 with 1.2-1.6px tracking. The system runs on near-black ink #212121 instead of pure black, zero corner-radius across buttons and inputs, and a single black-pill primary CTA. Editorial photography does every chromatic job; the chrome itself is monochrome and quiet enough to read like a print magazine rather than a Williams-Sonoma-Inc. checkout funnel.

seo:
  title: "West Elm Design System for React — Sanomat serif, GT Eesti Text, 18 components"
  metaDescription: "West Elm's marketing-site design system as a DESIGN.md file. Sanomat serif headlines at weight 300, GT Eesti Text body, zero-radius buttons, monochrome chrome over warm furniture photography. For React, Next.js, and AI tools."
  highlights:
    - "Serif display over sans body — Sanomat at 48px / weight 300 carries every hero headline; GT Eesti Text in weight 300/375 handles body, nav, and uppercase chips"
    - "Zero-radius chrome — every button, input, and modal corner sits at 0px; the only round element on the page is the search-magnifier icon"
    - "Near-black, not black — primary ink is graphite #212121 (frequency 948); pure #000000 appears only inside the email-capture modal body text"
    - "Editorial photography as palette — room-shot warm-walnut, cream, and oat tones do every chromatic job; the brand chrome itself ships zero accent colors"
    - "Uppercase nav labels in weight 375 — GT Eesti Text at 12-16px with 0.96-1.6px tracking renders category links as small-caps, never bold sans"
  tags:
    - "E-commerce & Retail"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    West Elm's marketing surface inverts the convention for category-leading home-furnishing retail. Where Wayfair and Article paint their landing pages with chromatic chips, sale badges, and saturated category tiles, West Elm runs an editorial layout that looks closer to a printed Kinfolk spread than to a Williams-Sonoma-owned commerce funnel. The hero is a serif headline in Sanomat at 48px in weight 300 set over a wide photograph of a styled living room — walnut credenza, cream upholstery, a single ceramic vase — and a small near-black pill CTA beneath. Every other chromatic moment on the page comes from the room photography itself: warm cream walls, oak floors, oat textiles, a single hit of olive on a planter. The brand chrome ships no accent colors at all.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 15 color tokens drawn from graphite ink, warm-canvas neutrals, and an emergency-red error token that never appears in the hero band; 12 typography tokens across two families — Sanomat (a Schick Toikka serif licensed for editorial display) running 20-48px in weight 300 only, and GT Eesti Text carrying body at 12-18px in weight 300 plus all uppercase nav labels and chips in weight 375 with 0.96-1.6px tracking; 4 radius tokens that almost all resolve to 0px; 8 spacing values on a 4px base; and 18 component definitions covering the black-pill primary button, the zero-radius email input, the hero serif heading, the uppercase nav rail, and the editorial-photography card grid.

    Feed this file to Claude or Cursor and it will reproduce West Elm's specific moves: serif display in weight 300 instead of bold sans, zero-radius chrome instead of soft rounding, graphite ink instead of pure black, and uppercase tracked sans labels carrying every nav and chip. The token references resolve without invention. One move worth borrowing only if your category permits editorial photography over product grids: the willingness to let room-shot warmth do every chromatic job, leaving the brand chrome as pure typographic restraint.
  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.westelm.com"
      title: "West Elm — official site"
      description: "West Elm's public marketing site — 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 West Elm's primary brand color?"
      answer: "West Elm's marketing surface is functionally monochrome — there is no chromatic brand voltage in the conventional sense. The dominant token is graphite ink #212121, captured 948 times across text (470), border (469), and gradient (6); pure black #000000 appears only 131 times and is reserved for the email-capture modal body. Pure white #ffffff carries the page floor at 63 occurrences. A burgundy #961529 and a cream-yellow #efc261 each appear exactly once as photography-driven background fills, not as accents. The brand trusts editorial photography to carry every chromatic moment on the page."
    - id: "typography"
      title: "What typefaces does West Elm use, and what should I use as a substitute?"
      answer: "The system runs two families: Sanomat (Schick Toikka's transitional editorial serif, licensed for display) at 20, 28, 36, and 48px in weight 300 with 0.4-0.96px positive tracking, used for every hero headline and section title; and GT Eesti Text (Grilli Type's grotesk) at 10-18px in weight 300 for body and 375 for uppercase chips and small-caps category labels, with tracking ranging from 0.28px on lowercase body to 1.6px on uppercase chips. The closest open-source substitute for Sanomat is GT Sectra or Source Serif 4 at the same sizes and weight; for GT Eesti Text, Inter or Söhne at weights 300 and 400 transfer cleanly."
    - id: "radius-zero"
      title: "Why does West Elm use zero corner radius everywhere?"
      answer: "Across the entire captured marketing page the only non-zero border-radius token is 50%, used twice for the search-magnifier and account-avatar icons. Every button, input, modal frame, card edge, and chip sits at 0px. The decision is editorial: rounded corners read as friendly and SaaS-soft; sharp corners read as architectural and printed. West Elm trades the tactile warmth of rounded chrome for the print-magazine restraint of right angles, and lets the room-photography warmth carry the brand's emotional register instead."
    - id: "ink-color"
      title: "Why is West Elm's primary text graphite #212121 instead of pure #000000?"
      answer: "Pure black #000000 reads as digital and chromatic against the cream-and-walnut tone of West Elm's photography. The site instead uses graphite #212121 — slightly warmer, less saturated — which reads correctly against the cream backgrounds the photographs introduce. The graphite token appears 948 times across text and border roles; pure black is reserved for the cold context of modal body copy inside the email-capture overlay. The 13-point lightness difference is small but consistent and is the system's primary warmth move at the chrome layer."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own editorial furniture site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce West Elm's specific moves: serif display in weight 300, zero-radius chrome, graphite ink instead of pure black, uppercase tracked sans labels, and editorial photography carrying every chromatic moment. The tokens resolve cleanly without invention. Every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The single move worth borrowing only if your photography budget supports it: a marketing chrome with zero accent colors trusts the imagery to do all the work, which falls apart on stock photos."

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

colors:
  ink: "#212121"
  ink-muted: "#646464"
  ink-deep: "#000000"
  ink-soft: "#363636"
  ink-dim: "#2e2e2e"
  canvas: "#ffffff"
  surface-1: "#f4f4f4"
  surface-warm: "#e7e5e1"
  hairline: "#c8c8c8"
  border-strong: "#212121"
  burgundy: "#961529"
  cream-yellow: "#efc261"
  error: "#af1a31"
  error-bright: "#e81818"
  teal: "#467e8b"

typography:
  display-xl:
    fontFamily: "Sanomat, Georgia, Times, serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 60px
    letterSpacing: "0.96px"
  display-lg:
    fontFamily: "Sanomat, Georgia, Times, serif"
    fontSize: 36px
    fontWeight: 300
    lineHeight: 45px
    letterSpacing: "0.72px"
  display-md:
    fontFamily: "Sanomat, Georgia, Times, serif"
    fontSize: 28px
    fontWeight: 300
    lineHeight: 35px
    letterSpacing: "0.56px"
  display-sm:
    fontFamily: "Sanomat, Georgia, Times, serif"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 26px
    letterSpacing: "0.4px"
  body-lg:
    fontFamily: "\"GT Eesti Text\", Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 23.4px
    letterSpacing: "0.54px"
  body-md:
    fontFamily: "\"GT Eesti Text\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 18.2px
    letterSpacing: "0.42px"
  body-sm:
    fontFamily: "\"GT Eesti Text\", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 15.6px
    letterSpacing: "0.36px"
  label-caps-lg:
    fontFamily: "\"GT Eesti Text\", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 375
    lineHeight: 20.8px
    letterSpacing: "1.6px"
  label-caps-md:
    fontFamily: "\"GT Eesti Text\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 375
    lineHeight: 18.2px
    letterSpacing: "1.4px"
  label-caps-sm:
    fontFamily: "\"GT Eesti Text\", Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 375
    lineHeight: 13px
    letterSpacing: "1px"
  button-md:
    fontFamily: "\"GT Eesti Text\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 18.2px
    letterSpacing: "1.4px"
  nav-link:
    fontFamily: "\"GT Eesti Text\", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 40px
    letterSpacing: "0.96px"

rounded:
  none: "0px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "40px"
  2xl: "84px"
  3xl: "128px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "8px 16px"
    height: "42px"
    borderColor: "{colors.ink}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "8px 16px"
    height: "42px"
    borderColor: "{colors.ink}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 24px"
    height: "40px"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    padding: "0px 12px"
  hero-heading:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px 0px 4px"
  section-heading:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
  editorial-display:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
  body-paragraph:
    backgroundColor: transparent
    textColor: "{colors.ink-deep}"
    typography: "{typography.body-sm}"
  body-paragraph-lg:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
  category-chip:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.label-caps-md}"
    rounded: "{rounded.none}"
    padding: "0px 24px"
  card-photo:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-caps-md}"
    rounded: "{rounded.none}"
    padding: "0"
  card-room-feature:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "40px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0px 16px"
    height: "56px"
    borderColor: "{colors.ink}"
  modal-overlay:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "40px"
  modal-heading:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
  icon-circle:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    rounded: "{rounded.full}"
    padding: "0"
    height: "24px"
  error-text:
    backgroundColor: transparent
    textColor: "{colors.error}"
    typography: "{typography.body-sm}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "84px 24px"
---

## Overview

West Elm's marketing surface reads more like a printed Kinfolk spread than a Williams-Sonoma-Inc. category page. **Editorial restraint.** Where Wayfair paints its landing band with chromatic sale chips and Article carries a saturated category-tile rail, West Elm runs a serif headline at 48px in weight 300 over a wide photograph of a styled walnut-and-cream living room, with a single near-black pill CTA beneath. The first chromatic moment a visitor encounters comes from the photograph itself — warm oat textiles, an olive planter, a brass floor lamp — never from brand chrome. The system ships zero accent colors at the chrome layer.

The typographic pairing is the system's distinguishing move. Sanomat (Schick Toikka's transitional editorial serif, captured at 20, 28, 36, and 48px exclusively in weight 300) carries every display tier; GT Eesti Text (Grilli Type's grotesk) handles body, nav, and chips, with the uppercase rail at weight 375 and 0.96-1.6px tracking. Display in weight 300 plus body in weight 300 is unusual — most home retail leans on bold display to drive sale messaging, and most editorial sites at least nudge body to weight 400. West Elm holds both tiers at the lightest available weight and lets size and family carry hierarchy instead. The result is a chrome layer quiet enough that the room photography reads as the protagonist.

Hairline against zero-radius is the shape signature. Every button, every input, every modal frame, every card edge sits at `{rounded.none}` — 0px. The only round element captured on the page is the search-magnifier icon. Buttons take a 1px `{colors.ink}` border instead of a fill; inputs take a 1px `{colors.hairline}` outline. Depth comes from photography composition, not from elevation or rounded affordances.

**Key Characteristics:**
- Near-black graphite ink (`{colors.ink}` — #212121, frequency 948), never pure `{colors.ink-deep}` (#000000) — the warmth difference reads correctly against cream photography backgrounds.
- Serif display in a single weight: Sanomat at 20-48px exclusively in weight 300. There is no bold serif tier anywhere on the page.
- Sans body and uppercase chips both in GT Eesti Text — body at weight 300, uppercase labels at weight 375 (a custom weight name, halfway between regular and medium) with 0.96-1.6px tracking.
- Zero corner-radius across every button, input, card, modal, and chip. The only non-zero radius (50%) lives on two icons.
- Email-capture modal renders at full width over a hero scrim — black-pill CTA, zero-radius input, "JOIN" in uppercase tracked at 1.4px.
- Editorial photography carries every chromatic moment: walnut, cream, oat, olive, brass — all introduced through room shots, not through brand tokens.
- Burgundy `{colors.burgundy}` (#961529) and cream-yellow `{colors.cream-yellow}` (#efc261) each appear exactly once on the page as photography overlays; both are accidents of imagery rather than tokens to use in chrome.
- Footer category labels stack in uppercase at `{typography.label-caps-sm}` (10px / 375 / 1px tracking) — the small-caps rail is the system's only voice for navigation hierarchy.

## Colors

### Ink

- **Graphite Ink** (`{colors.ink}` — #212121): frequency 948. Used as text (470), border (469), background (3), gradient (6). The dominant token across every text tier and border — the warm near-black that runs the system. Reads correctly against the cream photography backgrounds where pure black would feel cold.
- **Ink Muted** (`{colors.ink-muted}` — #646464): frequency 222. Used as text (111), border (111). The secondary text tone — nav-link inactive labels, footer category sub-rows, photo-card meta strips. Wired in CSS as `--quiq-control-secondary-hover`.
- **Ink Deep** (`{colors.ink-deep}` — #000000): frequency 131. Used as text (65), border (64), background (1), shadow (1). Pure black is scoped almost entirely to the email-capture modal body and the chat-widget surfaces — the digital contexts where graphite warmth would feel out of place.
- **Ink Soft** (`{colors.ink-soft}` — #363636): frequency 4. The form-input value color — slightly warmer than graphite, used inside text fields to differentiate typed text from placeholder.
- **Ink Dim** (`{colors.ink-dim}` — #2e2e2e): frequency 1. A single dark-surface fill that appears in a promotional banner block.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 63. Used as text (27 — inside the modal CTA), background (11), border (25). The page floor below the hero photography bands. Wired in CSS as `--quiq-bg-base`, `--quiq-bg-elevated`, `--quiq-bg-input-normal`, and `--quiq-text-on-dark-primary`.
- **Surface-1** (`{colors.surface-1}` — #f4f4f4): frequency 3 — all as background. The single elevated neutral, used inside chat-widget tooltips and "nested" containers. Wired as `--quiq-bg-nested` and `--quiq-bg-sunken`.
- **Surface Warm** (`{colors.surface-warm}` — #e7e5e1): frequency 1 — the warm-oat band fill behind the "Lighter Living" feature row. The only surface color in the system that ships with warmth at the chrome layer rather than the photography layer.

### Hairline

- **Hairline** (`{colors.hairline}` — #c8c8c8): frequency 3 — input outlines and divider rules. Wired as `--quiq-border-input-normal`. The default neutral border tone.
- **Border Strong** (`{colors.border-strong}` — same hex as `{colors.ink}`): frequency 469 — borders use the graphite ink token wherever a strong outline is required, including the primary button outline, the email-input outline, and modal frames. The system rarely distinguishes between ink and border tones; one warm graphite carries both jobs.

### Accent (photography-driven)

- **Burgundy** (`{colors.burgundy}` — #961529): frequency 1, background only. Appears once as a photo background panel — not a brand token but an artifact of the captured imagery. Layer classified as `brand` by the extractor.
- **Cream Yellow** (`{colors.cream-yellow}` — #efc261): frequency 1, background only. Same status — a single photo-panel fill, not a chrome token.

### Semantic

- **Error** (`{colors.error}` — #af1a31): frequency 2. Used inside form validation labels. Wired as `--quiq-text-error` and `--quiq-text-availability-unavailable`.
- **Error Bright** (`{colors.error-bright}` — #e81818): frequency 2. A second validation tone reserved for required-field markers.
- **Teal** (`{colors.teal}` — #467e8b): frequency 2. The "Live chat" link in the customer-service rail.

## Typography

### Font Families

The system runs **two families**. **Sanomat** — Schick Toikka's transitional editorial serif, licensed by West Elm for display — carries every headline tier (20, 28, 36, 48px) exclusively in weight 300. Fallbacks walk `Georgia, Times, serif`. **GT Eesti Text** — Grilli Type's grotesk — handles every other surface: body in weight 300, uppercase chips and small-caps labels in weight 375 (a custom weight halfway between regular and medium). Fallbacks walk `Helvetica, Arial, sans-serif`. The pairing is editorial-magazine convention: serif for display, sans for everything else.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 48px | 300 | 60px | 0.96px | Hero h1 ("Up to 60% Off"), promotional sale display |
| `{typography.display-lg}` | 36px | 300 | 45px | 0.72px | Section h2 — "Lighter Living", "The Men's Collection" |
| `{typography.display-md}` | 28px | 300 | 35px | 0.56px | Editorial display, modal heading ("Find out first") |
| `{typography.display-sm}` | 20px | 300 | 26px | 0.4px | Sub-heading and card-feature display |
| `{typography.body-lg}` | 18px | 300 | 23.4px | 0.54px | Lead paragraph, hero sub-copy |
| `{typography.body-md}` | 14px | 300 | 18.2px | 0.42px | Default running text, nav links, body paragraphs |
| `{typography.body-sm}` | 12px | 300 | 15.6px | 0.36px | Caption text, modal body copy, footer body |
| `{typography.label-caps-lg}` | 16px | 375 | 20.8px | 1.6px | Section uppercase label ("New & Featured") |
| `{typography.label-caps-md}` | 14px | 375 | 18.2px | 1.4px | Category chips, primary button labels |
| `{typography.label-caps-sm}` | 10px | 375 | 13px | 1px | Footer column labels, footer category headers |
| `{typography.button-md}` | 14px | 300 | 18.2px | 1.4px | Black-pill CTA labels ("SIGN UP NOW") |
| `{typography.nav-link}` | 12px | 300 | 40px | 0.96px | Top-nav category links — the 40px line-height is deliberate and creates the wide nav band |

### Principles

Display weight stays at 300, never bold. The 48px hero serif at weight 300 is the loudest typographic moment in the system, and it is the editorial-magazine treatment — confidence by leading and tracking, not by weight. GT Eesti Text body sits at weight 300 across every size, matching the serif tier; the only departure is weight 375 for uppercase chips and labels, which gives the small-caps rail a slightly heavier feel without crossing into bold. The 375 weight is unusual — it is GT Eesti Text's specific intermediate cut between Regular and Medium and signals deliberate license selection rather than a generic substitution.

Tracking does the labor of hierarchy. Body at 0.28-0.54px positive tracking reads open and airy; uppercase chips at 0.96-1.6px push the small-caps treatment into editorial-display territory. Display tracking sits between 0.4px and 0.96px positive — never negative — which is the inverse of contemporary grotesk display (where tight negative tracking signals confidence). Sanomat's transitional structure already provides density; West Elm opens the tracking to compensate.

### Note on Font Substitutes

Sanomat is a licensed Schick Toikka serif. The closest open-source substitute is **GT Sectra** at the same sizes (also Grilli Type, also editorial transitional) or **Source Serif 4** in weight 300 — both transfer cleanly with similar cap height and stroke contrast. For GT Eesti Text, **Inter** at weight 300 plus weight 400 (substituting for 375) handles every body and chip role; **Söhne** is closer in feel but not free.

## Layout

### Spacing System

- **Base unit:** 4px — with 8px and 16px as the dominant modules.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 40px · `{spacing.2xl}` 84px · `{spacing.3xl}` 128px.
- **Section padding (vertical):** ~84px between major photography bands; the hero photograph extends to the viewport edge with no top padding.
- **Card internal padding:** `{spacing.xl}` (40px) on feature rows; photo cards run with 0 internal padding so the imagery fills the tile edge-to-edge.
- **Hero padding:** 0 horizontal — the photograph bleeds full-width with the headline placed on a horizontally-padded inner column.

### Grid & Container

- **Max content width:** ~1280px on body sections; hero photography extends to the viewport edge.
- **Above-the-fold:** wide editorial photograph spanning the viewport, with a centered email-capture modal overlay (~480px wide, 0-radius, white fill, black-pill submit).
- **Category strip:** uppercase chip rail at `{typography.label-caps-lg}` ("Lounge, Dine", etc.) — flush rail with 24px horizontal padding between chips.
- **Below the fold:** 3-up photo-card grid for featured collections, alternating with wide 16:9 editorial bands ("Lighter Living", "The Men's Collection", "emma chamberlain × west elm").

### Rhythm

The page alternates between **wide editorial photograph** and **constrained chip rail or feature grid**. There is no atmospheric gradient between bands — every section terminates on the `{colors.canvas}` white floor, and warmth comes from the photography rather than from background tinting. The footer drops to a quiet uppercase-label stack at 10-12px with significant 84-128px breathing room above.

## Elevation

The system has essentially **no shadow tier**. The captured page records zero shadow occurrences. Depth comes from:

- **Photographic perspective:** the hero, the Lighter Living band, and the Men's Collection band all use room photographs with their own real-world depth — wide-angle interior shots with foreshortened furniture, lamps in soft focus, natural-light falloff.
- **Surface contrast:** `{colors.surface-warm}` (#e7e5e1) cards sit on `{colors.canvas}` (#ffffff) with no border, no shadow — the 8-point lightness gap reads as a tonal lift.
- **Hairline outlines:** `{colors.hairline}` (#c8c8c8) on inputs and dividers; `{colors.border-strong}` (graphite ink) on the primary button and email input outlines.

No modal scrim is captured beyond the email-capture overlay, which renders directly over the hero photograph with no darkening layer between them.

## Shapes

The radius scale is **binary**: 0px or full-circle. There is no rounding tier in between.

- `{rounded.none}` 0px — every button, every input, every modal frame, every card edge, every chip, every photo tile. The system has no soft-rounded surfaces at all.
- `{rounded.full}` 9999px — used only on the search-magnifier icon and the account-avatar circle. Both render at 50% on square base elements.

The decision is editorial-magazine convention. Rounded corners read as friendly and SaaS-soft; sharp corners read as architectural and printed. West Elm trades the tactile warmth of rounded chrome for the print-spread restraint of right angles, and lets the photography do the emotional work instead.

## Components

**`button-primary`** — Graphite-ink `{colors.ink}` fill, white text, `{rounded.none}` 0px radius, 8x16 padding, 42px height, `{typography.button-md}` (14px / 300 / 1.4px tracking) all-uppercase. "SIGN UP NOW" is the canonical instance, sitting inside the email-capture modal.

**`button-secondary`** — White `{colors.canvas}` fill, graphite ink text, 1px `{colors.ink}` border, otherwise identical. Used for "Learn More" / "Shop Now" tertiary CTAs over photography bands.

**`top-nav`** — White surface, graphite-ink links, `{typography.nav-link}` (12px / 300 / 0.96px tracking) with 40px line-height creating a wide nav band. Zero radius, 24px horizontal padding. West Elm wordmark center-aligned, account/cart icons flush right, primary category links flush left.

**`nav-link`** — `{colors.ink-muted}` text in `{typography.nav-link}`. The 40px line-height is the system's hover-area device — links sit centered in a tall band so the click target is generous despite the small 12px label.

**`hero-heading`** — Graphite-ink text on the transparent photography overlay, Sanomat 48px / 300, 0.96px tracking. "Up to 60% Off" is the canonical instance, sitting top-left of the hero photograph.

**`section-heading`** — Sanomat at `{typography.display-lg}` (36px / 300 / 0.72px tracking) — section h2s like "Lighter Living", "The Men's Collection".

**`editorial-display`** — Sanomat at `{typography.display-md}` (28px / 300 / 0.56px tracking). Used inside the email-capture modal heading and over photograph bands as editorial sub-display.

**`body-paragraph`** — `{colors.ink-deep}` (pure black) text at `{typography.body-sm}` (12px / 300). The email-capture modal body. Pure black appears here because the modal carries a digital UI context where graphite warmth would feel inconsistent.

**`body-paragraph-lg`** — `{colors.ink}` (graphite) text at `{typography.body-lg}` (18px / 300). Lead paragraphs and editorial sub-copy.

**`category-chip`** — Transparent fill, graphite text, `{typography.label-caps-md}` (14px / 375 / 1.4px tracking) all-uppercase, 24px horizontal padding, zero border. The "Lounge, Dine" strip above the hero photograph renders as a flush rail of these chips.

**`card-photo`** — White surface, 0 internal padding, 0px radius — the photograph fills the entire tile edge-to-edge. Card labels sit below the tile at `{typography.label-caps-md}`.

**`card-room-feature`** — `{colors.surface-warm}` (#e7e5e1) fill, graphite text, 40px internal padding, 0px radius. The wider editorial bands use this surface treatment as the warm-canvas variant of the photo card.

**`text-input`** — White fill, soft-graphite `{colors.ink-soft}` value text, 1px `{colors.ink}` border, 0px radius, 0x16 padding, 56px height. The email-capture input is the canonical instance — tall, edge-to-edge against the modal frame.

**`modal-overlay`** — White surface, 40px padding, 0px radius. Sits directly over the hero photograph with no darkening scrim — the photograph remains visible at the modal edges. Width sits near 480px on desktop.

**`modal-heading`** — Same as `{component.editorial-display}` — Sanomat 28px / 300 / 0.56px tracking. "Find out first: New arrivals, sales & more in your inbox."

**`icon-circle`** — Transparent fill, graphite icon, `{rounded.full}` 50% radius on 24px square base. The single round element in the system, reserved for the search-magnifier and account-avatar.

**`error-text`** — Error-red `{colors.error}` (#af1a31) text at `{typography.body-sm}`. Used inside form validation labels.

**`footer`** — White canvas, ink-muted text, 84x24 padding. Footer category headers sit at `{typography.label-caps-sm}` (10px / 375 / 1px tracking) — the smallest uppercase tier in the system.

## Do's and Don'ts

**Do** keep display headlines at weight 300 in Sanomat. The 48px hero serif at weight 300 is the editorial-magazine treatment — confidence by leading and positive tracking, not by weight. Bumping to weight 500 or higher turns the dek into a department-store sale headline and undercuts the entire system.

**Do** use `{colors.ink}` (#212121) for every text and border role — not pure `{colors.ink-deep}` (#000000). The graphite warmth is the system's primary chrome-layer warmth move; mixing pure black into the layout (outside the digital-modal context where it is scoped) reads as a system inconsistency.

**Do** carry uppercase nav and chip labels in GT Eesti Text at weight 375 with 0.96-1.6px positive tracking. The weight-375 intermediate cut is a specific Grilli Type license choice; substituting weight 500 (or any bolder weight) changes the texture of the small-caps rail and reads as a different brand.

**Do** trust editorial photography to do all chromatic work. The chrome layer ships zero accent colors deliberately. If a category genuinely needs a chromatic chip, introduce the color through the imagery (a styled photograph of an olive sofa), not through a token.

**Don't** introduce corner-radius to buttons, inputs, or cards. The system is `{rounded.none}` everywhere; even an 8px soft radius reads as a different brand. The only legitimate round elements in the system are the search and account icons at `{rounded.full}`.

**Don't** use `{colors.burgundy}` (#961529) or `{colors.cream-yellow}` (#efc261) as chrome accents. Both colors appear exactly once in the captured page as photography-overlay fills, not as brand tokens. Promoting them to button or chip backgrounds would invent a chromatic system the brand doesn't have.

**Don't** use `{colors.error}` (#af1a31) outside form validation. The error red has a single semantic role — required-field markers and validation labels — and is wired in CSS as `--quiq-text-error`. Using it for a promotional badge would conflate "error" with "sale" and break the semantic palette.

**Don't** layer modal overlays on a darkening scrim. The email-capture modal renders directly over the hero photograph with no background tint — the photograph remains visible at the modal edges. Adding a 0.5 alpha scrim destroys the editorial-photography rhythm the system relies on.

## Known Gaps

- **Hover and focus states:** the captured marketing surface does not expose primary-button hover, input-focus, or link-hover variants. The CSS declares an active-state token (`--quiq-control-primary-active`) but the state matrix is incomplete.
- **Product-detail surfaces:** this DESIGN.md captures the landing page only. The product-detail templates (price strips, swatch grids, color selectors, configurator) carry additional component tokens not represented here.
- **Mobile breakpoints:** the spec captures the 1440-viewport rendering. The chip rail collapses to a horizontally-scrollable strip on mobile and the editorial bands stack to single-column — neither layout is captured.
- **Photography direction:** the warm-walnut, oat, cream palette comes from the imagery, not the tokens. A different photo-direction guideline (e.g. cool minimalism) would produce a different chromatic page despite identical chrome.
- **Form validation surfaces:** the `{colors.error}` and `{colors.error-bright}` reds appear in CSS but no rendered error state was captured in the marketing page. Validation message styling lives inside the email-capture and checkout flows.
- **Sub-brand surfaces:** West Elm Kids, West Elm Workspace, and the "× emma chamberlain" collaboration carry their own photographic direction and may introduce sub-brand chrome not captured at the landing-page chrome layer.