Best Buy Design System

Overview

Best Buy's homepage runs the entire chrome on a single physical-world primitive. Tag-as-system: the brand mark is a yellow rectangular price tag, the top-nav is the same cobalt blue that fills the tag's background, the promotional banners stamp condensed yellow display on a blue-to-teal gradient, and the "Ends 5/25" date chip is a tag-shaped yellow pill — every yellow rectangle on the page reads as a price label. Where Amazon trusts a tiny smile-arrow and Walmart leans on a spark mark over pure white, Best Buy paints the chrome in retail-banner saturation and treats the logo geometry as a recurring component.

The brand voltage is cobalt blue ({colors.primary} — #0457c8). It fills the top-nav band, carries every link and price label as text (108 occurrences), and forms the left end-stop of every promotional gradient. Above the fold the page exposes two flat-band devices stacked vertically: a cobalt utility-nav strip at 30px tall ("Yardbird · Best Buy Outlet · Best Buy Business"), and the main 80px-tall cobalt nav holding the wordmark, hamburger menu, store-wide search, store locator, and cart. Below those two bands the cobalt steps aside for white surfaces, and the brand voltage becomes a link color rather than a fill.

Condensed weight 300 as the shout: the in-page promotional banner runs Human BBY Digital Condensed at 80px / weight 300 in highlighter yellow. Where most big-box retailers reach for weight 700+ condensed for sale headlines, Best Buy renders the loudest moment in the lightest condensed weight available. The result reads as confident retail muscle rather than panicked clearance. Body and chrome sit at 11-20px in Human BBY Digital at weights 400-600; there is no second display family below 80px.

Key Characteristics:

• Single brand voltage {colors.primary} (#0457c8) — 211 occurrences, fills the nav band and carries every link as text. Wired into 17 CSS custom-property aliases including --colorRolePrimary600 and --color-unstable-link-blue.
• Highlighter-yellow scarcity voltage {colors.scarcity-yellow} (#fff200) — 5 occurrences total, all inside promotional banners as price-tag chips, condensed display fill, or the wordmark interior. Never used as hover state, focus ring, or structural badge.
• Blue-to-teal promotional gradient — left end-stop {colors.primary}, mid {colors.promo-gradient-mid} (#2b4cb6), right end-stop {colors.promo-gradient-teal} (#7fd8ff) and a cyan top-right corner {colors.promo-gradient-cyan} (#a6e4ff). Reserved for the in-page promo billboards.
• Condensed display in light weight — {typography.display-xl} is 80px / weight 300 in {colors.scarcity-yellow}, a deliberately understated condensed treatment.
• Skeleton-first hydration — grey placeholder blocks at {colors.surface-2} (#e4e5e8) render before product modules resolve and form a captured part of the marketing chrome.
• Tag-shaped date chip — {component.date-tag} is a {rounded.sm} 4px yellow rectangle with 2x8 padding, holding "Ends 5/25" text in ink. It is the smallest instance of the tag motif on the page.
• Circular category pucks — the "Shop deals by category" rail uses {rounded.circle} 50% surfaces holding product photography over a grey backplate; the rail is the only place circular geometry appears.
• 8px base spacing unit with major tokens at 16 / 24 / 32px; the system has no 6px or 10px intermediates.
• White-pill primary CTA on cobalt — the hero "Shop now" button inverts the standard pattern by using {colors.canvas} fill with {colors.primary} text inside {rounded.full} rounding.

Colors

Brand

• Cobalt Primary ({colors.primary} — #0457c8): frequency 211. Used as text (108), border (103), background fill on the top-nav and inside promotional gradient end-stops. Wired in CSS as --colorRolePrimary600, --color-unstable-link-blue, --colorBgPrimary, --colorFgPrimary, and 13 other aliases. The single brand voltage — the load-bearing color for every link, price label, and the cobalt nav band.
• Cobalt Deep ({colors.primary-deep} — #013196): frequency 1 (in-page as a gradient stop). Wired as --color-bg-button-primary-dark. Reserved for hover and pressed states on the primary surface.
• Cobalt On-Nav ({colors.primary-on-nav} — #0046be): frequency 8 — 5 as background, 1 as text, 1 as border, 1 inside a gradient. Wired as --colorBgPrimaryHighlight. Used as the subtle hover and selection fill on items sitting on the cobalt nav band.

Promotional Gradient

• Promo Mid ({colors.promo-gradient-mid} — #2b4cb6): frequency 1. The middle stop of the blue-to-teal sale banner gradient — a slightly violet blue that bridges the cobalt left edge into the teal right edge.
• Promo Teal ({colors.promo-gradient-teal} — #7fd8ff): frequency 1. The right-end stop of the promotional gradient — a fresh aqua that reads as "summer tech" rather than as a secondary brand accent.
• Promo Cyan ({colors.promo-gradient-cyan} — #a6e4ff): frequency 1. The upper-right gradient corner — slightly lighter than the teal end-stop, only visible inside the largest promo card.

Scarcity

• Scarcity Yellow ({colors.scarcity-yellow} — #fff200): frequency 5 — 2 as text, 1 as background, 2 as border. Used only inside promotional contexts: the 80px condensed display headline ("MEMORIAL DAY SALE"), the tag-shaped date chip, and the yellow interior of the wordmark itself. Wired as --colorPaletteGold500 / --colorRoleHighlight500. The retail-banner voltage; never a structural color.

Text

• Ink ({colors.ink} — #040c13): frequency 1339 — 677 as text, 662 as border. The dominant text color across body paragraphs, h3 product titles, and price labels. Wired as --color-fg-base and --color-fg-dark.
• Ink Default ({colors.ink-default} — #030303): frequency 74 — 37 as text, 37 as border. The h2 section-heading and primary-button-text color. Wired as --colorFgDefault and --colorPaletteCharcoal900.
• Ink Soft ({colors.ink-soft} — #1d252c): frequency 28 — used for secondary text and input borders. Wired as --colorBrandTechBlack — the proprietary "Tech Black" rather than pure black.
• Ink Muted ({colors.ink-muted} — #3d3d3d): frequency 30, all as background fill on dark-mode footer surfaces.
• Muted ({colors.muted} — #70757d): frequency 2 — secondary metadata text under product titles.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 120 — 38 as background, 43 inside gradients (the white surface on which the cobalt nav and grey skeleton blocks sit). Wired into 50+ aliases as the default body floor.
• Surface-1 ({colors.surface-1} — #f3f4f6): frequency 23, all as background. The neutral grey backplate behind category-puck photography and the "Build your home" content cards.
• Surface-2 ({colors.surface-2} — #e4e5e8): frequency 145 — 43 as background, 13 as border, 86 inside gradients. The skeleton-placeholder color and the divider tone around product cards. Wired as --colorBgSurfaceMuted.

Hairline

• Hairline ({colors.hairline} — #c4c8cf): frequency 6, all as border. The thin rule above the footer and around the search input.
• Hairline Soft ({colors.hairline-soft} — #90959e): frequency 1 as border. The form-field outline color used on the search input and footer email signup.

Typography

Font Families

The system runs two proprietary families: Human BBY Digital for all chrome surfaces (nav links, body paragraphs, headings, buttons, captions), and Human BBY Digital Condensed for the single promotional shout — the 80px / weight 300 sale banner headline. Fallback stack walks "Human Fallback", Arial, Helvetica, sans-serif for the body family and "Human BBY Digital", sans-serif for the condensed.

The pairing is unusual for the retail category. Most big-box retailers (Walmart, Target, Costco) ship a single sans for everything; Best Buy isolates the condensed display to the promotional moment and lets the regular family carry the dense product catalog underneath. The result is a typographic gear-shift between editorial sale banner and dense inventory grid.

Hierarchy

Principles

Promotional display weight is 300. The 80px condensed headline at weight 300 is the editorial-confidence move — heavier condensed weights would read as panicked clearance. Body and chrome max out at weight 600 on h3 product titles; there is no 700+ tier on the captured page. Line-heights run tight (1.0-1.2x) on display and headings, looser (1.3-1.4x) on body — the chrome is dense by design, since the page sells inventory and every pixel that does not show a product photo is overhead.

Note on Font Substitutes

Human BBY Digital and Human BBY Digital Condensed are proprietary brand families. The closest open-source substitute for the body family is Inter at the same weights — its slightly looser counters read close to Human BBY at 13-14px chrome sizes. For the condensed display, Oswald at weight 300 or Barlow Condensed at weight 300 transfer cleanly to the 80px promotional treatment; Bebas Neue is closer in feel but sits at a single weight only.

Layout

Spacing System

• Base unit: 8px — appears 84 times in the captured page, the dominant gap value.
• Tokens: {spacing.xs} 2px · {spacing.sm} 4px · {spacing.base} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.2xl} 32px · {spacing.3xl} 40px.
• Top-nav padding: 8x16 on the main cobalt band (80px tall); 4x16 on the utility strip above (30px tall).
• Promo card padding: {spacing.xl} (24px) horizontal with 16px bottom; the headline sits at the optical center, the CTA pill floats right.
• Date-tag padding: 2x8 — the tightest spacing token on the page, used to keep the yellow chip compact enough to read as a tag.

Grid & Container

• Page max-width: ~1280px — the page is desktop-first, with promotional banners and product grids extending to the full container width.
• Promo cards above the fold: a 60/40 split — Memorial Day Sale on the left, a smaller Best Buy Plus subscription card on the right (~430px wide).
• Category puck rail: 7 visible circular pucks in a single horizontal row with a right-arrow scroller, each 80px circle on {colors.surface-1} backplate.
• Product card grids below: 3-up rows on desktop, each card on a white {colors.canvas} surface with a thin {colors.surface-2} border.
• Skeleton placeholders: render as horizontal grey blocks at the same width as the resolved cards — the layout is reserved before content arrives.

Rhythm

The page is structured as chrome → promo → category → inventory, with the cobalt nav stack accounting for ~110px of vertical space before any product content. Below the nav, two promotional bands sit at ~250px and ~270px tall respectively, then a category-puck rail at ~140px, then a dense inventory grid of product cards. The promotional bands are the only place the brand voltage carries the surface; everywhere else cobalt is reserved for links and the navigation chrome.

Elevation

The system has essentially no shadow tier. The captured page shows zero shadow occurrences for the brand color, and only sparing use of pure black at low opacity on the cobalt-nav drop. Cards lift from the canvas by {colors.surface-2} 1px borders rather than shadow halos; the promo banners sit flush against the white floor with no elevation effect.

• Flat (no shadow): every nav, promo card, category puck, product card, and footer band — 99% of surfaces.
• Border-as-elevation: {colors.surface-2} (#e4e5e8) carries the cell-divider role around product cards.
• Nav drop: the cobalt nav band sits flush at the page top with no shadow underneath — depth comes from the saturation contrast against the white body floor.

Shapes

The radius scale is small + pill + circle.

• {rounded.sm} 4px — the dominant radius (45 occurrences). Search input, date-tag, secondary buttons.
• {rounded.md} 8px — promotional cards and product cards (4 occurrences).
• {rounded.lg} 16px — larger feature blocks (19 occurrences).
• {rounded.full} 9999px — primary action buttons ("Shop now", "Join now") render as full pills (15 occurrences).
• {rounded.circle} 50% — the category-puck rail uses fully circular surfaces (31 occurrences).

There is no 12px or 20px middle tier. The scale skips from 8px straight to 16px, and the pill / circle treatment is reserved for tappable actions and category navigation. The radius binary signals interactivity: anything circular or pill-shaped is clickable, anything else is content.

Components

top-nav — The cobalt {colors.primary} band carrying the wordmark, hamburger menu, store-wide search, sign-in cluster, store locator, and cart. 80px tall, 8x16 padding, no border-radius. The single largest brand-voltage surface on the page.

utility-nav — A narrower cobalt strip sitting above the main nav, 30px tall with 4x16 padding. Holds the "Yardbird · Best Buy Outlet · Best Buy Business" sub-brand link cluster in white at {typography.body-sm}.

nav-link — Transparent fill, white text in {typography.nav-link} (13px / 400), 0x8 padding. The hamburger menu, store locator, cart label, and category links all use this baseline.

search-input — White {colors.canvas} fill with {colors.hairline-soft} 1px border, {rounded.sm} 4px radius, 0x12 padding, 44px tall. Sits in the center of the cobalt nav band, with a magnifying-glass icon button on the right edge.

promo-card-gradient — The signature in-page promo card. Blue-to-teal gradient fill ({colors.primary} → {colors.promo-gradient-mid} → {colors.promo-gradient-teal}), highlighter-yellow display text, {rounded.md} 8px radius, 24x24x16 padding. Holds the 80px condensed headline, a 1-line lead paragraph beneath, and a white-pill CTA centered on the right.

promo-card-light — The white companion card to the gradient promo. {colors.canvas} fill, {colors.surface-2} 1px border, {rounded.md} 8px radius, 24px padding. Holds the "my BEST BUY plus" subscription promo with a white-stroke "Join now" CTA.

hero-heading — The 80px condensed yellow display. Transparent background (sits on the promo card surface), {colors.scarcity-yellow} text, {typography.display-xl} (80px / weight 300 condensed). Width-capped at ~500px so the yellow runs at most across half the gradient.

section-heading — {typography.heading-lg} (20px / 500) in {colors.ink-default} (#030303). Used for "Shop deals by category" and other below-fold section heads.

body-paragraph — Default {colors.ink-default} running text at {typography.body-md}. The workhorse copy style.

body-paragraph-muted — {colors.ink-muted} variant at {typography.body-sm} for secondary captions.

button-primary — Inverted from convention: white {colors.canvas} fill, cobalt {colors.primary} text, full pill {rounded.full}, 8x24 padding, 36px height. "Shop now" on the gradient promo and "Join now" on the secondary promo. The white pill on cobalt is the most visually-dense element on the page.

button-secondary — Transparent fill with white text and a 1px white border. Same pill rounding and dimensions as the primary, used for nav-level secondary actions when on a cobalt surface.

button-text-link — Transparent background, {colors.primary} text at {typography.body-md} weight 500. The default in-body link style.

date-tag — The tag-shaped scarcity chip. {colors.scarcity-yellow} fill, {colors.ink-default} text at {typography.body-md}, {rounded.sm} 4px radius, 2x8 padding, 22px height. "Ends 5/25" is the canonical instance — the smallest tag-motif on the page.

category-puck — Fully circular {colors.surface-1} backplate, 80px wide, holding a product photo center-aligned. Sits in a horizontal scroll rail; the rail is the only place {rounded.circle} geometry appears.

card — White {colors.canvas} fill, {colors.surface-2} 1px border, {rounded.md} 8px radius, 16px padding. The default product-card surface, holding photo top, title middle, price bottom.

skeleton-block — {colors.surface-2} (#e4e5e8) fill rectangle at the layout-reserved width of the post-hydration component. No text, no border. Visible on every cold load; the system treats this as first-class chrome rather than a loading edge case.

text-input — White fill, ink text, 1px {colors.hairline-soft} border, {rounded.sm} 4px radius, 0x12 padding, 32px tall. Used for the footer email-signup form.

Do's and Don'ts

Do treat the {colors.scarcity-yellow} (#fff200) as exclusively price-tag-coded. The yellow appears only inside promotional contexts — the wordmark interior, the condensed sale headline, the date-tag chip. Using it as a hover state or focus ring breaks the "yellow means price" reading the entire system depends on.

Do run the cobalt-to-teal gradient ({colors.primary} → {colors.promo-gradient-teal}) only on in-page promotional cards. The structural chrome stays on flat surfaces — cobalt nav, white body, grey skeleton blocks. Gradient on the nav band would dilute the promo-card signal.

Do keep {typography.display-xl} at weight 300. The 80px condensed at the lightest available weight reads as confident retail muscle. Bumping to weight 700 turns the editorial sale headline into a panicked clearance shout.

Do render the skeleton placeholders at {colors.surface-2} (#e4e5e8) at full component-width. The grey block reserves the layout so the page does not reflow when product modules hydrate; rendering skeletons at a smaller width creates a visual jump on data arrival.

Don't use {colors.surface-2} (#e4e5e8) as a hairline border or for body text. It is a background-and-skeleton token (43 of 145 occurrences as background, 86 as gradient stops); the closest border-only token is {colors.hairline} (#c4c8cf). Mixing them creates an inconsistent visual weight on card edges.

Don't introduce a 12px or 20px middle radius tier. The system is small (4-8-16px) plus pill plus circle. A 12px corner reads as borrowed from a SaaS dashboard rather than from Best Buy's retail chrome.

Don't render the primary CTA as a filled cobalt pill. The hero pattern inverts the convention — {component.button-primary} is white fill with cobalt text on a cobalt or gradient surface. Filling the CTA with the same cobalt as its surface kills the contrast.

Don't use Human BBY Digital Condensed for any non-promotional surface. The condensed family is reserved for the 80px sale banner moment; running it at smaller sizes (24-40px) for sub-section heads turns the chrome cluttered and loses the gear-shift between editorial sale and dense inventory grid.

Known Gaps

• Hover and focus states: documented only for the primary CTA. Focus rings, active press tints, disabled fills, and validation glow are not exposed on the captured marketing surface.
• Dark mode: the captured page is light-only. A dark-mode token chain is declared in CSS (--colorBgSurfaceInverse, --colorBrandTechBlack) but does not render on the public homepage.
• Form input error states: the footer email-signup carries a resting state only. Error / validation styling lives inside the checkout flow and is not represented here.
• Sub-brand chrome: the utility nav names Yardbird, Best Buy Outlet, and Best Buy Business — each is a separate retail surface with its own token system that is not captured by this file.
• Motion: the category-puck rail scrolls horizontally with an arrow control, but the captured spec records the resting state only. Easing curves and snap behavior live in the live page runtime.
• Hydration timing: the skeleton-block tokens reflect the post-load steady state; the actual transition timing between skeleton and content is not part of this DESIGN.md.
• Promotional gradient direction: the captured gradient renders left-to-right; mobile and tablet breakpoints may flip to top-to-bottom but are not reflected in this spec.