The Home Depot Design System

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.