---
version: alpha
name: "The Home Depot"
website: "https://www.homedepot.com"
description: >-
  A US home-improvement retailer whose marketing chrome runs on a saturated brand orange (#f96302) that does the entire color-signaling job — primary CTA fill, badge text, sale-icon stroke, focus-ring origin — while the rest of the page sits on near-black ink #202020 over a flat white floor. Type is a layered Helvetica Neue stack: helvetica-neue-55-roman for body, helvetica-neue-75-bold for headings and buttons, and helvetica-neue-77-bold-cn (the condensed-bold cut) for the largest "FREE TOOL" promotional badges at 36px. The page exposes 421 CSS custom-property tokens (every `--sui-palette-*` from the Storefront UI design system) including a meadow-green #0d864c savings color, a mustard #ebb821 focus voltage, and a single decorative yellow #fed458 that surfaces only in the small "Garden" home-banner card.

seo:
  title: "Home Depot Design System for React — brand orange, Helvetica Neue, 19 components"
  metaDescription: "The Home Depot's marketing site design system as a DESIGN.md file. Brand orange #f96302 voltage on near-black ink, Helvetica Neue chrome with bold-condensed promo display, Storefront UI tokens, 12 colors, 19 components. For React, Next.js, and AI tools."
  highlights:
    - "Single-voltage orange — #f96302 does CTA fill, focus rings, sale-icon stroke, and badge text, and never appears as a canvas color"
    - "Helvetica Neue layered stack — three named cuts (55-roman / 75-bold / 77-bold-cn) carry body, heading, and promotional display tiers"
    - "Storefront UI tokens — 421 CSS custom properties exposed on :root, including the full sui-palette and named semantic tokens"
    - "Meadow green for savings — #0d864c carries 122 occurrences as the secondary semantic color, used exclusively for in-stock and free-delivery messaging"
    - "12px radius dominant — 87 occurrences of 12px rounding on product cards and promo blocks, with 9999px pills reserved for primary CTAs"
  tags:
    - "E-commerce & Retail"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    The Home Depot's homepage runs on a single saturated brand orange and a layered Helvetica Neue stack. The orange (#f96302) is the system voltage — it fills the primary "Skip Listing" CTA, strokes the small sale icons in the deal carousel, fills the focus ring on every form input, and carries the "$25 Garden Center Power Equipment" badge text and the deal-percentage chip text. It never appears as a canvas color or as a large surface fill. Everywhere else, the page sits on near-black ink (#202020) over a flat white floor with cream-grey product-card surfaces, and the orange enters one element at a time. Where Lowe's commits to its own saturated blue across both chrome and surfaces and Menards leans on dense unfiltered scarlet, The Home Depot keeps the orange small, scoped, and reserved for the moments that need to read as "shop now" or "save."

    The DESIGN.md file packages the system into a machine-readable spec. Inside: 12 color tokens drawn from the 421 Storefront UI custom properties exposed on `:root` — a brand orange voltage, a meadow-green savings color (#0d864c), a structural near-black ink (#202020), three tiers of grey, plus the mustard-yellow focus voltage (#ebb821) and a single decorative yellow (#fed458) for the garden-banner card. 14 typography tokens running three Helvetica Neue cuts: helvetica-neue-55-roman for body, helvetica-neue-75-bold for heading and button labels, helvetica-neue-77-bold-cn for the largest "FREE TOOL" promotional displays at 36px / 0.9px tracking. 6 corner-radius tokens centered on a 12px product-card radius with full pills for primary CTAs. 8 spacing values on an 8px base. 19 component definitions covering the orange CTA pill, the white search input, the deal-percentage chip, the green free-delivery badge, the meadow stock label, the category-tile rail, the photo-card promo grid, and the standard catalogue inventory.

    Feed this file to an AI coding tool and it reproduces The Home Depot's specific moves: scoped orange voltage that never fills a canvas, layered Helvetica Neue stack with a condensed-bold cut for the promotional shout, 12px product-card radius with 9999px pills only on primary CTAs, and the meadow-green savings color held entirely separate from the brand orange. The tokens resolve without invention — every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move worth borrowing only if your retail brand has earned the orange-equals-utility association: treating the brand color as a precision instrument rather than a canvas. Most retailers paint the brand color across surfaces; The Home Depot deploys it like a tool.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.homedepot.com"
      title: "The Home Depot — official site"
      description: "The Home Depot's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is The Home Depot's primary brand color?"
      answer: "The Home Depot's brand voltage is the saturated orange #f96302, wired into the page as --sui-palette-thd-brand, --sui-palette-background-brand, --sui-palette-brand-400, --sui-palette-button-background-primary, and --sui-palette-text-brand. It is the most-recognizable retail orange in the US category, used since the 1979 founding. The orange appears 136 times in the captured page — 65 as border, 64 as text (every link, every badge label, every focus ring), 7 as background fill (the primary CTA pill and a small set of badge chips). It never appears as a canvas color or as a large surface fill. The scope is intentional: the orange reads as utility-grade voltage rather than as decorative chrome."
    - id: "typography"
      title: "What typefaces does The Home Depot use, and what should I use as substitutes?"
      answer: "The Home Depot ships a layered Helvetica Neue stack with three named cuts. helvetica-neue-55-roman carries every body paragraph at 16px / 400, every span at 12-14px / 400, every default running text on the page. helvetica-neue-75-bold handles section headings (h2 at 30px / 400, h3 at 24px / 400, h5 at 18px / 400) and every button label. helvetica-neue-77-bold-cn — the condensed-bold cut — appears only at the largest promotional display tier: the 36px / 0.9px-tracking 'FREE TOOL' and 'BUY MORE, SAVE MORE' badges, plus the 28px sale-percentage callouts. The closest open-source substitute for all three is Inter at weights 400/700/700-condensed; for the condensed cut specifically, Roboto Condensed or Barlow Condensed at weight 700 transfer cleanly."
    - id: "meadow-green"
      title: "Why does The Home Depot have a green if the brand is orange?"
      answer: "Meadow green #0d864c is the savings and stock-availability semantic color, wired into the page as --sui-palette-text-success and --sui-palette-svg-fill-success-strong. It appears 122 times in the captured page — 61 as text, 61 as border, all scoped to in-stock chips, free-delivery badges, savings callouts, and the small percent-off labels on deal carousels. The discipline is strict: the orange does the brand and primary-CTA jobs, the meadow green does the savings and availability jobs, and the two colors never share a component. A 'Free delivery' label is always green; a 'Shop now' CTA is always orange. The single semantic split is the most-load-bearing element of The Home Depot's component-color discipline."
    - id: "storefront-ui"
      title: "Why does The Home Depot expose so many CSS custom properties?"
      answer: "The Home Depot's design language is built on Storefront UI (SUI), a proprietary token system that exposes 421 CSS custom properties on `:root`. Every color, semantic role, and component slot has a named variable: --sui-palette-brand-400 (the orange), --sui-palette-meadow-500 (the savings green), --sui-palette-button-background-primary, --sui-palette-text-success, --sui-palette-input-border-focus, and so on. The system also exposes a full palette of named decorative colors (tradewind teal, terracota red, tangerine, mustard, meadow) that are declared as tokens but appear sparingly on the marketing surface. The DESIGN.md captures the 12 colors that actually render on the homepage; the broader SUI palette is available for product detail pages, checkout flows, and tool-rental sub-surfaces."
    - id: "radii-and-pills"
      title: "What corner-radius scale does The Home Depot use?"
      answer: "The radius scale is content-plus-pill. 12px appears 87 times on product cards, promotional blocks, photo grid tiles, and the search input — the dominant rounding on the page. 9999px appears 44 times on pill-shaped primary CTAs and inline category chips. 8px appears 25 times on the orange CTA buttons themselves and on secondary cards. 4px appears 16 times on tiny chips and metadata pills. There is no 16 / 20 / 24px middle tier — the system steps from 12px content to a full pill. The 8px button radius is the odd one out and reads as a smaller, more compact action surface than the pill CTAs elsewhere on the page."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own retail marketing site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce The Home Depot's specific moves: scoped brand-orange voltage that never fills a canvas, the layered Helvetica Neue stack with a condensed-bold cut for the promotional shout, the meadow-green semantic color reserved for savings and availability, and the 12px content radius plus 9999px pill action treatment. The tokens resolve without invention — every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move worth borrowing only if your brand has an earned utility association is the precision-instrument approach: orange is for the tappable action, not for the page surface."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  primary: "#f96302"
  meadow: "#0d864c"
  focus-yellow: "#fed458"
  ink: "#202020"
  ink-soft: "#333333"
  muted: "#757575"
  hairline-strong: "#bfbfbf"
  surface-1: "#e0e0e0"
  surface-subtle: "#f3f3f3"
  canvas: "#ffffff"
  shadow: "#000000"
  focus-ring: "#3b82f6"

typography:
  display-xl:
    fontFamily: "helvetica-neue-77-bold-cn, ui-sans-serif, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 45px
    letterSpacing: "0.9px"
  display-md:
    fontFamily: "helvetica-neue-77-bold-cn, ui-sans-serif, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0
  heading-lg:
    fontFamily: "helvetica-neue-75-bold, ui-sans-serif, system-ui, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 37.5px
    letterSpacing: 0
  heading-md:
    fontFamily: "helvetica-neue-75-bold, ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: 0
  heading-sm:
    fontFamily: "helvetica-neue-75-bold, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 22.5px
    letterSpacing: 0
  display-sm-cn:
    fontFamily: "helvetica-neue-77-bold-cn, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 22.5px
    letterSpacing: "0.45px"
  body-lg:
    fontFamily: "helvetica-neue-55-roman, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-md:
    fontFamily: "helvetica-neue, \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0
  body-sm:
    fontFamily: "helvetica-neue-55-roman, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0
  body-xs:
    fontFamily: "helvetica-neue, \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 13.8px
    letterSpacing: 0
  label-bold:
    fontFamily: "helvetica-neue-55-roman, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 15px
    letterSpacing: 0
  caption:
    fontFamily: "helvetica-neue-55-roman, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: 0
  button-md:
    fontFamily: "helvetica-neue-75-bold, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  nav-link:
    fontFamily: "helvetica-neue-75-bold, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 22.5px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  sm: "4px"
  md: "8px"
  lg: "12px"
  full: "9999px"

spacing:
  xs: "2px"
  sm: "4px"
  base: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"

components:
  utility-bar:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-xs}"
    rounded: "{rounded.none}"
    padding: "4px 16px"
    height: "24px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "12px 24px"
    height: "72px"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "0px 8px"
  search-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "12px"
    height: "44px"
    borderColor: "{colors.hairline-strong}"
  hero-heading:
    backgroundColor: transparent
    textColor: "{colors.ink-soft}"
    typography: "{typography.display-xl}"
  section-heading:
    backgroundColor: transparent
    textColor: "{colors.ink-soft}"
    typography: "{typography.heading-lg}"
  body-paragraph:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
  body-paragraph-muted:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.body-md}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "0px 16px"
    height: "44px"
    border: "0"
  button-primary-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "12px 24px"
    height: "44px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "0px 16px"
    height: "44px"
    borderColor: "{colors.ink}"
  category-chip:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: "8px 16px"
    height: "36px"
    borderColor: "{colors.hairline-strong}"
  free-tool-badge:
    backgroundColor: transparent
    textColor: "{colors.ink-soft}"
    typography: "{typography.display-xl}"
    padding: "0px"
  sale-percent-chip:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.display-md}"
  savings-label:
    backgroundColor: transparent
    textColor: "{colors.meadow}"
    typography: "{typography.label-bold}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "16px"
    borderColor: "{colors.surface-1}"
  category-photo-card:
    backgroundColor: "{colors.surface-subtle}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.lg}"
    padding: "16px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.none}"
    padding: "12px"
    height: "44px"
    borderColor: "{colors.muted}"
  email-cta:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-bold}"
    rounded: "{rounded.full}"
    padding: "8px 16px"
    height: "32px"
