Wayfair Design System

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

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.