`. - **Mega-menu flyout**: `role="menu"` with `role="menuitem"`; arrow keys navigate, Escape closes. - **PDP variant pickers**: color swatches are `role="radio"` inside a `role="radiogroup" aria-label="Color"`. - **Cart toast**: `role="status"` with `aria-live="polite"`. ### Keyboard Navigation - Utility bar → logo → search → category nav → breadcrumb → filter rail → product grid → footer - Inside filter rail: Tab moves between accordion buttons; Enter/Space toggles; arrow keys navigate within an open accordion - Inside the product grid: Tab moves tile-by-tile in document order; Enter activates the tile link - PDP: Tab through gallery → variant pickers → quantity → Add to Cart → Save → reviews - Mega-menu: hover-or-Enter opens; arrow keys navigate; Esc closes; Tab moves to the next category ### Screen Reader Hints Verbose `aria-label` on all icon-only buttons. The cart icon reads "Cart, 3 items". The hamburger reads "Open menu". The save-heart toggles between "Save" and "Saved" semantically. The compare-add toggle reads "Add to compare — 2 of 4 selected". ### Reduced Motion All transitions degrade to opacity-only. Card image scale and save-heart pop suppress. Hero carousel auto-advance pauses. Drawer and modal slides degrade to crossfade. ## 10. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px | Masthead collapses to logo + cart + hamburger; search moves to its own row beneath; product grid 2-up; filter rail becomes a slide-in drawer triggered by a sticky bottom "Filters" button; PDP buy-box stacks beneath gallery | | Tablet | 640–1024px | Full masthead with search; product grid 3-up; filter rail collapses to a horizontal scroll of top filters with a "More filters" drawer | | Desktop | 1024–1280px | Filter rail expands to 240px left rail; product grid 4-up; mega-menu hover-active | | Wide | 1280–1536px | Content caps at 1280px; product grid 5-up at the widest variant | ### Touch Targets - Primary CTAs: 44px height — meets AA, comfortable for thumb tap - Search bar: 44px height with 44×44 magnifier hit area - Save heart: 36×36 visual with 44×44 hit area extending beyond the visible circle - Filter chip: 32px visual with 44px vertical hit area (the rest is padding) - Product tile: entire tile is tappable (no nested links inside the tile body) - Quantity stepper: 36×36 buttons — borderline AA, compensated by 8px inner padding ### Collapsing Strategy - Utility bar: hides at <1024px - Masthead: utilities (account, help, lists) collapse into hamburger first; only logo + cart + hamburger remain at <640px - Search bar: jumps from inline to its own row beneath the masthead at <1024px - Category nav: collapses into the hamburger drawer at <1024px - Filter rail: full left rail → horizontal scroll of top filters → "Filters" drawer button at progressively smaller breakpoints - Product grid: column count drops 5 → 4 → 3 → 2; gutters compress from 20px to 16px to 12px - PDP: 2-column splits to single-column stack at <1024px; buy-box becomes a sticky bottom bar with collapsed price + Add to Cart ### Image Behavior Product thumbnails use `aspect-ratio: 4/5` or `1/1` with `object-fit: cover` — Wayfair prefers `cover` because lifestyle photography is composed full-frame. PDP gallery uses pinch-to-zoom on mobile and a magnifier-on-hover at desktop, with 6–12 product images plus 360° spin views on furniture categories. ### Container Queries Used inside the PDP buy-box: when the right rail narrows below ~340px, variant-picker chips wrap into a vertical stack, and the Add-to-Cart label drops the secondary line ("Free shipping & returns") into a separate row beneath the button. ## 11. Content & Voice ### Tone Helpful, aspirational, practical — the brand voice is "the friend with great taste who knows you have a budget." Wayfair's positioning anchor — *"A zillion things home"* — captures the breadth ambition. Headlines lean encouraging without being precious: "You've got this", "Designed for real life", "Make every room feel like home". The voice avoids both luxury-magazine reverence and discount-retail pressure. ### Microcopy Patterns - **Button verbs**: "Add to Cart", "Buy It Now", "Save for Later", "Compare", "View All" — direct and outcome-named - **Search placeholder**: "Find anything home..." — names the category and the breadth in five words - **Error message recipe**: `[What went wrong] + [How to fix]` — e.g., "We couldn't find that ZIP code. Try again with a 5-digit US ZIP." - **Success confirmations**: "Added to cart", "Saved!", "Order placed" — short, outcome-named - **Field labels**: short and practical — "ZIP code", "Email", "Promo code" - **Stock urgency**: "Only 3 left in stock" — names the count without panic - **Shipping ETA**: "Get it by Thu, May 28" — names the specific weekday and date ### Empty States **Empty cart**: "Your cart is empty. Let's find something you'll love." with a CTA back to the homepage. **Empty favorites**: "Save items by tapping the heart. They'll show up here for later." — instructive + names the gesture. **Empty search**: "No results for [query]. Try different keywords or browse by category." — names cause + alternative. **Empty filter result**: "No items match all your filters. Try removing a filter or two." — names the cause directly. **Empty orders**: "You haven't placed any orders yet. Start exploring." — friendly, no shame. ### CTA Verb Conventions - Primary: **"Add to Cart"** (default), **"Buy It Now"** (express checkout), **"Sign In"**, **"Continue"** - Save: **"Save for Later"** (in cart), the heart icon for the wishlist gesture (Wayfair calls the saved list "My Favorites") - Tertiary: **"View Details"**, **"See All Reviews"**, **"Compare"**, **"Show More"** - Membership: **"Join Wayfair Rewards"** — names the program explicitly - Avoided: "Submit", "Click here", "Buy now" alone (Wayfair prefers "Add to Cart" → checkout for considered purchases; "Buy It Now" reserved for express-checkout consumables) ## 12. Dark Mode & Theming **Light-only across storefront.** Wayfair.com is light-only on both web and the mobile app. The brand position: the entire chromatic system depends on the near-white canvas as a stage for photographic product imagery, and product photos are colour-graded for warm-white viewing. A dark variant would require re-grading the entire product catalogue, which the brand has chosen not to do. The faintly-darker `#f7f8fa` and `#f4f5f7` surfaces (search bar, alt rows, filter rail) are the closest the brand comes to surface variation — they read as subtle paper variation, not as dark mode. ## 13. Lineage & Influences Wayfair's visual lineage runs through three traditions: **mid-century furniture-catalogue editorial** (Crate & Barrel, West Elm, Pottery Barn — the printed-catalogue aesthetic of styled rooms, generous white space, photographic discipline, and ink-on-cream typography); **IKEA's grid-based product encyclopedia** (the relentless 4-up grid, the photographic uniformity across thousands of SKUs, the practical-not-precious tone); and **Pinterest's save-and-curate gesture** (the heart icon, the "My Favorites" board, the implicit assumption that home shopping is collected before it is purchased). The brand has spent the last decade walking away from its early-2010s purple-and-yellow promotional energy toward this calmer, structured aesthetic. The 2018 visual refresh that introduced the `Mier B` custom sans and standardised the near-white canvas was the inflection point — before then Wayfair read as a louder, more discount-flavoured marketplace; after, it reads as the JCrew or Crate & Barrel of online home goods. What Wayfair rejects: dense badge clutter (the Amazon problem), saturated promotional colour as a daily UI surface (its own former self), handmade-craft aesthetics (the Etsy lane), luxury-magazine reverence (the RH or 1stDibs lane), and dark mode. The brand position is **calm, structured middle-market discovery** — practical enough to sell a $99 rug, polished enough to sell a $2,400 sectional, never apologising for either price point. **Influences:** - Target — peer big-box retailer with parallel chromatic restraint and photographic discipline, [target.com](https://www.target.com) - IKEA — grid-based product encyclopedia and photographic uniformity, [ikea.com](https://www.ikea.com) - Crate & Barrel — mid-century catalogue editorial and styled-room photography, [crateandbarrel.com](https://www.crateandbarrel.com) - West Elm — millennial-modern home retail tone and lifestyle-led product imagery, [westelm.com](https://www.westelm.com) - Pinterest — the save-heart gesture and curated-board behaviour, [pinterest.com](https://www.pinterest.com) - Etsy — long-tail marketplace structure and discovery patterns, [etsy.com](https://www.etsy.com) ## 14. Do's and Don'ts **Do** - Anchor the brand on ink near-black (`#0a0a0a`) for the wordmark, every primary CTA, ratings, and savings tags - Use the near-white canvas (`#fafbfc`) deliberately — one shade off pure white gives photography off-canvas warmth - Round CTAs at 8px (square-shoulder, not pill) — pills are reserved for filters, status, and save - Round product cards at 12px with **no border and no internal padding** — image edge-to-edge against canvas - Anchor the Save heart top-right on every product card, with a Bestseller badge anchored top-left when relevant - Render star ratings in ink on grey — never yellow or gold - Use `Mier B` (Inter is an acceptable substitute) at semibold (600) for buttons, not bold (700) - Lean into 64–96px vertical section padding — editorial breath - Use `object-fit: cover` on product thumbnails (lifestyle styled-room photography, not white seamless) - Underline every inline link — because links match ink, the underline is the only way to disambiguate - Use tabular numerals (`tnum`) on every price, savings tag, and rating - Render "FREE shipping" as inline green text — no surface, no border **Don't** - Don't render CTAs as 9999px pills — Wayfair is square-shoulder. Pills belong to filters and status, not commitments - Don't surface the heritage purple (`#7B189F`) in UI — it survives only in the wordmark seal - Don't use the promo yellow (`#f5d342`) outside Way Day or Cyber Week — saturated colour as everyday surface breaks the brand - Don't add visible borders to default product cards — the canonical card is edge-to-edge image-against-canvas - Don't use yellow or gold for star ratings — ink on grey, always - Don't use the save-heart red (`#cc1c1c`) for anything else — it is reserved for the saved-item state - Don't pad the canonical product card internally — the label sits on the canvas beneath the image, not inside a frame - Don't add multi-layer atmospheric shadows — Wayfair is single-layer flat - Don't substitute a different serif for Mier B — the brand reads structured-humanist-sans, not editorial-serif - Don't use exclamation marks gratuitously — the voice is helpful, not giddy - Don't centre the page above 1280px — the editorial column stays narrower than mass-market peers - Don't tighten section padding below 64px — the breath is part of the brand ## 15. Agent Prompt Guide ### Quick Color Reference ``` Canvas: #fafbfc Page White: #ffffff Ink: #0a0a0a Brand Hover: #000000 Muted: #555555 Soft: #777777 Border Soft: #e6e8eb Search Fill: #f7f8fa Success Green: #1a7f3c Save Red: #cc1c1c Promo Yellow: #f5d342 (Way Day only) ``` ### Example Component Prompts - "Create a Wayfair-style Add to Cart button: a 44px-tall square-shoulder rectangle (8px radius — not a pill) with ink-black (`#0a0a0a`) fill, white text in Mier B 15/600, 12×20px padding. Hover deepens to pure black `#000000`." - "Build a Wayfair masthead: full-width white bar with a 1px `#e6e8eb` bottom hairline, 64px tall. Wordmark flush left in `#0a0a0a` (with the heritage purple `#7B189F` inside the W glyph only). Search bar centred (~600px wide, 44px tall, 8px radius, soft-grey `#f7f8fa` fill with a 1px hairline border, magnifier icon on the left edge, placeholder 'Find anything home...'). Account / Help / Lists / Cart utilities flush right in Mier B 14/500 ink. Add a 32px utility bar above with 'Free shipping over $35' in soft-grey ground." - "Design a Wayfair product card: edge-to-edge image-led tile with no border and no internal padding. 4:5 aspect lifestyle product photo at 12px radius. Beneath the image (on the canvas, not inside a frame): product title in Mier B 16/500 ink clamped to 2 lines, optional brand line in 13/400 muted, 5-star row (ink fill, `#e6e8eb` empty) + review count in 13/400 with an underlined ink link, current price in 18/700 with `tnum`, optional strikethrough original price in 14/400 muted, optional red `$70 off` save line, 'FREE shipping' inline green text. Anchor a 36×36 circular Save heart top-right (semi-transparent white background, ink outline empty, fills red `#cc1c1c` with a 1.0 → 1.2 → 1.0 pop). Anchor an optional 'BESTSELLER' ink pill badge top-left." - "Build a Wayfair category page hero: full-bleed 1280px-wide lifestyle room shot (e.g., a sunlit living room with a sectional and a brass floor lamp). Copy in Mier B 56/700 with -0.02em tracking sits in the lower-left third — 'Outdoor, redefined' — followed by an 8px square-shoulder ink CTA: 'Shop Outdoor'. No scrim, no overlay tint — the photographer composed the empty third for the overlay." - "Design a Wayfair filter rail: 240px wide left rail on canvas ground. Stacked accordion sections (Price, Brand, Material, Color, Customer Rating, Shipping Speed) with chevron indicators. Each section header in Mier B 14/500 ink. Expanded content shows either a checkbox list (1px `#c8ccd0` outline, ink-fill when checked) or a chip cluster (32px-tall pills, 9999px radius, white fill with 1px `#e6e8eb` hairline, ink-fill with white text when active). 'Show all' link in 13/500 underlined ink when a list exceeds 6 items." - "Create a Wayfair PDP buy-box: white surface, 12px radius, 1px `#e6e8eb` border, 24px padding, sticky to the right rail. Stack: large `price-display` (32/700 with `tnum` — `$429`). Strikethrough `$499` in 14/400 muted. Red `$70 off` save line in 14/600. Color swatch row (32×32 circles with 1px hairline, 2px ink ring when selected). Size dropdown. Material radio group. Quantity stepper (36×36 buttons). Full-width ink Add to Cart CTA (44px, 8px radius, white text 15/600). Outline 'Save for Later' ghost beneath. 'Free shipping & free returns' inline green line. 'Get it by Thu, May 28' delivery estimate in 14/400 muted." ### Iteration Guide 1. **Square-shoulder, not pill.** If your CTA is rounding at 9999px, you're building Target or Walmart. Wayfair commits at 8px. 2. **Edge-to-edge cards.** If your product card has a visible border or internal padding around the image, you're building the framed variant. The canonical card is image-against-canvas with the label on the canvas beneath. 3. **Ink rating stars, never yellow.** Yellow stars read as Amazon. Wayfair stars are `#0a0a0a` on `#e6e8eb` — quiet and editorial. 4. **Save heart, top-right.** Every product card. Empty ink outline; fills red when saved. The pop animation is the only celebratory motion in the system. 5. **64–96px vertical padding.** If your sections feel cramped, they are. Wayfair trusts breath the way a printed catalogue trusts margins. 6. **Tabular numerals on every price.** `$429` and `$1,249` align right-edge in the grid; if your prices wobble, you forgot `font-feature-settings: 'tnum'`. 7. **Underline every link.** Because inline links match ink (`#0a0a0a` on `#fafbfc`), the underline is the only way to disambiguate from running text. 8. **Photography is the colour.** If your category page feels weak, the answer is better room-and-product photography, not a louder layout or a saturated accent.