The Home Depot Design System

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

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.