---

## Overview

The Home Depot's homepage runs the brand color as a precision instrument rather than a canvas. **Voltage as tool**: the saturated brand orange (`{colors.primary}` — #f96302) fills the primary "Skip Listing" CTA, strokes the small sale icons on the deal carousel, fills the focus ring on every form input, carries the "$25 Garden Center Power Equipment" badge text, and renders the deal-percentage chip text. It never appears as a canvas color, never as a large surface fill, never bleeds across the chrome. Where Lowe's commits its blue to both chrome and surface alike and Menards floods the page with unfiltered scarlet, The Home Depot keeps the orange small, scoped, and deployed one element at a time — utility-grade voltage rather than retail decoration.

The structural ink is near-black `{colors.ink}` (#202020), wired as `--sui-palette-text-primary` and rendering 2419 times — 1234 as text, 1179 as border. Body paragraphs, h3 product titles, nav links, and inventory pricing all sit at this exact value. The page never reaches for pure black; even shadows and the most-emphasized text stop at #202020. The white canvas (`{colors.canvas}` — #ffffff) appears 150 times — 111 as background, 18 as text reversed on the orange CTA. Surfaces between the canvas and ink walk a three-tier neutral grey ladder (`{colors.surface-subtle}` → `{colors.surface-1}` → `{colors.hairline-strong}` → `{colors.muted}` → `{colors.ink-soft}`) before settling on the ink color.

**Layered Helvetica Neue stack at three cuts**: helvetica-neue-55-roman carries body paragraphs and dense inventory text; helvetica-neue-75-bold handles every heading and button label; helvetica-neue-77-bold-cn (the condensed-bold cut) surfaces only at the 36px / 0.9px-tracking promotional display tier ("FREE TOOL," "BUY MORE, SAVE MORE"). The condensed-bold cut is the in-page promotional shout — used 4 times on the captured page, all on the same campaign card pattern. The pairing of body roman + heading bold + display bold-condensed is the editorial-utility signature; most retailers ship a single Helvetica weight ladder, and the condensed cut is what gives The Home Depot the warehouse-banner reading.

**Key Characteristics:**
- Single scoped voltage `{colors.primary}` (#f96302) — 136 occurrences, 64 as text, 65 as border, 7 as background. Wired as `--sui-palette-thd-brand`, `--sui-palette-background-brand`, `--sui-palette-text-brand`, plus a chain of button-and-focus aliases.
- Meadow-green savings color `{colors.meadow}` (#0d864c) — 122 occurrences, 61 as text, 61 as border. Wired as `--sui-palette-text-success`. The single semantic color that does the "savings" and "in stock" jobs without ever sharing a component with the brand orange.
- Layered Helvetica Neue stack — helvetica-neue-55-roman for body, helvetica-neue-75-bold for heading, helvetica-neue-77-bold-cn (condensed-bold) for the promotional display tier.
- Storefront UI design system — 421 CSS custom properties exposed on `:root`, the most-comprehensive token surface in the retail category. The DESIGN.md captures the 12 colors that actually render on the homepage.
- Mustard focus voltage `{colors.focus-yellow}` (#fed458) — 2 occurrences as background, used only on the "Outdoor Garden Made Easy" home-banner card. Wired into the deeper mustard #ebb821 as `--sui-palette-button-background-focus` and `--sui-palette-input-border-focus`.
- 12px dominant content radius — 87 occurrences of `{rounded.lg}` 12px on product cards, photo tiles, promo blocks, and the search input.
- 9999px pill — 44 occurrences on primary action surfaces and category chips, reserved for the most-tappable elements on the page.
- Cool blue focus ring `{colors.focus-ring}` (#3b82f6) — Tailwind's default `--tw-ring-color`. Appears 3 times as shadow only; never as text or border.
- 8px base spacing unit with major tokens at 16 / 24 / 32px. The system has no 6 / 10 / 14px intermediate.
- Skip-listing pattern — the primary CTA is labeled "Skip Listing" on the captured product carousel, reflecting the dense-catalogue retail use case rather than the marketing-tour pattern.

## Colors

### Brand

- **The Home Depot Orange** (`{colors.primary}` — #f96302): frequency 136 — 64 as text, 65 as border, 7 as background. The single brand voltage — fills the primary CTA pill, strokes sale icons, carries badge text on photo banners, and acts as the focus-ring origin. Wired in CSS as `--sui-palette-thd-brand`, `--sui-palette-background-brand`, `--sui-palette-button-background-primary`, `--sui-palette-text-brand`, `--sui-palette-svg-fill-brand`, `--sui-palette-brand-400`, and 5 other aliases. Never used as a canvas color.

### Semantic

- **Meadow Green** (`{colors.meadow}` — #0d864c): frequency 122 — 61 as text, 61 as border. The savings and availability semantic — used on "Free delivery" badges, "In stock" labels, and percent-off chips on deal carousels. Wired as `--sui-palette-text-success`, `--sui-palette-svg-fill-success-strong`, `--sui-palette-status-success-500`, `--sui-palette-meadow-500`, `--sui-palette-border-success-strong`, and `--sui-palette-border-success-strongest`. Never shares a component with the brand orange.
- **Focus Yellow** (`{colors.focus-yellow}` — #fed458): frequency 2 as background. Used only on the "Outdoor Garden Made Easy" home-banner card as the decorative panel fill. Wired as `--sui-palette-mustard-100`. The deeper mustard #ebb821 in the token chain (declared as `--sui-palette-button-background-focus`) is the focus-state voltage but does not render on the captured surface.
- **Focus Ring** (`{colors.focus-ring}` — #3b82f6): frequency 3 as shadow only. The Tailwind-default ring color wired as `--tw-ring-color`, rendering as `rgb(59 130 246 / .5)` on focusable surfaces. The only blue in the system.

### Text

- **Ink** (`{colors.ink}` — #202020): frequency 2419 — 1234 as text, 1179 as border, 6 as background. The dominant text color across body, h3 product titles, nav, and inventory pricing. Wired as `--sui-palette-text-primary`, `--sui-palette-gray-900`, `--sui-palette-neutral-900`, `--sui-palette-text-dark`, and `--sui-palette-svg-dark`. The page never reaches for pure black.
- **Ink Soft** (`{colors.ink-soft}` — #333333): frequency 1286 — 645 as text, 641 as border. The h2 section-heading and promotional-display text color. Wired as `--sui-palette-gray-800`, `--sui-palette-neutral-800`.
- **Muted** (`{colors.muted}` — #757575): frequency 216 — 100 as text, 116 as border. Secondary metadata, "View more" links, footer category sub-labels. Wired as `--sui-palette-text-subtle`, `--sui-palette-gray-500`, `--sui-palette-input-border-primary`.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 150 — 111 as background, 18 as text (reversed on the orange CTA), 18 as border, 3 as shadow. Wired as `--sui-palette-white`, `--sui-palette-neutral-0`, `--sui-palette-background-primary`, `--sui-palette-svg-light`, and `--sui-palette-text-light`.
- **Surface-1** (`{colors.surface-1}` — #e0e0e0): frequency 128, all as background. The product-photo backplate color and the category-tile fill. A faintly-darker grey near-duplicate clusters into this representative tone, wired as `--sui-palette-gray-100` and `--sui-palette-neutral-100`.
- **Surface Subtle** (`{colors.surface-subtle}` — #f3f3f3): frequency 3 as background. The lightest grey on the page — used as the "Outdoor Garden Made Easy" pale-cream card surface. Wired as `--sui-palette-gray-50`, `--sui-palette-neutral-50`, `--sui-palette-background-subtle`, `--sui-palette-background-inactive`, `--sui-palette-button-background-inactive-primary`.
- **Hairline Strong** (`{colors.hairline-strong}` — #bfbfbf): frequency 85 — 22 as text, 63 as border. The card-divider tone and the search-input outline. Wired as `--sui-palette-gray-200`, `--sui-palette-neutral-200`, `--sui-palette-input-border-inactive`, `--sui-palette-outline-primary`.

### Shadow

- **Shadow** (`{colors.shadow}` — #000000): frequency 18 — 16 as shadow, 1 as text, 1 as border. The neutral shadow ink used at low opacity on elevated cards and dropdown halos. Wired as `--sui-palette-black`.

## Typography

### Font Families

The system runs a layered **Helvetica Neue** stack with three named cuts. **helvetica-neue-55-roman** carries body paragraphs at 16px / 400, spans at 12-14px / 400, and most dense inventory text. **helvetica-neue-75-bold** handles every heading (h2 at 30px, h3 at 24px, h5 at 18px) and every button label. **helvetica-neue-77-bold-cn** — the condensed-bold cut — surfaces only at the 36px / 0.9px-tracking promotional display tier ("FREE TOOL," "BUY MORE, SAVE MORE"). The fallback stack on each cut walks `ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji"`.

The three-cut layering is the typographic signature. Most retailers ship a single Helvetica weight ladder; The Home Depot exposes the named cuts directly in `font-family` declarations and reserves the condensed-bold cut for the campaign-display tier exclusively. The result reads as warehouse banner — the bold-condensed type is the same family the brand uses on physical store signage.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 36px | 400 | 45px | 0.9px | Promotional display ("FREE TOOL," "BUY MORE, SAVE MORE") — condensed-bold cut |
| `{typography.display-md}` | 28px | 400 | 28px | 0 | Sale-percentage callouts ("Up to 40% OFF Select Patio") — condensed-bold cut |
| `{typography.heading-lg}` | 30px | 400 | 37.5px | 0 | h2 section heads ("Memorial Day Savings") — bold cut |
| `{typography.heading-md}` | 24px | 400 | 30px | 0 | h3 sub-section titles — bold cut |
| `{typography.heading-sm}` | 18px | 400 | 22.5px | 0 | h5 photo-card titles, button labels — bold cut |
| `{typography.display-sm-cn}` | 18px | 400 | 22.5px | 0.45px | Mid-size condensed promo callouts |
| `{typography.body-lg}` | 16px | 400 | 24px | 0 | Default running text, paragraph body |
| `{typography.body-md}` | 14px | 400 | 21px | 0 | Default body in helvetica-neue base stack |
| `{typography.body-sm}` | 14px | 400 | 21px | 0 | Default body in 55-roman cut |
| `{typography.body-xs}` | 12px | 400 | 13.8px | 0 | Utility-bar text, button labels in compact contexts |
| `{typography.label-bold}` | 12px | 700 | 15px | 0 | Bold tiny labels — savings chips, status badges |
| `{typography.caption}` | 12px | 400 | 15px | 0 | Caption rows, "While supplies last" disclaimers |
| `{typography.button-md}` | 16px | 400 | 24px | 0 | Primary and secondary button labels — bold cut |
| `{typography.nav-link}` | 18px | 400 | 22.5px | 0 | Top-nav category labels — bold cut |

### Principles

Weight is always declared as 400 because the family name carries the weight semantic (helvetica-neue-55-roman is regular, helvetica-neue-75-bold is bold, helvetica-neue-77-bold-cn is bold-condensed). The CSS `font-weight` property stays at 400 throughout. The promotional display tier sits at 36px / 0.9px-tracking — the tightest tracking on the page after the secondary 18px condensed (0.45px). Body paragraphs sit at 16px / 24px line-height (1.5x); heading line-heights run at 1.25x; promotional displays run at 1.0-1.25x. The system tightens vertical rhythm as type scales up.

### Note on Font Substitutes

Helvetica Neue is a licensed family. The closest open-source substitute for all three cuts is **Inter** — Inter Variable at weight 400 substitutes for 55-roman, Inter at weight 700 substitutes for 75-bold, and **Inter at weight 700 with a condensed scale** approximates 77-bold-cn (true condensed-bold is rare in open-source). **Roboto Condensed** or **Barlow Condensed** at weight 700 are closer matches for the 77-bold-cn cut at the 36px display tier; **Bebas Neue** is a single-weight alternative that reads close to the warehouse-banner feel.

## Layout

### Spacing System

- **Base unit:** 8px — the dominant token, 103 occurrences in the captured page.
- **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 4px · `{spacing.base}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 48px.
- **Utility-bar padding:** 4x16 on the slim orange band above the main nav (24px tall).
- **Top-nav padding:** 12x24 on the main white nav band (72px tall).
- **Card internal padding:** `{spacing.lg}` (16px) on product cards and photo-card promo tiles.
- **Promo block padding:** `{spacing.xl}` (24px) on the larger "Memorial Day Savings" campaign card.

### Grid & Container

- **Page max-width:** ~1280px — desktop-first with edge-to-edge promotional cards above the fold.
- **Utility bar:** full-bleed orange strip carrying delivery zip-code, store-locator, and lists/account links. 24px tall.
- **Top nav:** full-bleed white band with logomark left, search center, and account/cart cluster right. 72px tall.
- **Above-fold deal carousel:** 4-up product cards on `{colors.canvas}` surface with the brand orange "OFFER ENDS IN..." countdown above.
- **Memorial Day grid:** 6-up category-photo cards in a single row, each `{rounded.lg}` 12px corner radius.
- **Mid-page promo cards:** 2-up split between a saturated orange "BUY MORE, SAVE MORE" card and a saturated yellow "BUNDLE DEAL" card. The two are the only large brand-orange and brand-yellow surfaces.
- **Category photo grid:** 3-up rows of "Outdoor Garden Made Easy" style cards with photography backplates.

### Rhythm

The page is structured as **utility bar → nav → deal carousel → savings campaign → daily deals → category showcase → footer**. The vertical chrome before any product carousel is ~96px (utility bar + nav). Below, each section runs ~280-450px tall with a `{spacing.2xl}` (32px) gap. The savings campaign card is the densest visual moment on the page — it stacks a 36px condensed-bold headline, a 24px sub-headline, and a 4-up product grid on a single white card. Everywhere else the page alternates dense and generous rhythm, with the dense bands always carrying the largest brand-orange voltage and the generous bands carrying photo-led category showcases.

## Shapes

The radius scale is **content + pill**.

- `{rounded.xs}` 2px — small metadata chips (9 occurrences).
- `{rounded.sm}` 4px — tiny chips and inline badges (16 occurrences).
- `{rounded.md}` 8px — the primary action button (25 occurrences). Note this is smaller than the dominant card radius — the CTA is deliberately tighter than the surrounding cards.
- `{rounded.lg}` 12px — the dominant content radius (87 occurrences). Product cards, photo tiles, promo blocks, search input.
- `{rounded.full}` 9999px — pill CTAs and category chips (44 occurrences). The most-tappable surfaces on the page.
- There is no 16 / 20 / 24px middle radius tier — the system steps from 12px content directly to 9999px pill.

The CTA at 8px and the card at 12px is a deliberate gap. The smaller button radius signals "tappable action" against the larger card radius signaling "content surface" — the customer's eye lands on the tighter geometry first.

## Elevation

The system has a **light shadow tier**, scoped to elevated promotional cards and dropdown menus.

- **Flat (no shadow):** nav, utility bar, body bands, photo-card grids, footer — 95% of surfaces.
- **Card shadow:** the "Memorial Day Savings" campaign block and the promotional carousel cards carry a soft `{colors.shadow}` (#000000) at low opacity, 16-20px blur, no offset. Wired as `--tw-shadow` and `--tw-shadow-colored`.
- **Dropdown shadow:** the account / cart hover menus carry a sharper black-at-opacity shadow with 4-8px blur.
- **Focus ring:** focusable inputs render a `{colors.focus-ring}` (#3b82f6) at 50% opacity, 0 spread. Tailwind default.

The shadow scope is narrow. Most cards lift from the canvas by `{colors.surface-1}` borders rather than shadow halos; the elevated treatment is reserved for the campaign blocks and the dropdown surfaces.

## Components

**`utility-bar`** — The slim brand-orange `{colors.primary}` strip above the main nav, 24px tall, 4x16 padding. Holds delivery-zip-code, store-locator pin, and account/lists cluster in `{typography.body-xs}` white. The largest brand-orange surface on the page; the only place the orange functions as a canvas fill.

**`top-nav`** — White `{colors.canvas}` surface, 72px tall, 12x24 padding. Logomark left (the orange THD square), search center, account/cart cluster right.

**`nav-link`** — Transparent fill, `{colors.ink}` text in `{typography.nav-link}` (helvetica-neue-75-bold cut, 18px). Category hover labels in the secondary nav row.

**`search-input`** — White `{colors.canvas}` fill, `{colors.hairline-strong}` 1px border, `{rounded.lg}` 12px radius, 12px padding, 44px tall. Sits at the center of the nav band with a magnifying-glass icon button on the right.

**`hero-heading`** — `{colors.ink-soft}` (#333333) text, `{typography.display-xl}` (36px / 0.9px-tracking, helvetica-neue-77-bold-cn cut). "FREE TOOL," "BUY MORE, SAVE MORE" — the condensed-bold promotional display.

**`section-heading`** — `{colors.ink-soft}` text, `{typography.heading-lg}` (30px / 400, bold cut). "Memorial Day Savings," "Move Worthy Deals."

**`body-paragraph`** — Default `{colors.ink}` running text at `{typography.body-lg}` (16px / 400, roman cut). The workhorse copy style.

**`body-paragraph-muted`** — `{colors.muted}` variant at `{typography.body-md}` for caption and secondary copy.

**`button-primary`** — Brand-orange `{colors.primary}` fill, white text, `{rounded.md}` 8px radius (tighter than the card radius), 0x16 padding, 44px tall, `{typography.button-md}` bold-cut label. "Skip Listing" on the carousel, "Shop Now" on campaign cards.

**`button-primary-pill`** — Same orange fill and dimensions, but with `{rounded.full}` 9999px radius. Used on emphasis CTAs in the home-banner cards ("Get the deal").

**`button-secondary`** — White fill, ink text, 1px ink border, `{rounded.md}` 8px radius, 44px tall. Used for secondary actions adjacent to a primary CTA.

**`category-chip`** — White fill, ink text, 1px `{colors.hairline-strong}` border, `{rounded.full}` 9999px radius, 8x16 padding, 36px tall. The inline category-tab strip ("New · Trending · Top Deals · Brand").

**`free-tool-badge`** — Transparent background, `{colors.ink-soft}` text at `{typography.display-xl}` (the 36px condensed-bold cut). "FREE TOOL" stacked above a product photo — the system's brand-display moment without a colored fill.

**`sale-percent-chip`** — Transparent background, `{colors.primary}` text at `{typography.display-md}` (28px condensed-bold). "20% OFF," "40% OFF" inline percent-off callouts.

**`savings-label`** — `{colors.meadow}` (#0d864c) text at `{typography.label-bold}` (12px / 700). "FREE DELIVERY," "IN STOCK," "$15 SAVINGS" — the green semantic that never overlaps the brand orange.

**`card`** — White `{colors.canvas}` fill, `{colors.surface-1}` 1px border, `{rounded.lg}` 12px radius, 16px padding. The default product-card surface.

**`category-photo-card`** — Pale-cream `{colors.surface-subtle}` (#f3f3f3) fill, ink text, `{rounded.lg}` 12px radius, 16px padding. The "Outdoor Garden Made Easy" home-banner pattern. The decorative `{colors.focus-yellow}` (#fed458) appears as accent inside this card.

**`text-input`** — White fill, ink text, 1px `{colors.muted}` bottom border (not a full outline), no border-radius, 12px padding, 44px tall. The email-signup form input — distinct from the search input in that it uses a bottom-rule underline rather than a full outlined pill.

**`email-cta`** — The footer email-signup CTA pill. White fill on the orange utility bar surface, `{typography.label-bold}` text, `{rounded.full}` 9999px radius, 8x16 padding.

## Do's and Don'ts

**Do** treat `{colors.primary}` (#f96302) as a precision tool. The orange does CTA fill, focus rings, sale-icon stroke, and badge text — never canvas, never large surface fills. Painting the orange across a page section breaks the "voltage for action" reading the system depends on.

**Do** use `{colors.meadow}` (#0d864c) only for savings and availability messaging. "Free delivery," "In stock," and percent-off chips are green; everything else stays on the orange or ink palette. Mixing the green into a primary CTA destroys the semantic split.

**Do** reserve helvetica-neue-77-bold-cn (the condensed-bold cut) for the 36px promotional display tier. Running condensed-bold at smaller sizes (14-20px) cheapens the warehouse-banner reading and clutters the chrome.

**Do** match the system's 8px button radius and 12px card radius. The CTA-tighter-than-card geometry is the visual signal that the button is a discrete action against the surrounding content surface. Matching them (both 8px or both 12px) softens the contrast.

**Don't** use `{colors.surface-1}` (#e0e0e0) as a text color or border. It is a background-only token (128 of 128 occurrences are background fills). For borders use `{colors.hairline-strong}` (#bfbfbf); for text use `{colors.muted}` (#757575) or `{colors.ink}`.

**Don't** stack the orange CTA on a brand-orange surface. The button-on-utility-bar pattern uses white CTA on orange; the button-on-canvas pattern uses orange CTA on white. The two never invert. An orange-on-orange CTA disappears into the band.

**Don't** introduce a 16 / 20 / 24px middle radius tier. The system steps from 12px content to 9999px pill. Adding a middle softens the tap-affordance signal and makes the page read as a generic SaaS commerce template.

**Don't** apply the brand orange to body text below 16px. The orange functions as badge-and-link voltage at 12-14px label sizes and as CTA-fill at 16px+ button sizes. Using it as a paragraph color creates an unread "construction-cone" effect and overwhelms the workhorse ink palette.

## Known Gaps

- **Hover and focus states:** documented for resting states only. The 421 SUI palette tokens declare `--sui-palette-button-background-hover-primary`, `--sui-palette-button-border-hover`, and a hover chain for every interactive surface, but the captured page renders no hover state.
- **Dark mode:** the captured page is light-only. No dark-mode tokens render on the marketing surface; the SUI palette declares neutral-950 and inverse roles but they do not appear.
- **Form input error states:** the captured forms carry resting states. Error / validation styling lives in checkout and tool-rental flows and is not represented here.
- **Authenticated chrome:** the captured surface is unauthenticated. The Pro Xtra and authenticated homepages expose surface tokens (loyalty badges, B2B pricing chips) that are not represented.
- **Sub-brand chrome:** Pro Xtra, Tool Rental, Home Depot Design Center, and Workshops sub-surfaces share the parent SUI palette but expose distinct component sets not captured by this file.
- **Mobile breakpoints:** the captured surface is desktop-only at 1280px. The radius scale, the utility-bar pattern, and the deal-carousel layout all collapse differently on mobile.
- **Motion:** the deal carousel auto-advances with a chevron control, and the home-banner cards rotate on a longer interval. The spec captures end-state values only; easing curves, dwell timing, and rotation intervals live in the live page runtime.
- **Storefront UI palette breadth:** The Home Depot's SUI design system exposes 421 CSS custom properties covering tradewind teal, terracota red, tangerine, mustard, and meadow color families. The DESIGN.md captures the 12 colors that actually render on the homepage; the remaining ~30 named colors appear on product detail pages and sub-surfaces.