UI Skillbook
2

Best Buy DESIGN.md

Brands

Electronics retail with strong blue-yellow branding and high-visibility merchandising. Best Buy's public site uses a vivid cobalt blue foundation, bright yellow branding, white content surfaces, and dense retail…

Raw DESIGN.md

At a glance

Group
Brands
Main color
#0046beBlue design systems
Fonts
Human BBYSF Mono

Colors in this file

  • #dce5f5

    Unnamed

  • #0046be

    Unnamed

  • #fff200

    Unnamed

  • #111827

    Unnamed

  • #ffffff

    Unnamed

  • #f3f6fb

    Unnamed

  • #6b7280

    Unnamed

Electronics retail with strong blue-yellow branding and high-visibility merchandising. Best Buy's public site uses a vivid cobalt blue foundation, bright yellow branding, white content surfaces, and dense retail promotion modules.

1. Visual Theme & Atmosphere

Overall Aesthetic

Best Buy feels like electronics retail with big merchandising energy and high-contrast brand recognition.

Mood & Feeling

  • Promotional
  • Utility-focused
  • Mainstream retail
  • Tech-commerce
  • Bold

Design Density

High density. Promotions, product shelves, and categories are tightly packed.

Visual Character

  • Bright blue brand frame
  • Yellow labels and highlights
  • White promo cards
  • Dense merchandising modules

2. Color Palette & Roles

TokenHexRole
--bb-blue#0046BEPrimary brand anchor
--bb-yellow#FFF200Highlight / promo
--bb-white#FFFFFFCards and surfaces
--bb-surface#F3F6FBBackground
--bb-ink#111827Text
--bb-muted#6B7280Secondary text
--bb-border#DCE5F5Borders

3. Typography Rules

Font Stack

css--font-display: "Human BBY", "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Human BBY", "Inter", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Hero 50/700, H1 36/700, H2 28/700, Body 16/400, Small 14/400

Typography Philosophy

Use strong, retail-readable typography that supports promotions and category browsing.

4. Component Stylings

css.button-primary { background:#0046be; color:#fff; border:none; border-radius:999px; min-height:44px; padding:0 18px; font-weight:700; }
.button-secondary { background:#fff; color:#111827; border:1px solid #dce5f5; border-radius:999px; min-height:44px; padding:0 18px; }
.promo-card { background:#fff; border:1px solid #dce5f5; border-radius:16px; }
.badge { background:#fff200; color:#111; border-radius:999px; padding:6px 10px; font-weight:700; }

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48px

Layout Behavior

  • Prioritize promotions, deals, and categories
  • Keep retail shelves easy to scan
  • Use blue and yellow for strong brand recognition

6. Depth & Elevation

Best Buy uses retail-card separation more than premium shadow depth.

7. Do's and Don'ts

Do

  • Keep it promotional and immediately scannable
  • Use blue and yellow decisively
  • Preserve retail shelf and category clarity

Don't

  • Don’t over-minimalize it into boutique ecommerce
  • Don’t reduce promo emphasis too much

8. Responsive Behavior

Breakpoints

  • Mobile <768px
  • Tablet 768px-1023px
  • Desktop 1024px+

Responsive Rules

  • Stack promo modules and keep deal CTA visible
  • Preserve readable shelf structure

9. Agent Prompt Guide

textDesign this like Best Buy: bold electronics-retail UI with cobalt blue framing, yellow promo highlights, white merchandising cards, dense category browsing, and mainstream high-visibility commerce energy.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/bestbuy.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "bestbuy" })

Related Design.md files

Nokia

Brands · Inter

Connectivity-for-the-AI-era branding with cool gradients, dark technological depth, and clean industrial structure. Nokia’s current site uses bright blues and teals, dark network surfaces, and modular enterprise…

Fly.io

Brands · Inter

Edge compute design with terse developer confidence, dark machine surfaces, and globally distributed deployment clarity.

Runway

Brands · Inter

Creative AI video design with stark black-and-white brand discipline, cinematic media surfaces, and precise generation controls.

ASUS

Brands · TT Norms Pro

Personal computing with broad innovation energy. ASUS's current public site blends bright white merchandising surfaces, deep blue and black contrast areas, crisp product-family storytelling, and premium device…

Okta

Brands · Inter

Identity-platform design with clear blue actions, neutral enterprise surfaces, and accessibility-first structure. Okta’s Odyssey system aims for consistency, efficiency, and trust across authentication, admin, and…

Behance

Brands · Adobe Clean

Creative portfolio discovery with Adobe-adjacent polish, white gallery surfaces, and strong project framing. Behance's public site uses a white and light-gray base, dark text, blue Adobe-style action accents, and…

All Design.md filesBrowse by font