What is Wayfair's primary brand color?

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.

What typefaces does Wayfair use and what should I substitute?

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.

What corner-radius style does Wayfair use for buttons?

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.

How does Wayfair handle product-card elevation?

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.

Why is this file marked as having limited extraction?

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.

Wayfair Design System

Wayfair's home-goods e-commerce design system as a DESIGN.md file.

About Wayfair DESIGN.md

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

E-commerce & Retail
Real Estate & Property

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.

What makes it distinct

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 geometryprimary CTAs use a fully-rounded pill at 40px height, the warmest button shape in the furniture-retail category
Nunito Sans for headings, Roboto for bodythe two-family split maps editorial warmth to catalog function: Nunito identifies brand-voice moments, Roboto identifies navigation moments
Shadow-lift product cardscards 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 voltagepurple is the only non-neutral color in the chrome; all other chromatic moments come from product photography of furniture, rugs, and decor

Live at wayfair.com

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

wayfair.com

Explore Wayfair

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

Brand & Accent

Sparing, CTA-only voltage.

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.

Wayfair design system FAQ

Common questions about Wayfair'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.

Wayfair — official site

Wayfair's public US storefront — 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.