<!--
ROLE: You are a senior product designer + frontend engineer pair.
TASK: Treat the DESIGN.md below as the SINGLE SOURCE OF TRUTH for visual style.
Every component you produce in this codebase must:
  • Reuse the color tokens declared in YAML frontmatter (no ad-hoc hex values)
  • Use the typography scale (display / h1 / h2 / body / label / mono) verbatim
  • Match the radius scale (button / card / pill) to the named tier
  • Honor the elevation table for shadows
  • Respect the motion section (durations, easings, reduced-motion)
  • Pass the contrast pairs in the accessibility section
INPUT: Project files at ${CWD}.
OUTPUT: Code, not paragraphs. Quote the relevant section number when you cite a token (e.g. "per §3 Typography Rules").
PRINCIPLE: A token used once is a one-off; a token used three times is a system. Prefer system fidelity over local cleverness.
-->

---
name: The Home Depot
tagline: Signature orange on white, Helvetica bold — hardware-aisle signage as a web storefront.
updated_at: 2026-05-27T23:16:12.405Z
published_at: 2026-05-27T23:16:12.405Z
author: webdesignhot
source_url: https://www.homedepot.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [retail]
tags: [light, retail, marketplace, sans, dense, utilitarian, industrial, hardware, e-commerce, diy]
preview_swatch: ['#ffffff', '#f96302', '#333333']
related: [costco, walmart, lowes]
description: 'The Home Depot''s storefront is the most literal translation of warehouse-aisle hardware retail to the web — a white canvas (`#ffffff`) anchored on the signature **Home Depot orange** (`#f96302`) that carries the brand mark, every primary CTA, every "Save" badge, and the Pro-tier accents. Type is **Helvetica Neue Bold (75)** at confident weights — utilitarian, industrial, the same letterforms hand-painted on aisle markers in every physical store since 1979. The page is engineered for the weekend DIYer planning a project and the contractor restocking a job site: dense product grids, room-and-project galleries, in-store-pickup emphasis, contractor-tier "Pro" branding, and "How-To" guidance threaded through every category. Buttons are square-ish (8px radius — not pill, never pill), shadows are minimal, savings callouts wear a flat orange band, and the chromatic discipline is a two-voltage system of orange and ink. The result is the most utilitarian home-improvement site in the category — visually identical, in spirit, to the laminated end-of-aisle signs and the orange aprons on every associate''s back.'


# 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: border-strong
colors:
  bg: '#ffffff'                  # default canvas
  bg-page: '#f5f5f5'             # alternate page floor — concrete-warehouse grey
  surface: '#ffffff'
  surface-soft: '#f5f5f5'        # disabled fields, alt row
  surface-strong: '#e6e6e6'      # divider band, dense filter rail
  surface-orange-soft: '#fef3eb' # softened orange wash — promo band ground
  surface-blue-soft: '#e8f0f7'   # Pro-tier informational surface
  surface-charcoal: '#333333'    # contractor-aisle dark band (footer, Pro chrome)
  surface-charcoal-deep: '#1a1a1a' # deeper contractor band
  masthead: '#ffffff'            # the chrome — white bar with orange brand mark
  masthead-band: '#f96302'       # the thin orange utility strip atop the masthead
  brand: '#f96302'               # signature Home Depot orange
  brand-deep: '#d65300'          # deeper orange for hover
  brand-active: '#a8420a'        # pressed state
  brand-soft: '#fef3eb'          # softened orange wash for surfaces
  pro-blue: '#00659e'            # Pro-tier brand blue — contractor accent
  pro-blue-deep: '#004870'       # Pro hover
  pro-blue-active: '#002f4d'     # Pro pressed
  text: '#333333'                # primary ink — slightly softer than pure black
  text-strong: '#000000'         # heading ink at maximum punch
  text-muted: '#595959'          # secondary metadata
  text-soft: '#7a7a7a'           # caption text
  text-on-brand: '#ffffff'       # white on Home Depot orange
  text-on-charcoal: '#ffffff'    # white on contractor charcoal
  link: '#3e7697'                # link blue — slightly muted, never competing with brand orange
  link-hover: '#1f4d6e'          # darker hover blue
  link-visited: '#5e2a8c'        # purple visited
  border: '#cccccc'              # default 1px hairline
  border-soft: '#e0e0e0'         # editorial divider
  border-strong: '#999999'       # focus state hairline
  border-input: '#7a7a7a'        # form input outline — slightly darker, utility feel
  rating-orange: '#f96302'       # star rating fill — same as brand orange
  rating-empty: '#cccccc'        # empty star
  savings-orange: '#f96302'      # "Save $50" / promo savings — brand orange
  pickup-green: '#007e34'        # "Free in-store pickup", "In Stock at Local Store"
  pickup-green-deep: '#005d26'   # hover on pickup CTAs
  pro-tag: '#00659e'             # "For the Pro" / "Pro Xtra" tag blue
  exclusive-tag: '#f96302'       # "Home Depot Exclusive" tag orange
  out-of-stock: '#7a7a7a'        # grey "Out of stock" tag
  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: '#007e34'             # in-stock confirmation green
  warning: '#cc6600'             # advisory amber
  warning-soft: '#fff5e6'
  danger: '#c01818'              # validation error — distinct from brand orange
  info: '#00659e'

typography:
  display:
    family: '"Helvetica Neue", "Helvetica Neue 75 Bold", Helvetica, Arial, sans-serif'
    weights: [700, 900]
    opentype-features: ['tnum']
  body:
    family: '"Helvetica Neue", Helvetica, Arial, sans-serif'
    weights: [400, 500, 700]
  mono:
    family: 'Menlo, Monaco, Consolas, "Courier New", monospace'
    weights: [400]
  scale:
    hero-banner:     { size: 56, weight: 900, lineHeight: 1.0,  tracking: '-1px',     family: display, opentype: ['tnum'] }
    display-hero:    { size: 48, weight: 700, lineHeight: 1.05, tracking: '-0.75px',  family: display }
    page-title:      { size: 32, weight: 700, lineHeight: 1.1,  tracking: '-0.5px',   family: display }
    section-head:    { size: 24, weight: 700, lineHeight: 1.2,  tracking: '-0.25px',  family: display }
    sub-section:     { size: 18, weight: 700, lineHeight: 1.25, tracking: '0',        family: body }
    product-title:   { size: 16, weight: 400, lineHeight: 1.4,  tracking: '0',        family: body }
    product-title-md: { size: 14, weight: 400, lineHeight: 1.43, tracking: '0',        family: body }
    body-md:         { size: 14, weight: 400, lineHeight: 1.43, tracking: '0',        family: body }
    body-sm:         { size: 13, weight: 400, lineHeight: 1.38, tracking: '0',        family: body }
    caption:         { size: 12, weight: 400, lineHeight: 1.33, tracking: '0',        family: body }
    micro:           { size: 11, weight: 400, lineHeight: 1.27, tracking: '0',        family: body }
    price-display:   { size: 36, weight: 700, lineHeight: 1.0,  tracking: '-0.5px',   family: body, opentype: ['tnum'] }
    price-product:   { size: 24, weight: 700, lineHeight: 1.0,  tracking: '-0.25px',  family: body, opentype: ['tnum'] }
    price-strikethru: { size: 14, weight: 400, lineHeight: 1.0,  tracking: '0',        family: body, opentype: ['tnum'] }
    price-savings:   { size: 18, weight: 700, lineHeight: 1.0,  tracking: '0',        family: body, opentype: ['tnum'] }
    button-cta:      { size: 14, weight: 700, lineHeight: 1.0,  tracking: '0',        family: body }
    nav-link:        { size: 14, weight: 700, lineHeight: 1.0,  tracking: '0',        family: body }
    badge:           { size: 11, weight: 700, lineHeight: 1.0,  tracking: '0.06em',   family: body, transform: uppercase }
    pro-tag:         { size: 12, weight: 700, lineHeight: 1.0,  tracking: '0.04em',   family: body, transform: uppercase }

