What is West Elm's primary brand color?

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.

What typefaces does West Elm use, and what should I use as a substitute?

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.

Why does West Elm use zero corner radius everywhere?

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.

Why is West Elm's primary text graphite #212121 instead of pure #000000?

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.

Can I use this DESIGN.md to build my own editorial furniture site?

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.

West Elm Design System

West Elm's marketing-site design system as a DESIGN.md file.

About West Elm DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source westelm.com

E-commerce & Retail

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.

What makes it distinct

Serif display over sans bodySanomat at 48px / weight 300 carries every hero headline; GT Eesti Text in weight 300/375 handles body, nav, and uppercase chips
Zero-radius chromeevery button, input, and modal corner sits at 0px; the only round element on the page is the search-magnifier icon
Near-black, not blackprimary ink is graphite #212121 (frequency 948); pure #000000 appears only inside the email-capture modal body text
Editorial photography as paletteroom-shot warm-walnut, cream, and oat tones do every chromatic job; the brand chrome itself ships zero accent colors
Uppercase nav labels in weight 375GT Eesti Text at 12-16px with 0.96-1.6px tracking renders category links as small-caps, never bold sans

Live at westelm.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

westelm.com

Explore West Elm

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

West Elm design system FAQ

Common questions about West Elm's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

West Elm — official site

West Elm's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.