--- name: Best Buy tagline: Yellow price-tag mark, electric blue trust, bold sans — big-box electronics design with Geek-Squad confidence. updated_at: 2026-05-28T00:00:00+12:00 published_at: 2026-05-27T23:17:35.551Z author: webdesignhot source_url: https://www.bestbuy.com spec: webdesignhot/0.1 quality: curated featured: false categories: [retail] tags: [light, retail, electronics, sans, structured, commerce, bold, big-box] preview_swatch: ['#ffffff', '#fff000', '#0046be'] related: [target, walmart, amazon, apple] description: 'Best Buy''s storefront leans on a two-stroke chromatic identity that is unmistakable from across a parking lot: a calm white canvas (`#ffffff`), the signature **Best Buy Yellow** (`#fff000`) reserved almost entirely for the iconic price-tag logo mark, and a deep electric **Best Buy Blue** (`#0046be`) doing the heavy lifting for every primary CTA, link, and trust signal. Type runs a Pangram-class bold sans (Human BBY Web, with Helvetica fallback) at confident weights — display 32–80px / 700, body 16/400, with subtle negative tracking on display. The page is dense by design: comparison tables, large product hero shots, member-tier `My Best Buy` branding, and the Geek Squad service-overlay sit shoulder-to-shoulder without crowding. Where Target whispers and Walmart shouts, Best Buy speaks with a helpful-expert voice — the friend who actually knows the difference between OLED and QLED — and the design backs that promise with rigorous information density, generous product comparison surface, and a yellow-tag mark that has outlived every electronics-retail peer in the United States.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand muted: text-muted border: border ring: brand colors: bg: '#ffffff' # default canvas bg-page: '#f7f7f7' # alternate page floor / section band surface: '#ffffff' surface-soft: '#f4f4f4' # disabled fields, alt row, comparison stripe surface-strong: '#e6e6e6' # divider band between sections surface-blue-soft: '#e5edf9' # My Best Buy member-tier tint surface-yellow-soft: '#fffbcc' # price-tag adjacent callouts (rare) brand: '#0046be' # Best Buy Blue — every primary CTA, link, trust signal brand-hover: '#003795' # darker blue on hover brand-active: '#002a73' # pressed state brand-pale: '#cdd9ee' # disabled CTA tint brand-yellow: '#fff000' # Best Buy Yellow — the price-tag logo mark brand-yellow-hover: '#ffe600' # rare yellow CTA hover (used on sale-only buttons) text: '#1d252c' # primary ink — near-black with a slight cool cast text-strong: '#000000' # hero display copy at maximum punch text-muted: '#54646c' # secondary metadata, breadcrumbs text-soft: '#737d83' # caption text, disabled labels text-on-brand: '#ffffff' # white on Best Buy Blue text-on-yellow: '#1d252c' # ink on Best Buy Yellow text-on-dark: '#ffffff' # white on dark utility band link: '#0046be' # links share the brand blue — no separate link colour link-hover: '#003795' # hover deepens the brand blue link-visited: '#5c2e91' # visited purple on category pages border: '#d8d8d8' # default 1px hairline border-soft: '#ececec' # editorial dividers border-strong: '#bcbcbc' # focus state hairline border-input: '#9e9e9e' # form input outline rating-yellow: '#ffd200' # star rating fill — warm yellow, not brand-yellow rating-empty: '#d8d8d8' # empty star geek-squad-black: '#000000' # Geek Squad sub-brand ground geek-squad-orange: '#ff6c00' # Geek Squad accent (rare, used inside service surfaces) member-platinum: '#5c4ca2' # My Best Buy Plus / Total tier badge purple totaltech-blue: '#003795' # Total membership trust blue scrim: 'rgba(0,0,0,0.5)' # modal backdrop shadow-card: 'rgba(0,0,0,0.08)' shadow-elev: 'rgba(0,0,0,0.16)' success: '#118738' # in-stock confirmation green success-soft: '#e6f4ea' # in-stock pill background warning: '#b35900' # advisory amber for low-stock warning-soft: '#fff4e5' danger: '#c91432' # validation error red — separate from brand danger-soft: '#fbe8ec' info: '#0046be' # informational banners share brand blue typography: display: family: '"Human BBY Web", "Helvetica Neue", Helvetica, Arial, sans-serif' weights: [400, 500, 600, 700] opentype-features: ['tnum'] body: family: '"Human BBY Web", "Helvetica Neue", Helvetica, Arial, sans-serif' weights: [400, 500, 600, 700] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace' weights: [400, 500] scale: display-hero: { size: 80, weight: 700, lineHeight: 1.0, tracking: '-0.03em', family: display, opentype: ['tnum'] } display-lg: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display } h1: { size: 40, weight: 700, lineHeight: 1.1, tracking: '-0.018em', family: display } h2: { size: 32, weight: 600, lineHeight: 1.2, tracking: '-0.012em', family: display } h3: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display } h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body } product-title: { size: 18, weight: 500, lineHeight: 1.33, tracking: '0', family: body } product-title-md: { size: 16, weight: 500, lineHeight: 1.4, tracking: '0', family: body } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } micro: { size: 11, weight: 500, lineHeight: 1.27, tracking: '0.04em', family: body, transform: uppercase } price-display: { size: 32, weight: 700, lineHeight: 1.0, tracking: '-0.01em', family: body, opentype: ['tnum'] } price-product: { size: 20, weight: 700, lineHeight: 1.0, tracking: '0', family: body, opentype: ['tnum'] } price-strikethru: { size: 14, weight: 400, lineHeight: 1.0, tracking: '0', family: body, opentype: ['tnum'] } price-save: { size: 14, weight: 600, lineHeight: 1.0, tracking: '0', family: body, opentype: ['tnum'] } button-cta: { size: 16, weight: 600, lineHeight: 1.0, tracking: '0', family: body } nav-link: { size: 14, weight: 500, lineHeight: 1.0, tracking: '0', family: body } badge: { size: 11, weight: 700, lineHeight: 1.0, tracking: '0.05em', family: body, transform: uppercase } radius: micro: 2 sm: 4 md: 8 # default cards, buttons, inputs lg: 12 xl: 16 pill: 9999 # filter chips, member badges, in-stock pills spacing: base: 4 scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96] layout: page-width: 1280 prose-width: 720 header-height: 64 utility-bar-height: 32 sub-nav-height: 48 components: button-primary: bg: '#0046be' color: '#ffffff' radius: 8 padding: '12px 20px' height: 44 font: button-cta use: 'Add to Cart, Sign In, Check Stores — every primary action.' button-primary-hover: bg: '#003795' color: '#ffffff' radius: 8 use: 'Hover state — deeper blue.' button-secondary: bg: '#ffffff' color: '#0046be' border: '1px solid #0046be' radius: 8 padding: '11px 19px' height: 44 use: 'Save for Later, Compare, Check Availability — outline blue CTA.' button-yellow-deal: bg: '#fff000' color: '#1d252c' border: '1px solid #1d252c' radius: 8 padding: '12px 20px' height: 44 use: 'Rare sale-event CTA — Deal of the Day, Black Friday banners.' button-ghost: bg: 'transparent' color: '#0046be' radius: 8 padding: '10px 16px' use: '"See all", text-only blue links inside content surfaces.' button-icon: bg: 'transparent' color: '#1d252c' radius: 9999 size: '40x40' use: 'Wishlist heart, share, compare toggle — icon-only on hover-tint circle.' product-card: bg: '#ffffff' color: '#1d252c' radius: 8 padding: '16px' border: '1px solid transparent' use: 'Search-result product tile. Image-led, comparison-friendly metadata stack.' pdp-buy-box: bg: '#ffffff' color: '#1d252c' radius: 8 border: '1px solid #d8d8d8' padding: '24px' use: 'Sticky right-rail buy box on PDP — price, fulfilment, member savings, CTA stack.' comparison-row: bg-odd: '#ffffff' bg-even: '#f4f4f4' color: '#1d252c' use: 'Striped comparison-table row — Best Buy''s signature spec-grid.' promo-banner: bg: '#0046be' color: '#ffffff' radius: 0 padding: '16px 24px' use: 'Full-width hero banner — deep blue ground, white display copy, yellow accent flash.' geek-squad-card: bg: '#000000' color: '#ffffff' radius: 8 padding: '24px' accent: '#ff6c00' use: 'Service-overlay card — Geek Squad install / protect / repair upsell.' text-input: bg: '#ffffff' color: '#1d252c' radius: 8 height: 44 padding: '10px 12px' border: '1px solid #9e9e9e' focus: '2px solid #0046be' use: 'Form input — focus ring is brand blue.' search-bar: bg: '#ffffff' color: '#1d252c' radius: 8 height: 40 border: '1px solid #9e9e9e' button-bg: '#0046be' button-color: '#ffffff' use: 'Masthead search — input + attached blue submit button with magnifier icon.' star-rating: color-fill: '#ffd200' color-empty: '#d8d8d8' use: 'Five-star rating — warm yellow fill, grey empty. Customer-Reviews live label is always blue link.' in-stock-pill: bg: '#e6f4ea' color: '#118738' radius: 9999 padding: '4px 10px' use: '"In stock at Mall of America" pill — green tint with bold green text.' low-stock-pill: bg: '#fff4e5' color: '#b35900' radius: 9999 padding: '4px 10px' use: '"Only 2 left" advisory pill — amber tint.' member-badge: bg: '#e5edf9' color: '#0046be' radius: 9999 padding: '4px 10px' use: 'My Best Buy Plus / Total tier badge — blue tint, brand-blue text.' motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 cta-press: 'CTA bg deepens 0046be → 002a73 over 150ms on :active' card-hover: 'border-soft → border-strong + shadow-card appears over 200ms; image holds steady (no scale — Best Buy keeps product geometry true)' search-focus: '2px blue ring fades in over 200ms' reduced-motion: 'respects prefers-reduced-motion: reduce — image scale and transforms suppressed; colour transitions remain.' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: ambient: 'none — Best Buy stays flat on the body' hover-card: 'rgba(0,0,0,0.08) 0 2px 8px' buy-box: 'rgba(0,0,0,0.08) 0 4px 12px' modal: 'rgba(0,0,0,0.16) 0 8px 24px' ring: '0 0 0 2px #0046be' accessibility: contrast-text-on-bg: 14.8 # #1d252c on #ffffff — AAA contrast-text-on-cta: 8.6 # #ffffff on #0046be — AAA contrast-link-on-bg: 8.6 # #0046be on #ffffff — AAA contrast-muted-on-bg: 7.4 # #54646c on #ffffff — AAA contrast-yellow-mark: 18.5 # #1d252c on #fff000 — AAA (price-tag logo) focus-ring: '2px solid #0046be + 2px outline offset (Best Buy Blue)' reduced-motion-honored: true touch-target-min: 44 keyboard-nav: 'Tab moves utility bar → masthead logo → search → cart → primary nav → main grid → footer; arrow keys inside mega-menu and product carousel.' dark-mode: null # Light-only across the storefront. The Best Buy mobile app respects system dark mode. lineage: summary: 'Best Buy''s digital identity descends from three retail traditions: the **mid-century yellow-tag price-mark** (the brand''s logo is literally a hanging price tag and has been since the 1989 rebrand that retired the original "Sound of Music" wordmark), the **electric-blue trust signalling** common to consumer-tech and finance categories (IBM, Ford, Visa, American Express), and the **big-box comparison-grid** discipline pioneered by mid-90s Circuit City and refined into a digital-native form after Best Buy outlived that peer in 2009. Where Target leans on photographic editorial and chromatic restraint, and Walmart leans on density and yellow accents, Best Buy holds the middle ground — bold sans typography, generous comparison surface, blue-trust CTAs, and the yellow mark used sparingly enough that it still feels like a stamp rather than a wash. The Geek Squad sub-brand (black ground, orange accent) sits as a self-contained service-overlay system inside the storefront — visually distinct, never bleeding into the main commerce surface. The brand''s strategic position: the helpful expert who actually knows the difference between OLED and QLED.' influences: - { name: Target, role: 'Big-box retail peer with stronger brand discipline — Best Buy borrows the white-canvas + single-brand-colour playbook but trades Bullseye red for electric blue.', url: 'https://www.target.com' } - { name: Apple, role: 'Premium electronics retail standard — large product photography, generous PDP spacing, Helvetica-class neutrality. Best Buy sells Apple inventory and partially mirrors the chrome.', url: 'https://www.apple.com' } - { name: Costco, role: 'Warehouse retail peer — dense product information, member-tier visual branding, comparison-friendly stacks.', url: 'https://www.costco.com' } - { name: Walmart, role: 'Big-box direct competitor — Best Buy adopts the pill-search masthead and 4-up product grid but rejects the saturated yellow wash for restrained brand-blue.', url: 'https://www.walmart.com' } - { name: IBM, role: 'Electric-blue trust signalling lineage — the same chromatic intent (technology + reliability) that powered IBM''s 1972 mark and Best Buy''s 1989 rebrand.', url: 'https://www.ibm.com' } - { name: Helvetica Neue, role: 'Typographic neutrality lineage — Best Buy''s Human BBY Web is a Pangram-class custom sans whose fallback is Helvetica, and the design intent is the same neutral commercial confidence.', url: 'https://fonts.adobe.com/fonts/helvetica-neue' } --- ## 1. Visual Theme & Atmosphere Best Buy's storefront earns its big-box electronics design credibility through a disciplined two-stroke chromatic identity. Where Target chases chromatic restraint and Walmart chases saturation, Best Buy holds the middle ground — a calm white canvas (`#ffffff`), the iconic **Best Buy Yellow** (`#fff000`) reserved almost entirely for the hanging price-tag logo mark, and a deep electric **Best Buy Blue** (`#0046be`) doing the heavy lifting for every primary CTA, link, in-stock confirmation, and trust signal. The yellow mark stays sparing on purpose — used as a stamp rather than a wash, it reads as recognisable and confident from across a parking lot, exactly the way the physical store signage does. The blue does the actual work of the page: it is the colour of the Add to Cart pill, the price-comparison links, the My Best Buy member badges, and every focused input ring. Type runs a **Pangram-class bold sans** (Human BBY Web, with Helvetica Neue as the engineered fallback) at confident weights — display lines render at 32–80px / 700 with subtle negative tracking (-0.018em to -0.03em), body text at 16/400 with comfortable 1.55 leading, and labels at 13/500 with neutral tracking. The brand intent: bold without being shouty, accessible without being plain. This is the typographic position of consumer-electronics retail — the type should read like a confident specifications sheet, not a fashion magazine, and not a discount circular. The page is **dense by design**. Best Buy customers come to compare — a 65" OLED against a 65" QLED, a Ryzen 7 against an Intel i7, three vacuum cleaners side-by-side — and the storefront leans into that intent with rigorous comparison-table surface, generous product-spec stacks, prominent Customer Reviews counts, and a sticky PDP buy-box that surfaces fulfilment options (Shipping, Pickup, Same-Day Delivery) without scrolling. Where Target trusts a 4-up grid with breath, Best Buy runs 4–5-up with tighter 16px gutters and surfaces more metadata per tile — model number, screen size, capacity, RAM, in-stock-at-store status. The **Geek Squad sub-brand** lives as a self-contained service-overlay system inside the storefront — black ground (`#000000`), occasional orange accent (`#ff6c00`), bold display copy, and clearly delineated cards that never bleed into the main commerce surface. It functions visually as the service-aisle of the store: when you cross into it, the lighting changes. The brand position is intentional — Geek Squad is the human-expertise overlay; the main blue-on-white storefront is the product surface. The two coexist without colliding. Photography is **product-led**, not lifestyle-led. Best Buy product shots are predominantly white seamless (especially for laptops, TVs, phones, appliances) with `object-fit: contain` so geometry stays true — buyers want to read screen sizes and chassis proportions, not vibe with a lifestyle shoot. Editorial hero bands and category landings are the exception, where lifestyle imagery does surface (people unboxing, kitchens with appliances, gaming setups), but the SKU-level surface keeps to true-geometry product photography. This is opposite to Target's lifestyle-first approach and closer to Apple's product-detail discipline. **Key Characteristics:** - Two-stroke brand identity: Best Buy Yellow (`#fff000`) for the logo mark only, Best Buy Blue (`#0046be`) for every CTA, link, focus ring, and trust signal - Iconic yellow hanging-price-tag logo — sparing use is intentional; the mark reads as a stamp, not a wash - Bold Pangram-class sans (Human BBY Web / Helvetica Neue fallback) at 400/500/600/700, with negative tracking on display - Comparison-grid density: 4–5-up product grids with rich metadata, striped comparison tables, tabular numerals on every spec - Sticky right-rail PDP buy-box surfaces fulfilment options (Shipping / Pickup / Same-Day / Store) without scroll - Geek Squad sub-brand lives in self-contained black-and-orange cards that never bleed into the main blue-on-white commerce surface - Product photography is white-seamless with `object-fit: contain` — geometry stays true for spec-driven buyers - 8px card radius, 8px CTA radius — Best Buy holds a rectangular discipline rather than Target's pill or Walmart's super-pill - Member-tier branding (My Best Buy / Plus / Total) uses tinted blue pills — visually inside the brand system, not bolted on - 44px touch-target floor — meets AA across every CTA and form control ## 2. Color Palette & Roles ### Primary - **Canvas** (`#ffffff`) → `colors.bg`: default page floor, every product tile, every form surface - **Page Floor** (`#f7f7f7`) → `colors.bg-page`: alternate band ground when a section needs subtle separation from the body - **Ink** (`#1d252c`) → `colors.text`: primary text colour — near-black with a slight cool cast that reads warmer than pure `#000` - **Heading Ink** (`#000000`) → `colors.text-strong`: hero display copy at maximum chromatic punch ### Brand - **Best Buy Blue** (`#0046be`) → `colors.brand`: the workhorse — every primary CTA, every link, every in-stock confirmation, every focus ring, every member-tier accent - **Brand Hover** (`#003795`) → `colors.brand-hover`: deeper blue on `:hover` - **Brand Active** (`#002a73`) → `colors.brand-active`: pressed state - **Brand Pale** (`#cdd9ee`) → `colors.brand-pale`: disabled CTA tint - **Best Buy Yellow** (`#fff000`) → `colors.brand-yellow`: the iconic hanging-price-tag logo mark — used sparingly outside the mark itself (rare sale-event banners, Deal-of-the-Day strips, Black Friday hero bands) - **Yellow Hover** (`#ffe600`) → `colors.brand-yellow-hover`: hover state on rare yellow CTAs ### Accent - **Geek Squad Black** (`#000000`) → `colors.geek-squad-black`: ground of every Geek Squad service-overlay card - **Geek Squad Orange** (`#ff6c00`) → `colors.geek-squad-orange`: rare accent inside Geek Squad surfaces — install-progress chips, service-badge highlights - **Member Platinum** (`#5c4ca2`) → `colors.member-platinum`: My Best Buy Plus / Total tier badge purple — appears only on premium-membership surfaces - **Total Tech Blue** (`#003795`) → `colors.totaltech-blue`: deeper trust-blue used on Total membership confirmation surfaces ### Interactive - **Link** (`#0046be`) → `colors.link`: links share the brand blue — Best Buy does not maintain a separate link colour - **Link Hover** (`#003795`) → `colors.link-hover`: hover deepens the brand blue - **Visited** (`#5c2e91`) → `colors.link-visited`: visited purple on category-listing pages - **Disabled** (`#9e9e9e`) → `colors.border-input`: disabled text, disabled outline - **Selected** (`#0046be`) → `colors.brand`: selected radio / checkbox / tab indicator — always brand blue ### Neutral Scale - **Ink** (`#1d252c`) → `colors.text` — primary text - **Heading** (`#000000`) → `colors.text-strong` — hero display copy - **Muted** (`#54646c`) → `colors.text-muted` — secondary metadata, breadcrumbs, caption text on cards - **Soft** (`#737d83`) → `colors.text-soft` — caption text, disabled labels - **Border** (`#d8d8d8`) → `colors.border` — default 1px hairline - **Border Soft** (`#ececec`) → `colors.border-soft` — editorial dividers between bands - **Border Strong** (`#bcbcbc`) → `colors.border-strong` — focus state hairline on inputs - **Border Input** (`#9e9e9e`) → `colors.border-input` — default form-input outline ### Surface & Borders - **Canvas** (`#ffffff`) → `colors.surface` — default - **Soft** (`#f4f4f4`) → `colors.surface-soft` — disabled fields, alternate row, comparison-table stripe - **Strong** (`#e6e6e6`) → `colors.surface-strong` — divider band between major sections - **Blue-Soft** (`#e5edf9`) → `colors.surface-blue-soft` — My Best Buy member-tier tint pill - **Yellow-Soft** (`#fffbcc`) → `colors.surface-yellow-soft` — price-tag-adjacent callouts (rare; used inside sale-only modules) ### Shadow Colors Best Buy stays mostly flat. Hover-card shadow is a single-layer neutral grey at 8% — slightly heavier than Target's 6% because Best Buy's product tiles carry more metadata and benefit from a clearer hover lift. - `rgba(0,0,0,0.08) 0 2px 8px` → `colors.shadow-card` — hover-card lift on product tiles - `rgba(0,0,0,0.08) 0 4px 12px` — sticky PDP buy-box elevation - `rgba(0,0,0,0.16) 0 8px 24px` → `colors.shadow-elev` — modal drop ### Semantic - **Success Green** (`#118738`) → `colors.success`: in-stock confirmation, "In stock at Mall of America" pill text - **Success Soft** (`#e6f4ea`) → `colors.success-soft`: in-stock pill background tint - **Warning Amber** (`#b35900`) → `colors.warning`: advisory banners, "Only 2 left" low-stock callouts - **Warning Soft** (`#fff4e5`) → `colors.warning-soft`: low-stock pill background tint - **Danger Red** (`#c91432`) → `colors.danger`: validation errors — separate from brand blue so errors read distinctly - **Danger Soft** (`#fbe8ec`) → `colors.danger-soft`: validation error field tint - **Info Blue** (`#0046be`) → `colors.info`: informational banners share the brand blue ### Star Rating - **Rating Yellow** (`#ffd200`) → `colors.rating-yellow`: star-rating fill — a warmer yellow than the brand-yellow price-tag mark, chosen so stars read as ratings (warm) rather than as branded elements (saturated) - **Rating Empty** (`#d8d8d8`) → `colors.rating-empty`: empty star — matches default border colour ## 3. Typography Rules ### Font Family **Primary**: `Human BBY Web` — Best Buy's custom Pangram-class sans, commissioned to read as a slightly humanist Helvetica with subtle aperture warmth. Fallback chain: `"Helvetica Neue", Helvetica, Arial, sans-serif`. The fallback is engineered so unbranded surfaces (CLI tools, plain-HTML order receipts, third-party embeds) render in Helvetica Neue and the brand still reads correctly. **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace` — used only inside spec tables for model numbers, SKUs, and order-confirmation IDs. **OpenType features**: `tnum` is enabled on every price display, savings tag, rating count, spec table, and order-confirmation number so column alignment stays clean across comparison grids. No `ss01` / `ss02` stylistic-set discipline — the typeface ships with a single canonical character set. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |------|------|------|--------|-------------|----------------|-------------|-------| | display-hero | Human BBY Web | 80 | 700 | 1.0 | -0.03em | — | Black Friday / event hero banner | | display-lg | Human BBY Web | 56 | 700 | 1.05 | -0.02em | — | Category landing hero ("TVs & Home Theater") | | h1 | Human BBY Web | 40 | 700 | 1.1 | -0.018em | — | PDP product title, page H1 | | h2 | Human BBY Web | 32 | 600 | 1.2 | -0.012em | — | "Top Deals", "Customer Reviews", "Compare similar items" | | h3 | Human BBY Web | 24 | 600 | 1.25 | -0.005em | — | Sub-section heads on PDP | | h4 | Human BBY Web | 20 | 600 | 1.3 | 0 | — | Card titles in editorial bands | | product-title | Human BBY Web | 18 | 500 | 1.33 | 0 | — | PDP secondary title slot | | product-title-md | Human BBY Web | 16 | 500 | 1.4 | 0 | — | Grid product card titles | | body-lg | Human BBY Web | 18 | 400 | 1.55 | 0 | — | Editorial body, lead paragraphs | | body | Human BBY Web | 16 | 400 | 1.55 | 0 | — | Default body — descriptions, reviews | | body-sm | Human BBY Web | 14 | 400 | 1.5 | 0 | — | Secondary metadata, "Sold by Best Buy" | | label | Human BBY Web | 13 | 500 | 1.4 | 0 | — | Form labels, breadcrumb separators | | caption | Human BBY Web | 12 | 500 | 1.4 | 0.02em | — | Footer micro-text, tile metadata | | micro | Human BBY Web | 11 | 500 | 1.27 | 0.04em | uppercase | "MEMBER PRICE", "DEAL", legal eyebrow | | price-display | Human BBY Web | 32 | 700 | 1.0 | -0.01em | tnum | PDP main price ("$1,299.99") | | price-product | Human BBY Web | 20 | 700 | 1.0 | 0 | tnum | Grid tile current price | | price-strikethru | Human BBY Web | 14 | 400 | 1.0 | 0 | tnum | Original-price strikethrough | | price-save | Human BBY Web | 14 | 600 | 1.0 | 0 | tnum | "Save $200" callout | | button-cta | Human BBY Web | 16 | 600 | 1.0 | 0 | — | Primary CTA labels — 600 weight (bold without crowding) | | nav-link | Human BBY Web | 14 | 500 | 1.0 | 0 | — | Masthead category labels | | badge | Human BBY Web | 11 | 700 | 1.0 | 0.05em | uppercase | "GEEK SQUAD", "MY BEST BUY TOTAL", member-exclusive eyebrow | ### Principles - **Human BBY Web is the system; Helvetica Neue is the fallback.** Anywhere the custom typeface fails to load, the page should still read as Best Buy because the fallback chain was engineered to match metrics. - **Negative tracking on display.** display-hero (80px) and display-lg (56px) run with -0.03em and -0.02em tracking respectively — Best Buy leans into tight tracking for confident headline display, matching Target and Apple discipline. - **Body at 16/400 with 1.55 leading.** Slightly more generous than Target's 1.5 because Best Buy's body copy carries longer technical spec descriptions. - **Button CTAs at 600.** Slightly lighter than Target's 700 — Best Buy uses 600 to keep the CTA bold without crowding the deep-blue fill. - **Tabular numerals on every price, spec, and rating.** `tnum` is non-negotiable inside comparison tables — model numbers, RAM specs, screen sizes, prices, ratings all must align right-edge across rows. - **All-caps eyebrows are tracked +0.04em–0.05em.** "MEMBER PRICE", "DEAL", and "GEEK SQUAD" eyebrows render at 11/700 uppercase with extra tracking for legibility at small sizes. - **No italic, no oblique.** The typeface ships obliques but the storefront never uses them — italics read as editorial and Best Buy holds a commercial register. - **Inter or Manrope are the closest open-source substitutes** for Human BBY Web. ## 4. Component Stylings ### Buttons **`button-primary`** — the canonical Best Buy CTA. Best Buy Blue (`#0046be`) fill, white text in 16/600, 8px radius, 12×20px padding, 44px height. Hover deepens to `#003795`. Active deepens further to `#002a73`. Used for every "Add to Cart", "Sign In", "Check Stores", "Continue to Checkout" action. **`button-secondary`** — white fill, 1px Best Buy Blue outline, brand-blue text in 16/600. Same 8px radius, 44px height. Used for "Save for Later", "Compare", "Check Availability", and other inverse actions where the primary CTA exists elsewhere on the surface. **`button-yellow-deal`** — rare sale-event CTA. Best Buy Yellow (`#fff000`) fill, ink text in 16/600, 1px ink outline (the outline is structural — yellow on white needs a hairline to read), 8px radius. Used only for Deal-of-the-Day, Black Friday banners, and event-page hero CTAs. Never used for default add-to-cart. **`button-ghost`** — transparent fill, brand-blue text in 16/600, no outline. Underlined on hover. Used for "See all", "Show more reviews", "Compare similar items" inside content surfaces. **`button-icon`** — transparent fill, ink-coloured icon, 40×40px hit area, 9999px hover tint. Used for wishlist heart, share, compare-toggle on product tiles. ### Cards **`product-card`** — grid product tile. White surface, 8px radius, 16px padding, 1px transparent border that turns `#d8d8d8` on hover (the hairline appearance is the hover affordance). Stack: 1:1 thumbnail with `object-fit: contain` (Best Buy prefers `contain` because products are SKU-photographed on white seamless and geometry matters), product title in 16/500 ink (max 2 lines, ellipsised), 5-star rating row (warm yellow fill, grey empty) + review count as brand-blue link, current price in 20/700 with `tnum`, optional strikethrough original price in 14/400 muted, "Save $X" callout in 14/600 ink, in-stock-at-store pill in green, optional "My Best Buy Plus member price" tint pill, "Add to Cart" primary blue pill anchored bottom of tile. **`pdp-buy-box`** — sticky right-rail card on PDP. White surface, 8px radius, 1px `#d8d8d8` border, buy-box shadow (`rgba(0,0,0,0.08) 0 4px 12px`), 24px padding. Stack from top: `price-display` (32/700) with optional strikethrough and "Save $X" green callout, "Was $X.XX" muted, member-price tinted pill, fulfilment radio group (Shipping, Pickup, Same-Day Delivery, In-Store), ZIP-code input for store availability, "In stock at Mall of America" green pill, quantity stepper, full-width blue "Add to Cart" primary pill, outline "Save for Later" secondary pill, "Add Geek Squad protection (from $9.99/mo)" upsell collapsible. **`comparison-row`** — striped comparison-table row. Odd rows white, even rows `#f4f4f4`. First column sticky-left holds the spec label in 14/500 ink; subsequent columns hold the spec values for each compared product in 14/400 ink with `tnum`. The header row pins to top on scroll. This is Best Buy's signature spec-grid — the table customers actually came to read. **`promo-banner`** — full-width hero banner. Deep Best Buy Blue (`#0046be`) ground, white display copy in 56–80/700 with negative tracking, optional yellow accent flash (a single word or callout in `#fff000`), white outline CTA pill or white-fill CTA with brand-blue text. Used for top-of-homepage event banners. **`geek-squad-card`** — service-overlay card. Black (`#000000`) ground, white display copy, occasional orange (`#ff6c00`) accent on icons or CTAs, 8px radius, 24px padding. Visually distinct from the main commerce surface — when this card appears, the user knows they have crossed into service-aisle territory. **`editorial-card`** — content-marketing card (Best Buy Magazine, buying guides). White surface, 8px radius, 16px padding, 16:9 hero image, eyebrow in 11/700 uppercase tracked, h3 title in 24/600, body in 16/400 muted. ### Badges, Tags, Pills **`in-stock-pill`** — soft green (`#e6f4ea`) fill, success-green (`#118738`) text in 13/600, 9999px radius, 4×10px padding. "In stock at [Store Name]" or "Available for Pickup today". **`low-stock-pill`** — soft amber (`#fff4e5`) fill, warning-amber (`#b35900`) text in 13/600, 9999px radius. "Only 2 left at Mall of America". **`member-badge`** — soft blue (`#e5edf9`) fill, brand-blue (`#0046be`) text in 11/700 uppercase, 9999px radius. "MY BEST BUY PLUS" — sits anchored top-left of qualifying product tiles or inline next to member prices. **`deal-tag`** — brand-blue (`#0046be`) fill, white text in 11/700 uppercase, 4px radius. "DEAL", "TOP DEAL", "FLASH SALE". Best Buy uses brand blue (not yellow) for default deal tags — the yellow stays reserved for the logo mark and the rare sale-event CTA. **`new-tag`** — ink (`#1d252c`) fill, white text in 11/700 uppercase, 4px radius. "NEW" — anchored top-left of newly-launched SKU tiles. **`exclusive-tag`** — member-platinum (`#5c4ca2`) fill, white text in 11/700 uppercase. "MEMBER EXCLUSIVE". ### Inputs / Forms **`text-input`** — white surface, 1px `#9e9e9e` hairline, 8px radius, 44px height, 10×12px padding. Stacked label above in `label` (13/500). On focus the border thickens to 2px Best Buy Blue. **`search-bar`** — masthead search. Input + attached button. Input has white fill, 1px `#9e9e9e` hairline, 8px radius on left only, 40px height. Submit button is brand-blue fill with white magnifier icon, 8px radius on right only, joined seamlessly to the input. On focus the input border thickens to 2px Best Buy Blue and the submit button deepens to hover-blue. **`select`** — same look as `text-input` with a chevron indicator. **`radio`** — 20×20px circle, 2px `#9e9e9e` border, 8px brand-blue fill dot on selection. **`checkbox`** — 20×20px square, 4px radius, 2px `#9e9e9e` border, brand-blue fill with white check on selection. **`quantity-stepper`** — 3-cell row: minus button, numeric input (centred, `tnum`), plus button. Each cell 40×40px with 1px hairline between, 8px outer radius. The stepper sits on the PDP buy-box above the Add to Cart CTA. ### Navigation **`utility-bar`** — slim 32px band at the top of every page, dark `#1d252c` ground, white text in 12/500. Holds "Order Status", "Saved Items", "Account", "Cart Total" right-aligned, "Find a Store" left-aligned. The presence of this dark band above the masthead is a Best Buy signature — it contains all the utility surface that would otherwise crowd the main masthead. **`masthead`** — full-width white bar with a 1px `#d8d8d8` bottom hairline, 64px height. Yellow price-tag logo mark flush left at 36px. Search bar centred (~620px wide). "Sign In", "Cart" utilities flush right with the brand-blue cart icon showing item count badge. **`sub-nav`** — slim 48px band beneath the masthead, white fill, 1px hairline bottom. Holds department links: "Deals", "TV & Home Theater", "Computers", "Cell Phones", "Appliances", "Audio", "Video Games", "Smart Home", "Geek Squad". 14/500 ink labels with `:hover` flipping to brand blue + underline. **`mega-menu-flyout`** — opens from category dropdown; white surface, 8px radius, 1px hairline, hover-card shadow. Three-column nav of category trees with 14/500 ink labels and a featured "Top Deal" tile in the right column. **`breadcrumb`** — `text-muted` (`#54646c`) with `>` separators, 13/500. Last item bolded in ink. ### Star Rating **`star-rating`** — 5-icon row, fill `#ffd200` (warm rating yellow) for filled, `#d8d8d8` for empty. Half-stars rendered with clipped half-fill. Followed by a brand-blue link review count: "(2,847)". The choice of warm rating yellow (not brand yellow `#fff000`) is deliberate — stars must read as ratings, not as branded elements. ### Modals & Toasts **`modal`** — centred dialog over a 50%-opacity ink scrim. White surface, 12px radius (slightly more relaxed than the 8px cards), 1px hairline border, modal shadow (`rgba(0,0,0,0.16) 0 8px 24px`). Close X anchored top-right. **`toast`** — bottom-centre notification. White fill, 8px radius, 1px hairline, ink text, 16×24px padding, optional brand-blue or success-green left accent bar. ## 5. Layout Principles ### Spacing System - Base unit: **4px** - Scale: `0 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96` - Section padding (vertical): **48–80px** between major bands — Best Buy holds a middle position between Target's 64–96px breath and Walmart's 32–48px density - Card internal padding: **16px** for product tiles; **24px** for PDP buy box and Geek Squad cards; **40–64px** for promo banner copy - Gutters: **16px** between product tiles in grid view (tighter than Target's 24px because tiles carry more metadata); **48–64px** between major page bands; **8px** between adjacent CTAs in the buy-box stack ### Grid & Container - Max content width: **1280px** centred - Homepage: 4-column promo grid at desktop, with featured cards spanning 2 columns; "Top Deals" 5-up product carousel below - Search results: **4–5 column** product grid at desktop with 16px gutters; left-rail filter sidebar at ~240px wide - PDP: 3-column at desktop — gallery left (~50%), spec/description centre (~25%), buy box right (~25%); specs and reviews stack full-width below - Compare page: variable column count (2–4 SKUs), with sticky-left spec-label column - Footer: 5-column link list at desktop with the My Best Buy membership banner above and Total Tech promotion below ### Whitespace Philosophy Best Buy gives every section moderate breathing room — 48–80px between major bands at desktop. The page reads as **technical-catalogue editorial**, denser than Target but more spacious than Walmart. Inside each band, density is high by design — product grids run 4–5 across with 16px gutters because comparison-shoppers benefit from seeing more tiles per viewport. The compromise: tighter horizontal density, generous vertical band separation. Within a tile, the metadata stack uses 8px vertical rhythm to keep the rating, price, savings callout, and CTA all legible in a 240×360px area. ### Section Cadence Best Buy alternates between **white bands** (default body, product grids, footer, sub-nav) and **two punctuation surfaces**: deep-blue promo banners (full-width Best Buy Blue ground with white display copy and optional yellow accent) and black Geek Squad service-overlay cards (which appear as self-contained rectangles inside white bands, not as full-bleed sections). The page rhythm reads: utility bar → masthead → sub-nav → blue hero band → white product grid → editorial card row → white product grid → Geek Squad upsell card → blue trust band → footer. The visual rhythm is more pulse-driven than Target's photo-then-grid alternation. ## 6. Shapes & Radius Scale | Tier | Value | Use | |------|-------|-----| | Micro | 2px | Dense table corners, tight inline badges | | Small | 4px | Deal tags, savings callouts, NEW eyebrow tags | | Standard | 8px | Product tiles, CTAs, inputs, dropdowns, mega-menu, Geek Squad cards | | Comfortable | 12px | Modals, toast notifications, larger feature cards | | Featured | 16px | Hero promo cards, editorial covers | | Pill | 9999px | Filter chips, member badges, in-stock pills, low-stock pills | Best Buy's signature is the **8px rectangular discipline** — CTAs are 8px radius rectangles, not pills (Target) or super-pills (Walmart). The choice reads as serious and technical, in keeping with the electronics-retail register. Pills are reserved for non-CTA chips (filter selections, status pills, member badges) where the rounded shape signals "filter / status / tag", not "primary action". There are no compound radii. ## 7. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow | Body, masthead, footer, all editorial bands (~90% of surfaces) | | 1 — Hover Card | `rgba(0,0,0,0.08) 0 2px 8px` | Product tiles on hover, mega-menu, dropdowns | | 2 — Buy Box | `rgba(0,0,0,0.08) 0 4px 12px` | Sticky PDP buy-box, prominent comparison-table headers | | 3 — Modal | `rgba(0,0,0,0.16) 0 8px 24px` | Centred dialogs | | 4 — Scrim | `rgba(0,0,0,0.5)` | Modal backdrop | ### Shadow Philosophy Best Buy stays mostly flat with two functional elevations — a soft hover lift on product tiles and a slightly heavier rest-state shadow on the sticky PDP buy-box. The buy-box shadow exists to separate it from the page when the user scrolls past the gallery; the hover-card shadow exists to confirm tile focus during keyboard navigation. Depth comes from **the white-on-white surface separation** (1px hairline borders), **the deep-blue promo bands**, and **the black Geek Squad cards** — not from layered atmospheric shadows. The brand position: shadows should be functional, not decorative. ## 8. Interaction & Motion ### Easing - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover, focus, colour transitions - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry, mega-menu flyout, sticky buy-box pinning ### Durations | Bucket | Value | Use | |--------|-------|-----| | Fast | 150ms | Hover colour swap, focus ring fade-in, CTA depth | | Standard | 240ms | Card hover lift + border darken, modal enter, mega-menu fade | | Slow | 320ms | Hero carousel slide, sticky buy-box pin animation | ### Per-Component Recipes - **CTA hover**: background transitions from `#0046be` to `#003795` over 150ms. No transform — Best Buy keeps the CTA geometry steady so the cursor target doesn't shift. - **CTA press**: deepens further to `#002a73` for 150ms on `:active`. - **Product card hover**: 1px transparent border becomes `#d8d8d8` and shadow appears (`rgba(0,0,0,0.08) 0 2px 8px`) over 200ms. The image holds steady (no scale) — Best Buy keeps product geometry true so customers can read screen sizes accurately even mid-hover. - **Search-bar focus**: 2px brand-blue ring fades in over 200ms. - **Mega-menu flyout**: 240ms ease-out fade + 4px slide-down from the sub-nav. - **Hero carousel**: auto-advance every 8s with 320ms ease-out slide. Pause on hover or keyboard focus. - **Modal enter**: scrim fades in over 200ms, then dialog translates from `translateY(8px) opacity(0)` to `0/1` over 240ms emphasized. - **Sticky buy-box pin**: when the user scrolls past the gallery, the buy-box pins with a 240ms ease-out shadow appearance. - **In-stock pill appearance**: when the user enters a ZIP code, the in-stock pill fades in over 200ms. ### Page Transitions Page-to-page navigation uses no transition. Best Buy prioritises perceived speed — for technical-spec buyers comparing products across tabs, instant page rendering is the priority. ### Reduced Motion Respects `prefers-reduced-motion: reduce`. Card hover lift suppresses (only border darken remains). Hero carousel auto-advance pauses entirely. Modal slide degrades to opacity-only. Sticky buy-box pin appearance degrades to instant. ## 9. Accessibility & A11y ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | #1d252c ink on #ffffff canvas | 14.8 | AAA | | #ffffff on #0046be CTA | 8.6 | AAA | | #0046be link on #ffffff | 8.6 | AAA | | #54646c muted on #ffffff | 7.4 | AAA | | #118738 in-stock on #e6f4ea | 5.1 | AA | | #1d252c on #fff000 logo mark | 18.5 | AAA | | #ffffff on #003795 CTA hover | 11.0 | AAA | | #b35900 low-stock on #fff4e5 | 4.7 | AA | | #c91432 error on #ffffff | 6.7 | AAA | ### Focus Indicators Focus ring is **2px solid `#0046be`** (Best Buy Blue) with 2px outline-offset. Every focusable element gains the brand-blue ring on `:focus-visible`. The brand blue's high contrast on white (8.6:1) means the focus ring is clearly visible without requiring a separate accent colour — the brand-blue ring is functionally legible against every page surface. ### ARIA Patterns - **Search bar**: `role="search"`. Input has `aria-label="Search BestBuy.com"`. The attached submit button has `aria-label="Submit search"`. - **Product card**: entire tile wrapped in `` with verbose `aria-label` — "Sony 65-inch Bravia 7 4K HDR Smart TV, 4.6 stars, 2,847 reviews, $1,299.99, save $200, in stock at Mall of America". - **Star rating**: text-equivalent (`aria-label="4.6 out of 5 stars, 2,847 reviews"`). - **Mega-menu flyout**: `role="menu"` with `role="menuitem"`; arrow keys navigate, Escape closes, Tab moves out. - **Add-to-cart toast**: `role="status"` with `aria-live="polite"`. - **PDP fulfilment radios**: `role="radiogroup"` with `aria-label="How to get this item"`. - **Comparison table**: `` with proper `
` and ``; sticky-left labels carry `scope="row"`. - **In-stock pill**: `aria-live="polite"` so the screen reader announces stock status updates when ZIP code changes. ### Keyboard Navigation - Utility bar → masthead logo → search input → cart → sub-nav → primary content → footer in document order - Mega-menu: arrow keys navigate, Esc closes, Tab moves out - PDP: Tab through gallery → variant selector → fulfilment radios → ZIP input → quantity stepper → Add to Cart → Save for Later → Geek Squad upsell - Compare page: arrow keys move horizontally across SKU columns inside the spec-grid - Search results: Tab through tiles in document order; arrow keys disabled (would conflict with screen reader virtual cursor) ### Screen Reader Hints Verbose `aria-label` on all icon-only buttons. The cart icon has `aria-label="Cart, 3 items, total $1,847.50"`. The wishlist heart has `aria-label="Add to wishlist"` or `aria-label="Remove from wishlist"` based on state. The compare-toggle has `aria-label="Add to compare, 2 of 4 selected"`. ### Reduced Motion All transitions degrade to opacity-only or instant. Card hover lift suppresses (border darken remains). Hero carousel auto-advance pauses. Modal slide degrades to opacity-only. Sticky buy-box appearance is instant rather than animated. ## 10. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px | Utility bar hides; masthead collapses to logo + cart + hamburger; search bar moves to its own row beneath; product grid 2-up; PDP buy-box becomes a sticky bottom bar; comparison table scrolls horizontally | | Tablet | 640–1024px | Full masthead with search; sub-nav scrolls horizontally; product grid 3-up; PDP buy-box stacks beneath gallery | | Desktop | 1024–1280px | Sub-nav with all department links; product grid 4-up; PDP returns to 3-column with sticky buy-box | | Wide | 1280–1536px | Content caps at 1280px; product grid 5-up; comparison table holds up to 4 SKUs side-by-side | ### Touch Targets - Primary CTAs: 44px height — meets AA - Search bar input and submit button: 40×40px — borderline AA, compensated by 8px inner padding - Product tile: entire 240×360px tile is tappable - Quantity stepper: 40×40px cells — meets AA - Filter chips: 32px height with 16×8px padding — meets AA via padding ### Collapsing Strategy - Utility bar: hides entirely below 640px — its functions migrate to a hamburger menu - Masthead: utilities (account, store-locator) hide below 640px; only logo + cart + hamburger remain - Search bar: jumps from inline to its own row below 1024px - Sub-nav: becomes a horizontal-scroll bar of department chips below 1024px - Product grid: column count drops cleanly 5 → 4 → 3 → 2; gutters compress 16 → 12px - PDP: 3-column splits to single-column stack below 1024px; buy-box becomes sticky bottom bar with collapsed fulfilment selector - Comparison table: horizontal scroll with sticky-left spec-label column below 1024px ### Image Behavior Product thumbnails use `aspect-ratio: 1/1` with `object-fit: contain` (Best Buy prefers `contain` because products are SKU-photographed on white seamless and geometry matters — a customer comparing two TVs needs to see relative panel sizes accurately). Editorial hero bands and category-landing hero images use `object-fit: cover`. Geek Squad cards use `cover` for human-portrait imagery. ### Container Queries Used in the PDP buy-box: when the right rail narrows below ~340px, the fulfilment radio group collapses to a single radio with a "Change" link, and the quantity stepper shrinks to 36×36px cells. ## 11. Content & Voice ### Tone Helpful-expert — the brand voice is "the friend who actually knows the difference between OLED and QLED." Best Buy's tagline trajectory ("Expert Service. Unbeatable Price." → "Let's talk about what's possible") anchors the brand position: technically competent, accessible, never condescending. Headlines lead with capability ("Let's talk about what's possible", "More tech, more savings") rather than discount language. The voice is more service-forward than Walmart, less aspirational than Apple, more technically literate than Target. ### Microcopy Patterns - **Button verbs**: "Add to Cart", "Check Stores", "Pick it up", "Sign In", "Continue to Checkout", "See Details" — direct and outcome-named - **Error message recipe**: `[What went wrong] + [How to fix]` — e.g., "Enter a valid ZIP code to see store availability and delivery options." - **Success confirmations**: "Added to cart", "Saved for later", "Order placed" — short, outcome-named - **Field labels**: short and technical — "ZIP Code", "Email Address", "Card Number" - **Stock urgency**: "Only 2 left at Mall of America" — names the local context (the actual store, not a generic warehouse) - **Member-tier framing**: "Save $50 with My Best Buy Plus — Try free for 14 days" — names the saving, the membership, and the trial ### Empty States Empty cart: "Your cart is empty. Browse today's deals or sign in to see saved items." — friendly + dual action. Empty saved items: "Save items to compare later. Tap the heart on any product to save it here." — instructive. Empty search: "We couldn't find anything matching '[query]'. Check your spelling or browse by category." — names cause + alternative. Empty comparison: "Add up to 4 products to compare. Look for the 'Compare' link on any product page." — names the limit + the affordance. ### CTA Verb Conventions - Primary: **"Add to Cart"** (default), **"Check Stores"** (in-store availability), **"Pick it up"** (in-store pickup), **"Sign In"**, **"Continue to Checkout"** - Membership: **"Try My Best Buy Plus free for 14 days"** — names the membership and the trial explicitly - Save: **"Save for Later"** (Best Buy uses "Save for Later" rather than "Wishlist" — the language is shopping-list, not aspiration) - Compare: **"Add to Compare"** — named affordance, sets up the comparison-table flow - Service: **"Schedule Geek Squad"**, **"Add Geek Squad Protection"** — names the service brand explicitly - Tertiary: **"See Details"**, **"See all reviews"**, **"Compare similar items"**, **"Show more"** - Avoided: "Submit", "Click here", "Buy now" alone (Best Buy prefers "Add to Cart" → checkout flow) ## 12. Dark Mode & Theming **Light-only on the public web.** BestBuy.com is light-only. The Best Buy mobile app respects system dark mode (deep neutral surface, white text, Best Buy Blue unchanged), but the web storefront stays white. The brand position: product photography is colour-graded for white seamless backdrops, the comparison-table spec-grid relies on the white canvas for legibility, and the chromatic identity (yellow mark + blue CTA on white) depends on the white surface. A dark-mode rendering would invert the blue-on-white CTA to white-on-dark and would compromise the brand recognition the yellow mark earns at scale. The lone "dark surfaces" inside the page are: - The slim utility bar at the top of every page (dark `#1d252c` ground, white text in 12/500) - Geek Squad service-overlay cards (black ground, occasional orange accent) - The footer base (deep `#1d252c` ground with white text and brand-blue links) These act as **functional dark accents** rather than a dark theme — they delineate utility surface, service surface, and footer from the main commerce body. ## 13. Lineage & Influences Best Buy's visual lineage runs through three retail traditions: the **mid-century yellow price-tag mark** (the brand's logo is literally a hanging price tag, adopted in the 1989 rebrand that retired the original "Sound of Music" wordmark, and the yellow tag has barely changed in 35 years); the **electric-blue trust signalling** common to consumer-tech and finance categories (IBM Blue, Ford Blue, Visa Blue, American Express Blue — colours that signal technology and reliability simultaneously); and the **big-box comparison-grid** discipline pioneered by mid-1990s Circuit City and refined into a digital-native form after Best Buy outlived that peer in 2009. The comparison-table surface — the side-by-side spec grid that customers actually came to read — is the load-bearing UI of the storefront. Where Target leans on photographic editorial and chromatic restraint, and Walmart leans on density and yellow accents, Best Buy holds the middle ground — bold sans typography, generous comparison surface, blue-trust CTAs, and the yellow mark used sparingly enough that it still feels like a stamp rather than a wash. The Geek Squad sub-brand (black ground, orange accent, white display copy) sits as a self-contained service-overlay system inside the storefront — visually distinct, never bleeding into the main commerce surface. It functions as the service-aisle of the digital store, the place customers go when they need a human expert rather than a SKU. What Best Buy rejects: photographic-first hero design (would compromise spec-driven comparison), super-pill CTAs (would soften the technical register), saturated yellow washes (would dilute the price-tag mark), dark mode on the public web (would invert brand recognition), and gratuitous animation (would distract from comparison density). The brand position is **helpful expertise** — Best Buy doesn't need to shout because the yellow mark and the spec grid already do the work of trust. **Influences:** - Target — big-box retail peer with stronger brand discipline; Best Buy borrows the white-canvas + single-brand-colour playbook but trades Bullseye red for electric blue, [target.com](https://www.target.com) - Apple — premium electronics retail standard; large product photography, generous PDP spacing, Helvetica-class neutrality, [apple.com](https://www.apple.com) - Costco — warehouse retail peer; dense product information, member-tier visual branding, comparison-friendly stacks, [costco.com](https://www.costco.com) - Walmart — big-box direct competitor; Best Buy adopts the pill-search masthead and 4-up product grid but rejects the saturated yellow wash, [walmart.com](https://www.walmart.com) - IBM — electric-blue trust-signalling lineage; the same chromatic intent (technology + reliability) that powered IBM's 1972 mark and Best Buy's 1989 rebrand, [ibm.com](https://www.ibm.com) - Circuit City legacy — mid-90s big-box electronics-retail forebear; Best Buy outlived this peer in 2009 and absorbed the comparison-grid discipline into a digital-native form - Helvetica Neue — typographic neutrality lineage; Best Buy's Human BBY Web is a Pangram-class custom sans whose fallback is Helvetica Neue, with shared design intent - Pangram Pangram Foundry — type foundry whose grotesque/neogrotesque catalogue (Neue Montreal, Manrope, Inter-adjacent forms) defines the contemporary big-tech sans aesthetic Best Buy's custom typeface descends from ## 14. Do's and Don'ts **Do** - Reserve Best Buy Yellow (`#fff000`) for the price-tag logo mark and rare sale-event surfaces — the yellow is a stamp, not a wash - Use Best Buy Blue (`#0046be`) for every primary CTA, every link, every focus ring, every in-stock confirmation, every member-tier accent - Render display copy at 32–80px / 700 with negative tracking (-0.012em to -0.03em) - Hold an 8px rectangular discipline for CTAs, cards, and inputs — pills are reserved for chips and status pills - Use `object-fit: contain` on product thumbnails — geometry matters for spec-driven buyers - Surface comparison-table density: striped rows, sticky-left spec labels, `tnum` on every spec - Use tabular numerals on every price, spec, rating count, and order ID - Render star ratings in warm yellow (`#ffd200`) on grey — never in brand yellow (`#fff000`) - Keep Geek Squad surfaces self-contained as black cards with orange accents — never bleed into the main commerce body - Pin the PDP buy-box to the right rail with a soft buy-box shadow — the rest-state lift signals "this is your action surface" - Use the dark utility bar at the top of every page to contain utility surface (Order Status, Saved Items, Account) - Name the local context in stock urgency — "Only 2 left at Mall of America" reads as honest, "Only 2 left" reads as manipulative **Don't** - Don't wash the page in Best Buy Yellow — the saturated yellow dilutes the price-tag mark and reads as Walmart, not Best Buy - Don't use super-pill (9999px) CTAs — the 8px rectangle is the brand discipline - Don't use `object-fit: cover` on product thumbnails — cropping screen sizes misleads comparison-shoppers - Don't use yellow or gold for star ratings — warm rating yellow (`#ffd200`) on grey is the rule - Don't bleed Geek Squad black-and-orange into the main commerce surface — keep service surfaces inside dedicated cards - Don't add a separate link colour — links share the brand blue - Don't animate product image hover with scale or transform — geometry must stay true for spec buyers - Don't tighten gutters below 16px on product grids — the metadata stack needs the breathing room - Don't render Add to Cart in any colour other than Best Buy Blue (`#0046be`) — the colour is the affordance - Don't run dark mode on the public web — the brand recognition depends on the white canvas and blue-on-white CTA - Don't use italic or oblique — the typeface ships them but the storefront never uses them - Don't drop the utility bar — its dark presence at the top of every page is a Best Buy signature ## 15. Agent Prompt Guide ### Quick Color Reference ``` Canvas: #ffffff Page Floor: #f7f7f7 Ink: #1d252c Best Buy Blue: #0046be Brand Hover: #003795 Brand Active: #002a73 Best Buy Yellow: #fff000 Link: #0046be Border: #d8d8d8 Muted: #54646c Success Green: #118738 Rating Yellow: #ffd200 Geek Squad: #000000 / #ff6c00 ``` ### Example Component Prompts - "Create a Best Buy-style Add to Cart button: a 44px-tall 8px-radius rectangle with Best Buy Blue (`#0046be`) fill, white text in Human BBY Web (or Helvetica Neue fallback) 16/600, 12×20px padding. Hover deepens to `#003795`. Active deepens to `#002a73`. Focus shows a 2px brand-blue ring with 2px outline offset." - "Build a Best Buy masthead: full-width white bar with a 1px `#d8d8d8` bottom hairline, 64px tall. Above it, a 32px dark `#1d252c` utility bar with white 12/500 text holding 'Order Status', 'Saved Items', 'Account', and right-aligned cart total. The masthead itself: yellow price-tag logo mark (`#fff000`) flush left at 36px tall, search bar centred (~620px wide, 40px tall, 8px radius, white fill with 1px `#9e9e9e` border, attached brand-blue submit button on the right with a white magnifier icon), 'Sign In' and 'Cart' utilities flush right in Human BBY Web 14/500 ink, with a brand-blue cart-count badge." - "Design a Best Buy product card: white surface, 8px radius, 16px padding, 1px transparent border that turns `#d8d8d8` on hover. Stack: 1:1 thumbnail with `object-fit: contain` (true SKU geometry on white seamless), product title in 16/500 ink (max 2 lines, ellipsised), 5-star row (warm yellow `#ffd200` filled, `#d8d8d8` empty) + review count as brand-blue link, current price in 20/700 with `tnum`, optional strikethrough original price in 14/400 muted, 'Save $X' callout in 14/600 ink, soft-green in-stock pill ('In stock at Mall of America' in `#118738` text on `#e6f4ea` background), optional 'MY BEST BUY PLUS' member badge in `#0046be` text on `#e5edf9` background, and a full-width brand-blue Add to Cart button anchored at the bottom." - "Build a Best Buy comparison-table row: alternating white and `#f4f4f4` row stripes. First column is sticky-left and holds the spec label in 14/500 ink ('Screen Size', 'Resolution', 'Refresh Rate'); subsequent columns hold spec values for each compared product in 14/400 ink with `tnum` numerals. The header row pins to top on scroll. Up to 4 SKUs side-by-side at desktop, horizontal-scroll with sticky label below 1024px." - "Design a Best Buy PDP buy-box: sticky right-rail card, white surface, 8px radius, 1px `#d8d8d8` border, soft buy-box shadow (`rgba(0,0,0,0.08) 0 4px 12px`), 24px padding. Stack from top: large price in 32/700 with `tnum` ('$1,299.99'), strikethrough '$1,499.99' in 14/400 muted, 'Save $200' green callout, 'MY BEST BUY PLUS member price $1,249.99' tinted blue pill, fulfilment radio group (Shipping, Pickup, Same-Day Delivery, In-Store), ZIP-code input, soft-green 'In stock at Mall of America' pill, quantity stepper (40×40 cells), full-width brand-blue Add to Cart pill, outline brand-blue Save for Later pill, collapsible 'Add Geek Squad Protection from $9.99/mo'." - "Create a Geek Squad service-overlay card: black (`#000000`) ground, white display copy in Human BBY Web 24/600, occasional orange (`#ff6c00`) accent on the icon and CTA, 8px radius, 24px padding. Example: a card with a Geek Squad agent illustration, headline 'Get expert help from Geek Squad', body 'Setup, support, and protection plans starting at $9.99/mo' in 16/400 white, and a brand-blue Add to Cart-style CTA labelled 'Schedule a service'." ### Iteration Guide 1. **Yellow is a stamp, blue is the work.** Best Buy Yellow (`#fff000`) belongs to the price-tag logo and rare sale-event surfaces. Best Buy Blue (`#0046be`) does the actual UI work — every CTA, every link, every focus ring. If your composition has yellow CTAs everywhere, you've broken the brand discipline. 2. **8px rectangles, not pills.** CTAs are 8px-radius rectangles. Pills are reserved for filter chips, status pills, and member badges. If your Add to Cart is a super-pill, you've drifted toward Walmart. 3. **`object-fit: contain` on products.** Geometry matters for spec-driven comparison. If your TV thumbnail crops the bezel, you've broken the trust contract with the comparison-shopper. 4. **Density is the feature.** 4–5-up product grids with 16px gutters. Rich metadata per tile — model, screen size, rating, in-stock status. If your grid feels sparse, you've underdelivered on the comparison promise. 5. **The comparison table is load-bearing.** Striped rows, sticky-left spec labels, `tnum` on every cell. This is the page customers actually came to read. Don't underbuild it. 6. **Geek Squad lives in its own black box.** When the service-overlay appears, the lighting changes. Don't bleed black-and-orange into the main commerce body. 7. **Tabular numerals on everything numeric.** Prices, specs, ratings, order IDs. `tnum` is non-negotiable inside the comparison grid. 8. **Helpful-expert voice.** Headlines lead with capability ("Let's talk about what's possible"), not discount language ("LOWEST PRICES EVER"). The voice is the friend who knows the difference between OLED and QLED. --- *Theme-toggle audit: score=0, signals=[none]*