radius:
  micro: 2
  sm: 4
  md: 8        # the default — most CTAs and inputs
  lg: 12       # cards, modals
  xl: 16       # larger feature cards (rare)
  pill: 9999   # used very sparingly — only on filter chips and certain icon orbs

spacing:
  base: 4
  scale: [2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96]

layout:
  page-width: 1304
  prose-width: 720
  header-height: 96
  masthead-height: 60
  utility-strip-height: 36
  sub-nav-height: 44

components:
  button-cta:
    bg: '#f96302'
    color: '#ffffff'
    radius: 8
    padding: '12px 20px'
    height: 44
    font: button-cta
    use: 'Add to Cart, Buy Now, Schedule Delivery — every primary action. Solid orange, modest 8px corners (not pill), bold white label.'
  button-cta-hover:
    bg: '#d65300'
    color: '#ffffff'
    radius: 8
    use: 'Hover state — deeper orange.'
  button-secondary:
    bg: '#ffffff'
    color: '#333333'
    border: '1px solid #7a7a7a'
    radius: 8
    padding: '11px 19px'
    height: 44
    use: 'Add to List, Compare, See Details — ink-on-white with hairline border.'
  button-pickup:
    bg: '#ffffff'
    color: '#007e34'
    border: '1px solid #007e34'
    radius: 8
    padding: '11px 19px'
    height: 44
    use: 'Pick Up at Store, Check Local Stock — green outline reinforces the local-pickup convention.'
  button-pro:
    bg: '#00659e'
    color: '#ffffff'
    radius: 8
    padding: '12px 20px'
    height: 44
    use: 'Pro-tier actions — Schedule Pro Delivery, Apply for Pro Xtra. Brand-blue surface signals contractor context.'
  button-tertiary-text:
    bg: 'transparent'
    color: '#3e7697'
    use: '"Show more", "View all reviews" — text-only blue links, underlined on hover.'
  product-card:
    bg: '#ffffff'
    color: '#333333'
    radius: 8
    padding: '12px'
    border: '1px solid #cccccc'
    use: 'Listing tile — image-led, hairline-bordered, dense metadata stack with pickup-availability line.'
  search-bar:
    bg: '#ffffff'
    color: '#333333'
    radius: 8
    height: 48
    border: '1px solid #7a7a7a'
    focus-ring: '2px solid #f96302'
    use: 'Masthead search — 8px radius, full-width centred in masthead, terminates in orange search button.'
  search-button:
    bg: '#f96302'
    color: '#ffffff'
    radius: '0 8px 8px 0'
    width: 60
    height: 48
    use: 'Right-edge orange tab inside the search bar — white magnifier icon.'
  text-input:
    bg: '#ffffff'
    color: '#333333'
    radius: 8
    height: 44
    padding: '10px 14px'
    border: '1px solid #7a7a7a'
    focus: '2px solid #f96302'
    use: 'Form input — 8px radius, slightly darker hairline for the utility feel.'
  star-rating:
    color-fill: '#f96302'
    color-empty: '#cccccc'
    use: 'Five-star rating — Home Depot orange fill (same hex as the brand mark), grey empty. One of the few sites whose star fill IS the brand colour.'
  exclusive-tag:
    bg: '#f96302'
    color: '#ffffff'
    radius: 2
    padding: '4px 8px'
    use: 'Solid orange "EXCLUSIVE" or "TOP RATED" callout — uppercase white text.'
  pro-tag:
    bg: '#00659e'
    color: '#ffffff'
    radius: 2
    padding: '4px 8px'
    use: 'Blue "FOR THE PRO" / "PRO XTRA" tag — same shape as exclusive.'
  pickup-badge:
    bg: '#ffffff'
    color: '#007e34'
    border: '1px solid #007e34'
    radius: 4
    padding: '4px 10px'
    use: '"FREE Pickup" / "In Stock at [Store]" — green hairline pill-rectangle anchoring the pickup story.'
  savings-callout:
    bg: '#f96302'
    color: '#ffffff'
    radius: 4
    padding: '6px 10px'
    use: 'Flat orange savings band — "SAVE $50" white bold text. The Home Depot equivalent of Costco''s warehouse-yellow callout.'
  hero-banner:
    bg: '#f96302'
    color: '#ffffff'
    radius: 0
    padding: '40px 48px'
    use: 'Full-width orange promo band — white display headline, white outline CTA, no rounded corners.'

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 f96302 → a8420a over 150ms on :active'
  card-hover: 'shadow-card appears + border thickens 1px → 1px #999999 over 240ms — no transform'
  search-focus: '2px orange ring fades in over 200ms'
  reduced-motion: 'respects prefers-reduced-motion: reduce — colour transitions remain, transforms suppressed.'

breakpoints:
  mobile: 600
  tablet: 1024
  desktop: 1280
  wide: 1304

shadows:
  ambient: 'none — Home Depot stays mostly flat'
  hover-card: 'rgba(0,0,0,0.08) 0 2px 8px'
  modal: 'rgba(0,0,0,0.16) 0 8px 24px'
  ring: '0 0 0 2px #f96302'

accessibility:
  contrast-text-on-bg: 12.6          # #333333 on #ffffff — AAA
  contrast-text-on-cta: 3.8          # #ffffff on #f96302 — AA large only; bold weight + 14px push perception
  contrast-text-on-brand-deep: 5.1   # #ffffff on #d65300 — AA body
  contrast-text-on-charcoal: 12.6    # #ffffff on #333333 — AAA
  contrast-link-on-bg: 5.3           # #3e7697 on #ffffff — AA
  contrast-muted-on-bg: 7.6          # #595959 on #ffffff — AAA
  contrast-pickup-green: 5.3         # #007e34 on #ffffff — AA
  focus-ring: '2px solid #f96302 + 2px outline offset'
  reduced-motion-honored: true
  touch-target-min: 44               # CTAs sit at 44×44
  keyboard-nav: 'Tab moves utility strip → masthead → search → category nav → main grid → footer; arrow keys inside category mega-menu.'

dark-mode: null   # No public-web dark mode. HomeDepot.com is light-only.

lineage:
  summary: 'The Home Depot draws its visual identity from a century of physical-hardware-retail signage tradition — laminated aisle markers, hand-painted lumberyard placards, mid-century discount-hardware catalogues — translated faithfully to the web. The signature orange (#f96302) has been the brand''s constant since the 1979 founding in Atlanta, and the typographic system has remained Helvetica-class bold throughout, refusing the custom-typeface arms race that Walmart, Lowe''s, and Target ran in the 2010s. The site''s utility-first density, "How-To" project framing, contractor-tier "Pro" sub-brand, and in-store-pickup emphasis position The Home Depot as the web translation of the warehouse-aisle hardware store rather than the digital-native marketplace — a deliberate refusal of consumer-tech polish in favour of the apron-and-clipboard register that has defined the chain since opening day.'
  influences:
    - { name: 'Sears Roebuck mail-order catalogues', role: 'Mid-century hardware retail typography, dense product cataloguing, project-led merchandising', url: 'https://en.wikipedia.org/wiki/Sears_catalog' }
    - { name: 'Helvetica (the typeface)', role: 'The Helvetica-class bold tradition — utilitarian, neutral, signage-grade legibility', url: 'https://en.wikipedia.org/wiki/Helvetica' }
    - { name: 'Costco', role: 'Warehouse-retail web discipline — square-ish corners, two-voltage palette, member/contractor segmentation, in-store-pickup emphasis', url: 'https://www.costco.com' }
    - { name: 'IKEA', role: 'Project-led merchandising and how-to guidance threaded through every category page', url: 'https://www.ikea.com' }
    - { name: 'Lowe''s (peer)', role: 'Direct home-improvement competitor — defines the orange-vs-blue category positioning', url: 'https://www.lowes.com' }
    - { name: 'Ace Hardware', role: 'Independent-hardware tradition — apron, clipboard, neighbourhood-store voice', url: 'https://www.acehardware.com' }
    - { name: 'Grainger', role: 'Industrial-supply web tradition — dense SKUs, contractor-tier pricing, B2B utility', url: 'https://www.grainger.com' }
    - { name: 'Pantone Orange 165 C', role: 'The signature orange-class colour reference — the chromatic anchor that the wordmark and CTA share', url: 'https://www.pantone.com/connect/PANTONE-165-C' }
---

## 1. Visual Theme & Atmosphere

The Home Depot's storefront is the most literal translation of warehouse-aisle hardware retail to the web in the category. The base canvas is white (`#ffffff`) with a soft grey (`#f5f5f5`) page floor — the same neutral that concrete warehouse floors read as under fluorescent light — anchored on the signature **Home Depot orange** (`#f96302`) that carries every primary CTA, the wordmark, the savings callouts, and the thin utility strip at the very top of the masthead. There is no second loud colour in the consumer experience; the chromatic system is intentionally a two-voltage discipline of orange and ink, with **Pro-tier blue** (`#00659e`) appearing only in contractor-segment surfaces.

Type runs **Helvetica Neue** — specifically the Helvetica Neue 75 Bold cut on display copy — at confident weights. Page titles render at 32/700, section heads at 24/700, button CTAs at 14/700, and the brand never reaches for a custom typeface. Where Walmart commissioned Bogle and Target invested in custom display work, The Home Depot has held the Helvetica-class line for forty-six years. The typographic neutrality is the design intent: the brand wants the orange to do the work, the type to disappear, and the prices and pickup-availability lines to read fast under the same conditions a contractor scans an end-cap.

The chromatic identity is a controlled two-voltage trio with a green grace note: **Home Depot orange** for brand and CTA, **ink** (`#333333`) for body type and the contractor-charcoal footer band, and **pickup green** (`#007e34`) reserved exclusively for the in-store-pickup story — "FREE Pickup", "In Stock at Local Store", "Schedule Delivery". The green is the second-most-distinctive colour in the system precisely because it has one job: it owns the local-store availability moment, and never appears elsewhere. The Pro-tier blue is a fourth voltage but it is segmentation-coded — it appears only in contractor-tier badges, the "For the Pro" tab in the masthead, and the Pro Xtra surfaces.

Shape language is **square-ish but not square** — a deliberate position between Costco's hard-square 4px discipline and Walmart's full-pill 9999px rounding. CTAs sit at 8px radius, cards at 12px, modals at 12px. The 8px CTA is the brand's strongest shape signal: large enough to read as modern, small enough to read as utility hardware, never rounded into a fashion-pill. The search bar is an 8px-radius rectangle terminating in an orange search-tab on the right edge. Shadows are minimal; most surfaces are flat with a single hover-card lift on tiles.

The page reads as **the hardware store, online**. Dense product grids, weekend-warrior project galleries ("How to Tile a Bathroom Floor"), in-store-pickup badges on every tile, contractor-tier sub-brand callouts, and a footer crowded with department links, store locator, gift-card, credit, and rental utilities — every element echoes a physical Home Depot's aisle markers, end-cap signage, and orange-aproned-associate culture. The result is the most utilitarian home-improvement site in the category — and the only one whose web design is a faithful translation of the physical store experience since 1979.

**Key Characteristics:**
- Two-voltage core palette: Home Depot orange (`#f96302`) brand and CTA + ink (`#333333`) type, with pickup-green (`#007e34`) reserved for local-store availability
- Helvetica Neue Bold (75) display + Helvetica Neue body — no custom typeface, ever
- Square-ish 8px corners on CTAs and inputs, 12px on cards — never pill on primary actions
- Orange CTA at 8px radius, 12×20px padding, 44px height, white 14/700 label (sentence case, not uppercase — distinguishing from Costco)
- Pickup-green outline buttons own the local-store availability story
- Star ratings render in brand orange (same hex as the wordmark) on grey — one of the few sites whose star fill IS the brand colour
- Pro-tier sub-brand uses blue chrome (`#00659e`) as the segmentation signal — contractor context only
- Flat orange "SAVE $50" callouts replace Costco's warehouse-yellow band — same role, different voltage
- 1px hairline borders on every product tile — the warehouse-grid feel borrowed from Costco's playbook
- Thin orange utility strip atop the masthead — the brand's most distinctive top-of-page detail
- Generous footer with multi-column store-services link grid — store locator, credit, rentals, gift cards, careers
- Project-led "How-To" content threaded through every category — the IKEA discipline applied to hardware

## 2. Color Palette & Roles

### Primary
- **Canvas** (`#ffffff`): default page floor, every product tile, every form surface
- **Page Floor** (`#f5f5f5`): alternate band ground — the concrete-warehouse grey
- **Ink** (`#333333`): primary text colour — slightly softer than pure black
- **Heading Ink** (`#000000`): used on display copy and savings callouts where Home Depot wants maximum punch

### Brand & Dark
- **Home Depot Orange** (`#f96302`): the brand mark, primary CTA fill, star-rating fill, savings callouts, and the thin utility strip atop the masthead — the brand's loudest moment
- **Brand Deep** (`#d65300`): hover state on orange CTAs
- **Brand Active** (`#a8420a`): pressed state, deepest orange accent
- **Brand Soft** (`#fef3eb`): softened orange wash for surface bands

### Pro-Tier Sub-Brand
- **Pro Blue** (`#00659e`): contractor-tier chrome — "For the Pro" tab, Pro Xtra surfaces, Pro CTA fill
- **Pro Blue Deep** (`#004870`): Pro CTA hover
- **Pro Blue Active** (`#002f4d`): Pro pressed state

### Pickup & Availability
- **Pickup Green** (`#007e34`): the most disciplined colour in the system — "FREE Pickup", "In Stock at Local Store", "Schedule Delivery" CTAs and badges
- **Pickup Green Deep** (`#005d26`): hover on pickup CTAs

### Accent — Segmentation Tags
- **Exclusive Tag Orange** (`#f96302`): "EXCLUSIVE", "TOP RATED", "NEW" — same orange as the brand
- **Pro Tag Blue** (`#00659e`): "FOR THE PRO", "PRO XTRA" — same blue as the Pro chrome
- **Out of Stock** (`#7a7a7a`): "Out of Stock" tag

### Interactive
- **Link** (`#3e7697`): default inline link — slightly muted blue, never competing with brand orange
- **Link Hover** (`#1f4d6e`): darker hover blue
- **Visited** (`#5e2a8c`): purple visited state
- **Disabled** (`#999999`): disabled text and outline
- **Selected** (`#f96302`): selected radio / checkbox / tab fill

### Neutral Scale
- **Ink** (`#333333`) — primary text
- **Heading** (`#000000`) — hero display, savings callout text
- **Muted** (`#595959`) — secondary metadata
- **Soft** (`#7a7a7a`) — caption text, out-of-stock tags, form input outlines
- **Disabled** (`#999999`) — disabled state text
- **Border** (`#cccccc`) — default 1px hairline on tiles and dividers
- **Border Soft** (`#e0e0e0`) — editorial dividers between sections
- **Border Strong** (`#999999`) — focus-state hairline on inputs

### Surface & Borders
- **Canvas** (`#ffffff`) — default
- **Soft** (`#f5f5f5`) — disabled fields, alternate row, page floor
- **Strong** (`#e6e6e6`) — divider band, dense filter rail ground
- **Orange Soft Surface** (`#fef3eb`) — softened orange band ground for promo
- **Blue Soft Surface** (`#e8f0f7`) — Pro-tier informational banner surface
- **Charcoal Surface** (`#333333`) — contractor-aisle dark band (footer, Pro chrome)
- **Charcoal Deep** (`#1a1a1a`) — deeper contractor band, near-black

### Shadow Colors
Home Depot stays mostly flat. Hover-card shadow is single-layer neutral grey at 8% — same intensity as Costco, Walmart, and Etsy.

- `rgba(0,0,0,0.08) 0 2px 8px` — hover-card lift on product tiles
- `rgba(0,0,0,0.16) 0 8px 24px` — modal drop
- `rgba(0,0,0,0.5)` — modal backdrop scrim

### Semantic
- **Success Green** (`#007e34`): "In Stock", "Order Placed" — same hex as pickup-green (Home Depot consolidates the two roles deliberately — both signal local availability)
- **Warning Amber** (`#cc6600`): advisory banners — backorder notices, ship-date warnings
- **Danger Red** (`#c01818`): validation errors — distinct from brand orange so error states are unambiguous (this is the chromatic discipline Costco rejects: Costco lets error red and brand red share `#e31837`; Home Depot separates them precisely because the brand orange is on every CTA already)
- **Info Blue** (`#00659e`): informational banners — same as Pro blue

## 3. Typography Rules

### Font Family

**Primary**: `Helvetica Neue`, with the Helvetica Neue 75 Bold cut named on display copy. Fallback chain: `Helvetica, Arial, sans-serif`. Home Depot uses no custom typeface — Helvetica is the entire system, and has been since the brand's founding in 1979. Inter is the closest open-source substitute.

**Mono**: not part of the storefront brand system.

**OpenType features**: `tnum` is enabled on prices, savings callouts, ratings, ship-date countdowns, and quantity steppers. No `ss01` discipline.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|------|------|------|--------|-------------|----------------|-------------|-------|
| hero-banner | Helvetica Neue 75 Bold | 56 | 900 | 1.0 | -1px | — | "SAVINGS START NOW" full-bleed promo |
| display-hero | Helvetica Neue 75 Bold | 48 | 700 | 1.05 | -0.75px | — | Homepage hero headline |
| page-title | Helvetica Neue 75 Bold | 32 | 700 | 1.1 | -0.5px | — | Category page H1 ("Power Tools") |
| section-head | Helvetica Neue 75 Bold | 24 | 700 | 1.2 | -0.25px | — | "Top Rated", "Project Inspiration" |
| sub-section | Helvetica Neue | 18 | 700 | 1.25 | 0 | — | Sub-section heads on PDP, "Specifications" |
| product-title | Helvetica Neue | 16 | 400 | 1.4 | 0 | — | PDP main product title — regular weight (Home Depot keeps product titles at 400, distinguishing from Costco's 700 product-title discipline) |
| product-title-md | Helvetica Neue | 14 | 400 | 1.43 | 0 | — | Grid product card titles — also regular weight |
| body-md | Helvetica Neue | 14 | 400 | 1.43 | 0 | — | Default body |
| body-sm | Helvetica Neue | 13 | 400 | 1.38 | 0 | — | Secondary metadata, review snippets |
| caption | Helvetica Neue | 12 | 400 | 1.33 | 0 | — | Footer micro-text |
| micro | Helvetica Neue | 11 | 400 | 1.27 | 0 | — | Footer legal, disclaimers |
| price-display | Helvetica Neue | 36 | 700 | 1.0 | -0.5px | tnum | PDP main price ("$1,299.00") |
| price-product | Helvetica Neue | 24 | 700 | 1.0 | -0.25px | tnum | Grid tile current price |
| price-strikethru | Helvetica Neue | 14 | 400 | 1.0 | 0 | tnum | Original price strikethrough |
| price-savings | Helvetica Neue | 18 | 700 | 1.0 | 0 | tnum | "SAVE $50" savings line |
| button-cta | Helvetica Neue | 14 | 700 | 1.0 | 0 | — | Primary CTA label — sentence case (not uppercase — distinguishing from Costco) |
| nav-link | Helvetica Neue | 14 | 700 | 1.0 | 0 | — | Masthead category labels — bold weight |
| badge | Helvetica Neue | 11 | 700 | 1.0 | 0.06em | uppercase | "EXCLUSIVE", "TOP RATED", "NEW" |
| pro-tag | Helvetica Neue | 12 | 700 | 1.0 | 0.04em | uppercase | "FOR THE PRO", "PRO XTRA" |

### Principles

- **Helvetica Neue, full stop.** No custom typeface. Helvetica Neue 75 Bold for display, regular Helvetica Neue for body. The fallback chain is the system.
- **Product titles regular weight (400).** Where Costco bolds product titles to 700, Home Depot keeps them at 400. The contrast comes from the bold price beneath, not the title — the hardware-catalogue tradition of "name → spec → price" hierarchy where the price line carries weight.
- **Button CTAs sentence case, not uppercase.** This is the strongest typographic distinction from Costco. Home Depot's CTAs read "Add to Cart" in 14/700 sentence case — the DIY-confidence register. Costco's read "ADD TO CART" uppercase — the warehouse-signage register. Both work; they signal different brand personalities.
- **Savings callouts at 700 weight, not 900.** Where Costco renders "$200 OFF" at 24/900, Home Depot renders "SAVE $50" at 18/700 — slightly more restrained, leaning on the orange voltage rather than the typographic punch.
- **Display copy uses Helvetica Neue 75 Bold specifically.** The brand has a registered preference for the 75 Bold weight on hero and page-title roles, named explicitly in the production CSS.
- **Tabular numerals on every price.** `tnum` everywhere money lives.
- **Body at 14/400.** Smaller than typical SaaS (16/400) — Home Depot prioritises information density, same as Costco.
- **No italic, no oblique.** Helvetica Neue oblique exists but never appears on the storefront.
- **Negative tracking on display copy.** Hero and page-title sit at -0.5 to -1px tracking — the industrial-signage typographic discipline.

## 4. Component Stylings

### Buttons

**`button-cta`** — the canonical Add to Cart. Solid Home Depot orange (`#f96302`) fill, white text in 14/700 sentence case, **8px radius** (not pill, never pill), 12×20px padding, 44px height. Hover deepens to `#d65300`. Active to `#a8420a`. The 8px corners are the brand's deliberate position — modern enough to read as 2025, square enough to read as utility hardware.

**`button-secondary`** — white fill, 1px `#7a7a7a` hairline, ink text in 14/700. Same 8px radius and 44px height. Used for "Add to List", "Compare", "See Details".

**`button-pickup`** — white fill, 1px `#007e34` hairline (pickup-green outline), green text in 14/700. Same 8px radius. Used exclusively for "Pick Up at Store", "Check Local Stock" — the green outline reinforces the local-availability convention.

**`button-pro`** — solid Pro blue (`#00659e`) fill, white text in 14/700, 8px radius, 44px height. Used exclusively in Pro-tier surfaces — "Schedule Pro Delivery", "Apply for Pro Xtra".

**`button-tertiary-text`** — plain blue text in `#3e7697`, no surface. Underlined on hover.

### Cards

**`product-card`** — listing tile. White surface, 8px radius (slightly more rounded than Costco's 6px), 12px padding, 1px `#cccccc` hairline border (the warehouse-grid feel borrowed from Costco's playbook). Stack: 1:1 thumbnail with `object-fit: contain` on white, optional Exclusive or Top Rated orange tag floating top-left, product title in 14/400 ink, brand/model line in 13/400 muted, star row + review count in blue link, current price in 24/700 with `tnum`, optional strikethrough original price, optional orange "SAVE $50" callout, pickup-green "FREE Pickup at [Store]" line, Add to Cart orange button at the bottom.

**`pdp-buy-box`** — sticky right-rail card on PDP. White, 12px radius, 1px `#cccccc` border, hover-card shadow, 24px padding. Stack: large `price-display` (36/700) with optional strikethrough, "SAVE $50" orange callout, "Includes Free Shipping" caption, store-pickup green box ("In Stock at [Store] — Pick Up Today"), variant selectors, quantity stepper, full-width orange Add to Cart, "Add to List" outline secondary, "Schedule Delivery" pickup-green outline, "Apply for Home Depot Credit" Pro-blue link.

**`hero-banner`** — full-width Home Depot orange (`#f96302`) ground, no rounded corners, 40×48px padding. Display headline in 48/700 white. Sub-copy in 18/400 white. White-with-orange-text CTA at the bottom in 8px radius.

**`project-card`** — "How to Tile a Bathroom Floor" — white surface, 12px radius, 16:9 lifestyle photo at top, title in 18/700, project metadata ("Beginner · 4 hours · $200 budget") in 13/400 muted, "Start the Project" tertiary blue link.

**`contractor-tier-card`** — Pro-segment card with charcoal (`#333333`) header band carrying Pro tag, then standard product card stack beneath. The contractor-aisle dark band is the segmentation signal.

### Badges, Tags, Pills

**`exclusive-tag`** — solid Home Depot orange (`#f96302`) box, white uppercase "EXCLUSIVE" text in 11/700 with 0.06em tracking, 2px radius, 4×8px padding. Anchors top-left of qualifying tiles.

**`pro-tag`** — solid Pro blue (`#00659e`) box, white uppercase "FOR THE PRO" or "PRO XTRA" text in 12/700 with 0.04em tracking, 2px radius, 4×8px padding. Same shape as exclusive but blue voltage.

**`pickup-badge`** — white fill, 1px `#007e34` (pickup-green) hairline, green text in 12/500, 4px radius, 4×10px padding. "FREE Pickup", "In Stock at [Store]", "Same-Day Pickup" — the local-availability story.

**`savings-callout`** — flat Home Depot orange (`#f96302`) fill, white text in 18/700 ("SAVE $50"), 4px radius, 6×10px padding. The Home Depot equivalent of Costco's warehouse-yellow callout — same role, brand-orange voltage instead of yellow.

### Inputs / Forms

**`text-input`** — white surface, 1px `#7a7a7a` hairline (darker than typical for the warehouse-utility feel — matches Costco's discipline), 8px radius, 44px height, 10×14px padding. Stacked label above in `caption` muted. On focus the border thickens to 2px Home Depot orange and an orange focus ring appears.

**`search-bar`** — masthead search. White fill, 8px radius, 48px height (slightly taller than Costco's 40px — Home Depot prioritises the search target), 1px `#7a7a7a` hairline. Right edge terminates with a 60×48 Home Depot orange (`#f96302`) `search-button` carrying a white magnifier icon. The orange search-tab is the most distinctive masthead component in the home-improvement category — Lowe's uses a blue version of the same pattern.

**`select`** — same look as `text-input` with a chevron indicator. 8px radius, 44px height.

**`quantity-stepper`** — 1px `#7a7a7a` hairline outlined trio of `-` / number / `+` cells, 8px outer radius, 36px height. Number cell renders the value in 16/700 with `tnum`.

### Navigation

**`utility-strip`** — full-width thin Home Depot orange (`#f96302`) bar at the very top of the page, 36px height. Carries store-locator pill ("Your Store: Atlanta · #0121"), language switcher, Pro Xtra link, Order Status, and Customer Service utilities in 12/700 white. This is the brand's most distinctive top-of-page detail — Costco has no equivalent strip; Lowe's uses a dark band; Home Depot's orange strip is unique.

**`masthead`** — full-width white bar beneath the utility strip, 1px hairline bottom, 60px height. Wordmark flush left (orange square containing white "Home Depot" cross-letterform — the spade-shape logo). Search bar centred (~720px wide, 48px tall). Account / Lists / Cart utilities flush right in `nav-link` (14/700) ink.

**`sub-nav`** — slim 44px band beneath the masthead, white fill, 1px hairline bottom. Holds department links: "Lumber", "Tools", "Decor", "Outdoor", "Appliances", "Plumbing", "Electrical", "Paint", "Hardware". 14/700 ink labels with `:hover` flipping to Home Depot orange. "For the Pro" tab on the right edge renders in Pro blue, signalling the segmentation switch.

**`mega-menu-flyout`** — opens from category dropdown; white surface, 12px radius, 1px hairline, hover-card shadow. Multi-column nav of category trees with 14/400 ink labels. Right column carries a featured project card or savings promo with orange CTA.

**`breadcrumb`** — `text-muted` (`#595959`) with `>` separators, 13/400. "Home > Tools > Power Tools > Drills > Cordless Drills"

### Star Rating

**`star-rating`** — 5-icon row, fill `#f96302` (Home Depot orange — same hex as the brand mark) for filled, `#cccccc` for empty. Half-stars rendered with clipped half-fill. Followed by a blue-link review count: "(2,847)". This is one of the few sites whose star fill IS the brand colour — Amazon uses orange (`#ffa41c`) but it's not the brand mark; Costco uses warehouse yellow; Home Depot uses the brand orange itself.

### Modals & Toasts

**`modal`** — centred dialog over a 50%-opacity ink scrim. White surface, 12px radius (matching cards), 1px hairline border, modal shadow. Close X anchored top-right.

**`toast`** — bottom-centre notifications. White fill, 8px radius, 1px hairline, ink text, 16×24px padding. Added-to-cart toast carries an orange checkmark.

## 5. Layout Principles

### Spacing System

- Base unit: **4px**
- Scale: `2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96`
- Section padding (vertical): **48–80px** between major bands — slightly more breath than Costco (40–64px), reflecting Home Depot's slightly more editorial pacing on the homepage
- Card internal padding: **12px** for product tiles; **24px** for PDP buy box; **40–48px** for hero banner
- Gutters: **16px** between product tiles in grid view; **48–64px** between major page bands; **8px** between adjacent CTAs

### Grid & Container

- Max content width: **1304px** centred (slightly wider than Costco's 1296px)
- Homepage: 4-column tile grid at desktop with category navigation rail on the left and project-inspiration band on the right
- Search results: **4–5 column** product grid at desktop with 16px gutters and a left-rail filter panel
- PDP: 2-column with image gallery left (~55%), buy box right (~38%), specifications panel beneath spanning full width
- Footer: **6-column** store-services link grid — Customer Service, Resources, Manage My Account, Stores, Brands, Specialty Sites — the most utilitarian footer in the category

### Whitespace Philosophy

Home Depot gives major sections moderate breath (48–80px vertical) and compresses the product grids — tiles run 4–5 across with 16px gutters and 1px borders that visually pack the page. The footer is intentionally dense, with six columns of store-services links because Home Depot assumes its visitors are looking for specific information (store locator, return policy, credit application, rental info) rather than browsing. The "For the Pro" segmentation creates a parallel information architecture — Pro users see denser, more SKU-coded layouts; consumer users see more project-inspiration imagery.

### Section Cadence

Home Depot alternates between **white bands** (default body), **orange promo bands** (full-width hero promos, savings banners — Home Depot orange ground with white display copy), **charcoal Pro bands** (contractor-tier sections, dark `#333333` ground), and **soft-orange wash bands** (`#fef3eb` for featured-deal cards and project galleries). The cadence reflects the physical store: warehouse aisles (white), end-cap promos (orange), Pro Desk (dark contractor band), seasonal merchandising (soft orange).

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|------|-------|-----|
| Micro | 2px | Exclusive, Top Rated, Pro Xtra tags |
| Small | 4px | Savings callouts, pickup badges |
| Standard | 8px | CTAs, search bar, form inputs, quantity steppers |
| Card | 12px | Product tiles, modals, mega-menu flyouts |
| Featured | 16px | Larger feature cards (rare — project hero modules) |
| Pill | 9999px | Used very sparingly — only on filter chips, store-locator pill in utility strip, and certain icon orbs |

Home Depot's defining shape choice is **8px CTAs — the middle position between Costco's hard 4px and Walmart's 9999px pills**. The brand reads as modern enough not to look dated (Costco's 4px square reads as 2010-era big-box) but utility enough not to read as fashion-pill (Walmart, Target, Etsy). The 8px radius is the brand's deliberate signal: hardware-store-modern, contractor-friendly, no fashion drift.

There are no compound radii in mainline UI.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | no shadow | Body, masthead, utility strip, footer, all editorial bands (~95% of surfaces) |
| 1 — Hover Card | `rgba(0,0,0,0.08) 0 2px 8px` | Product tiles on hover, dropdowns, mega-menu, sticky PDP buy box |
| 2 — Modal | `rgba(0,0,0,0.16) 0 8px 24px` | Centred dialogs, store-locator overlay |
| 3 — Scrim | `rgba(0,0,0,0.5)` | Modal backdrop |

### Shadow Philosophy

Home Depot stays mostly flat. Depth comes from **the orange utility strip and brand-mark accent** and **the 1px hairline borders on product tiles** — the borders are unusual among consumer-tech peers (Amazon, Target, Etsy use no card borders) but reinforce the warehouse-grid utility aesthetic. Hover-card shadow is single-layer neutral grey at 8%, matching Costco's discipline. There are no atmospheric multi-layer shadows; no decorative glows; no coloured drop shadows.

## 8. Interaction & Motion

### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover, focus
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry

### Durations
| Bucket | Value | Use |
|--------|-------|-----|
| Fast | 150ms | Hover colour swap, focus ring fade-in |
| Standard | 240ms | Card hover lift + border thicken, modal enter |
| Slow | 320ms | Hero carousel slide, page transitions, mega-menu expand |

### Per-Component Recipes

- **CTA hover**: background transitions from `#f96302` to `#d65300` over 150ms.
- **CTA press**: deepens to `#a8420a` for 150ms on `:active`.
- **Product card hover**: shadow appears (`rgba(0,0,0,0.08) 0 2px 8px`) and the 1px `#cccccc` border thickens to `#999999` over 240ms. No transform — Home Depot resists the lift gimmick.
- **Search-bar focus**: 2px orange ring (`#f96302`) fades in over 200ms.
- **Mega-menu flyout**: 240ms ease-out fade + 4px slide-down.
- **Modal enter**: scrim fades in over 200ms, dialog opacity 0 → 1 over 240ms emphasized.
- **Pickup-badge hover**: green outline thickens 1px → 2px, no fill change.
- **Store-locator pill click**: opens modal with 240ms scrim fade + dialog slide-up.
### Page Transitions

Page-to-page navigation uses no transition. Add-to-cart triggers a toast slide-up over 240ms from the bottom-centre.

### Reduced Motion

Respects `prefers-reduced-motion: reduce`. Hover transitions degrade to opacity-only; mega-menu fade replaces the slide; carousel auto-advance suspends.

## 9. Accessibility & A11y

### Contrast Pairs

| Pair | Ratio | Level |
|------|-------|-------|
| #333333 ink on #ffffff canvas | 12.6 | AAA |
| #ffffff on #f96302 CTA | 3.8 | AA large only — bold 14/700 weight compensates |
| #ffffff on #d65300 CTA hover | 5.1 | AA body |
| #ffffff on #a8420a CTA active | 7.3 | AAA |
| #ffffff on #333333 charcoal footer | 12.6 | AAA |
| #3e7697 link on #ffffff | 5.3 | AA |
| #595959 muted on #ffffff | 7.6 | AAA |
| #007e34 pickup-green on #ffffff | 5.3 | AA |
| #ffffff on #00659e Pro blue | 6.4 | AAA |

The most-trafficked pair — white on Home Depot orange — sits at **3.8 contrast**, which fails AA body but passes AA large (the 14/700 button label is bold enough to perceive as compliant under WCAG 1.4.3 large-text exemption, though designers should be aware). The brand has held this trade-off for forty-six years; the orange voltage is non-negotiable to the brand identity. Hover state (`#d65300`) and active state (`#a8420a`) both clear AA and AAA respectively, so interactive states recover the contrast budget.

The pickup-green-on-white pair (`#007e34` on `#ffffff`) sits at 5.3 — clean AA — and owns the local-availability story across the entire site.

### Focus Indicators

Focus ring is **2px solid `#f96302`** (Home Depot orange) with 2px outline-offset. The same orange that fills CTAs also rings them on keyboard focus — the colour discipline is two-job.

### ARIA Patterns

- **Search bar**: `role="search"`. Input has `aria-label="What can we help you find today?"`.
- **Product card**: entire tile wrapped in `<a>` with verbose `aria-label`.
- **Star rating**: text-equivalent (`aria-label="4.6 out of 5 stars based on 2,847 reviews"`).
- **Pickup badge**: `aria-label="Free in-store pickup at Atlanta store #0121 — in stock"`.
- **Pro tag**: `aria-label="For the Pro — contractor-tier pricing available with Pro Xtra"`.
- **Mega-menu flyout**: `role="menu"` with `role="menuitem"`; arrow keys navigate, Escape closes.
- **Store locator pill**: `aria-label="Set your store — currently Atlanta #0121"`.

### Keyboard Navigation

- Utility strip: Tab moves store-locator → Pro Xtra → Order Status → Customer Service
- Masthead: Tab moves logo → search → account → lists → cart
- Sub-nav: Tab moves through department links → For the Pro tab
- Search results: Tab through tiles in document order
- PDP: Tab through gallery → variant selector → quantity → Add to Cart → Pick Up at Store → Add to List

### Screen Reader Hints

Verbose `aria-label` on icon-only buttons. The cart icon has `aria-label="Cart, 2 items"`. Pickup badges include the store name and stock state in the label.

### Reduced Motion

All transitions degrade to opacity-only. Hero carousel auto-advance suspends; manual nav remains.

## 10. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Utility strip collapses to store-locator pill only; masthead becomes logo + cart + hamburger; search bar moves to its own row; product grid 2-up; PDP stacks single-column |
| Tablet | 600–1024px | Full masthead; product grid 3-up; sub-nav hides behind hamburger; utility strip collapses to store-locator + Pro Xtra |
| Desktop | 1024–1280px | Sub-nav with department links visible; product grid 4-up; left-rail filter panel appears on search |
| Wide | 1280–1304px | Content caps at 1304px; product grid 5-up |

### Touch Targets

- Primary CTAs: 44px height — meets AA (slightly below the 48px AAA threshold)
- Search bar: 48px tall — exceeds AA, reflecting the search-target priority
- Pickup buttons: 44×44 — meets AA
- Product tile: entire 240×360px tile is tappable
- Quantity stepper buttons: 36px tall — below AA, compensated by 16px padding around touch zone

### Collapsing Strategy

- Utility strip: language switcher and Order Status hide first
- Masthead: utilities (account, lists) hide behind hamburger
- Search bar: jumps from inline to its own row at <1024px
- Sub-nav: department links collapse into hamburger menu at <1024px
- Product grid: 5 → 4 → 3 → 2; 16px gutters compress to 12px → 8px
- PDP: 2-column splits to single-column stack at <1024px; buy box becomes sticky bottom bar on mobile
- Filter rail: collapses into slide-out drawer on mobile, triggered by "Filter" pill button

### Image Behavior

Product thumbnails use `aspect-ratio: 1/1` with `object-fit: contain` (Home Depot prefers `contain` for product photography on white seamless — much of the catalogue is hardware-on-white). Project-inspiration cards use `aspect-ratio: 16/9` with `object-fit: cover` for lifestyle imagery.

### Container Queries

Not formally used. Layout switches happen at viewport breakpoints.

## 11. Content & Voice

### Tone

Practical, project-confident, contractor-respectful. Home Depot's voice is "the helpful associate in the orange apron who knows where the masonry bits are and trusts you to do the project yourself." Headlines lead with capability ("Get the Project Done Right", "Save on Tools You'll Use for Years") and pickup-availability ("In Stock at Your Local Store — Pick Up Today"). The brand consistently positions itself as the **DIYer's and contractor's enabler** — there is no aspirational copy, no lifestyle framing, just the project, the tools, the price, and where to pick it up.

The Pro-tier voice shifts register slightly — more transactional, more SKU-coded, less project-narrative, more "Pro Xtra members save an additional 10% on bulk lumber orders."

### Microcopy Patterns

- **Button verbs**: "Add to Cart", "Pick Up at Store", "Schedule Delivery", "Add to List", "Compare" — direct and outcome-named
- **Error message recipe**: `[What went wrong] + [How to fix]` — direct
- **Success confirmations**: "Added to Cart", "Saved to List", "Pickup Scheduled"
- **Field labels**: short and direct — "ZIP Code", "Store Number", "Pro Xtra ID"
- **Stock urgency**: "Limited Stock", "While Supplies Last", "In Stock at Your Local Store" — the warehouse-merchandising standard
- **How-to framing**: "How to Tile a Bathroom Floor", "How to Install a Ceiling Fan" — project-led category copy

### Empty States

Empty cart: "Your Cart is empty. Browse Today's Featured Items or check out our Project Inspiration." — direct with two recovery paths.

Empty list: "Your List is empty. Save items as you shop to keep your project organized."

Empty search: "We didn't find results for [query]. Try checking spelling, or browse by category."

### CTA Verb Conventions

- Primary: **"Add to Cart"** (default), **"Pick Up at Store"** (local availability), **"Schedule Delivery"** (large items)
- Account: **"Sign In"**, **"Create an Account"**
- Pro: **"Apply for Pro Xtra"**, **"Schedule Pro Delivery"**
- Save: **"Add to List"** (Home Depot uses "List" rather than wishlist — the contractor lingo)
- Avoided: "Buy Now" (Home Depot prefers Add to Cart → checkout), "Submit", "Click here"

## 12. Dark Mode & Theming

**Light-only on the public web.** HomeDepot.com is light-only. The Home Depot mobile app is also predominantly light-themed (no system-controlled dark mode at the time of writing). The brand position: Home Depot orange chrome works best on white, the pickup-green callouts depend on the bright white surface for chromatic punch, and the contractor-charcoal `#333333` footer band provides the only dark-band moment in the visual system. Dark mode would compromise the apron-orange-on-white identity that has defined the brand since 1979.

## 13. Lineage & Influences

Home Depot's visual lineage runs through one dominant tradition: **physical-hardware-retail signage**. The orange wordmark dates to the 1979 founding in Atlanta and has remained essentially unchanged for forty-six years. The web design is a faithful translation of the in-store signage system — laminated end-cap promos, hand-painted aisle markers, dense product-density planograms, orange-aproned associates — engineered for the weekend DIYer and the contractor restocking a job site, not for design awards.

Where Walmart commissioned Bogle and Target invested in custom display work, Home Depot has never commissioned a custom typeface. Helvetica Neue (specifically the 75 Bold cut) carries everything. The square-ish 8px corner discipline reflects a deliberate position: more modern than Costco's hard 4px (which reads as 2010-era), more utilitarian than Walmart's pills (which read as consumer-tech fashion). Home Depot sits between — hardware-store-modern.

The site's "How-To" project framing borrows from IKEA's project-led merchandising tradition, translated to a hardware register. The contractor-tier "For the Pro" sub-brand draws on Grainger's industrial-supply web pattern — dense SKUs, tiered pricing, B2B utility. The orange-vs-blue category positioning is defined against direct peer Lowe's, whose blue chrome creates the binary that defines the home-improvement category in the consumer mind.

What Home Depot rejects: custom typefaces, dark mode, decorative gradients, lifestyle photography on product tiles (white seamless throughout for the consumer surface), pill CTAs on primary actions, and any animation that delays the click. The brand position is **anti-fashion utility with project confidence**: Home Depot UI looks dated to designers because Home Depot optimises for DIY conversion, contractor retention, and in-store-pickup activation — not for design awards.

**Influences:**
- Mid-century discount-hardware retail signage (Sears Roebuck mail-order catalogues, hand-painted lumberyard placards)
- Helvetica Neue 75 Bold — typographic neutrality lineage since the brand's founding
- Costco (peer) — warehouse-retail web discipline, square-ish corners, two-voltage palette
- IKEA — project-led merchandising and how-to guidance threaded through every category
- Lowe's (direct peer) — defines the orange-vs-blue category positioning
- Grainger — industrial-supply web tradition for the Pro-tier sub-brand
- Ace Hardware — apron-and-clipboard neighbourhood-store voice
- Pantone Orange 165 C — the chromatic anchor reference

## 14. Do's and Don'ts

**Do**
- Anchor the masthead in white with a thin Home Depot orange (`#f96302`) utility strip at the very top
- Use Home Depot orange (`#f96302`) for primary CTA fills with white sentence-case 14/700 labels
- Use 8px corners on CTAs and inputs, 12px on cards — never pill on primary actions
- Render savings callouts in flat brand orange with white 18/700 ("SAVE $50") — distinct from Costco's warehouse-yellow band
- Use Helvetica Neue (75 Bold cut on display copy) — no custom typeface
- Keep product titles at 14/400 regular weight — let the bold orange price carry the visual punch
- Reserve pickup-green (`#007e34`) exclusively for the local-store availability story
- Use Pro blue (`#00659e`) only in contractor-tier segments and Pro Xtra surfaces
- Render star ratings in brand orange (`#f96302`) — same hex as the wordmark
- Use bordered product cards (`1px #cccccc`) — the warehouse-grid feel
- Lean on `object-fit: contain` for product thumbnails (white seamless)
- Thread "How-To" project content through every category — the IKEA discipline applied to hardware
- Use sentence case on CTAs — "Add to Cart", not "ADD TO CART"

**Don't**
- Don't use pill CTAs on primary actions — Home Depot sits at 8px square-ish
- Don't introduce a custom typeface — Helvetica Neue is the system
- Don't use uppercase button labels — that's Costco's register, not Home Depot's
- Don't bold product titles to 700 — that's Costco's discipline; Home Depot keeps titles at 400
- Don't use orange for the danger/error colour — keep `#c01818` as the dedicated error red so error states are unambiguous against the brand orange
- Don't use lifestyle photography on consumer product tiles — white-seamless product shots only
- Don't use gold or yellow for star ratings — Home Depot orange `#f96302` always
- Don't add multi-layer atmospheric shadows — Home Depot stays single-layer flat
- Don't use Pro blue outside the contractor-tier surfaces — the blue is segmentation-coded
- Don't use pickup-green for anything other than local-store availability — the green is single-purpose
- Don't replace the thin orange utility strip with a dark band — the orange strip is the brand's most distinctive top-of-page detail
- Don't say "Buy Now" — Home Depot prefers "Add to Cart" → checkout
- Don't tighten product card titles below 14/400 or above 14/500 — the regular weight is the brand
- Don't render the brand orange below `#f96302` — deeper oranges are reserved for hover/active states

## 15. Agent Prompt Guide

### Quick Color Reference

```
Canvas:            #ffffff
Page Floor:        #f5f5f5
Ink:               #333333
Home Depot Orange: #f96302
Orange Deep:       #d65300
Orange Active:     #a8420a
Pro Blue:          #00659e
Pickup Green:      #007e34
Link Blue:         #3e7697
Border:            #cccccc
Muted:             #595959
Charcoal Footer:   #333333
```

### Example Component Prompts

- "Create a Home Depot-style Add to Cart button: 44px-tall rectangle (8px radius) with Home Depot orange (`#f96302`) fill, white text in Helvetica Neue 14/700 sentence case (not uppercase), 12×20px padding. Hover deepens to `#d65300`. No pill — 8px square-ish corners are the brand."
- "Build a Home Depot masthead: full-width white bar beneath a thin 36px Home Depot orange (`#f96302`) utility strip carrying store-locator pill, Pro Xtra link, and customer service in 12/700 white. Below the strip: 60px white masthead bar with Home Depot wordmark flush left (the orange-square spade logo with white 'Home Depot' inside), centred search bar (~720px wide, 48px tall, 8px radius, white fill, 1px `#7a7a7a` hairline) terminating in a 60×48 orange search-tab with white magnifier icon. Account / Lists / Cart utilities flush right in 14/700 ink."
- "Design a Home Depot product card: white surface, 8px radius, 12px padding, 1px `#cccccc` hairline border (the warehouse-grid feel). Stack: 1:1 thumbnail with `object-fit: contain`, optional 'EXCLUSIVE' orange tag top-left, product title in 14/400 ink (regular weight — let the price carry punch), brand/model line in 13/400 muted, 5-star row (Home Depot orange `#f96302` filled, `#cccccc` empty) + review count in 13/400 link blue, current price in 24/700 with `tnum`, optional strikethrough original price, optional orange 'SAVE $50' callout in white 18/700, pickup-green 'FREE Pickup at [Store]' line in 12/500, orange Add to Cart button at the bottom."
- "Build a pickup-availability badge: white fill, 1px `#007e34` (pickup-green) hairline, green text 'FREE Pickup at [Store]' in Helvetica Neue 12/500, 4px radius, 4×10px padding. Anchored beneath the price on product cards. The green is the disciplined single-purpose colour — never use it for anything other than local-store availability."
- "Create a Pro-tier card: charcoal (`#333333`) header band with Pro blue `#00659e` 'FOR THE PRO' tag in white 12/700 uppercase. Beneath the header, standard product card stack (white surface, 8px radius, 1px hairline border, contained thumbnail) but with a Pro blue (`#00659e`) 'Schedule Pro Delivery' CTA instead of the consumer orange Add to Cart. The dark charcoal header is the contractor-aisle segmentation signal."
- "Design a Home Depot hero banner: full-width Home Depot orange (`#f96302`) ground, no rounded corners, 40×48px padding. Display headline in Helvetica Neue 75 Bold 48/700 white with -0.75px tracking. Sub-copy in 18/400 white. White-with-orange-text CTA at the bottom — 8px radius, 14/700 sentence case 'Shop Savings'."

### Iteration Guide

1. **8px corners on CTAs, not pills.** If your Add to Cart button has 9999px radius, you've drifted into Walmart or Target territory. Home Depot is 8px — modern but square-ish.
2. **Two-voltage palette plus green and Pro-blue.** Home Depot orange + ink for everything, pickup-green only for local-store availability, Pro blue only for contractor surfaces. No fifth colour.
3. **Sentence-case CTAs.** "Add to Cart", not "ADD TO CART". Uppercase reads as Costco; sentence case reads as Home Depot.
4. **Regular-weight product titles.** 14/400, not the 14/700 of Costco. Let the bold orange price beneath carry the visual punch.
5. **Helvetica Neue 75 Bold on display, no flourish.** No custom font. No display family beyond the 75 Bold cut named explicitly.
6. **Bordered cards.** 1px `#cccccc` on every product tile — the warehouse-grid feel borrowed from Costco's discipline. Borderless tiles read as Etsy.
7. **Orange star ratings.** Same hex as the brand mark — `#f96302`. Yellow reads as Costco; gold reads as cheap; Amazon orange `#ffa41c` reads as Amazon. Home Depot orange is Home Depot.
8. **Pickup-green is single-purpose.** If you use `#007e34` on anything other than local-store availability, you've broken the chromatic discipline.
9. **Thin orange utility strip at the top.** The 36px orange band is the brand's most distinctive top-of-page detail — never replace it with a dark band or omit it.

---

*Theme-toggle audit: score=0, signals=[none]*