Home Depot DESIGN.md

Brands

Home improvement retail with vivid orange branding and highly practical commerce structure. Home Depot's public site uses strong orange (#F96302), white surfaces, black text, and tool-and-project-oriented shopping…

Raw DESIGN.md

At a glance

Group: Brands
Main color: #f96302Orange design systems
Fonts: Helvetica Neue SF Mono

Colors in this file

#f96302
Unnamed
#e5e5e5
Unnamed
#111111
Unnamed
#ffffff
Unnamed
#f7f7f7
Unnamed
#666666
Unnamed

Home improvement retail with vivid orange branding and highly practical commerce structure. Home Depot's public site uses strong orange (#F96302), white surfaces, black text, and tool-and-project-oriented shopping modules.

1. Visual Theme & Atmosphere

Overall Aesthetic

Home Depot feels like project-driven home improvement retail with strong utilitarian energy.

Mood & Feeling

Practical
Rugged
Retail-direct
Project-oriented
High-visibility

Design Density

High density. Tools, categories, and promos are packed tightly for shopping utility.

Visual Character

Orange brand anchor
White retail surfaces
Dense category and promo modules
DIY and contractor-oriented browsing

2. Color Palette & Roles

Token	Hex	Role
`--hd-orange`	`#F96302`	Primary brand and promo accent
`--hd-black`	`#111111`	Text and contrast
`--hd-white`	`#FFFFFF`	Main surface
`--hd-surface`	`#F7F7F7`	Background
`--hd-muted`	`#666666`	Secondary text
`--hd-border`	`#E5E5E5`	Borders

3. Typography Rules

Font Stack

css--font-display: "Helvetica Neue", Arial, sans-serif;
--font-sans: "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Hero 48/700, H1 34/700, H2 26/700, Body 16/400, Small 14/400

Typography Philosophy

Use strong retail typography optimized for project search and product scanability.

4. Component Stylings

css.button-primary { background:#f96302; color:#fff; border:none; border-radius:999px; min-height:42px; padding:0 18px; font-weight:700; }
.button-secondary { background:#fff; color:#111; border:1px solid #e5e5e5; border-radius:999px; min-height:42px; padding:0 18px; }
.card { background:#fff; border:1px solid #e5e5e5; border-radius:14px; }

5. Layout Principles

Spacing Scale

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

Layout Behavior

Keep category and project entry points highly visible
Support deal, tool, and home-upgrade browsing
Use orange for urgency and brand recognition

6. Depth & Elevation

Home Depot uses retail card framing more than premium elevation.

7. Do's and Don'ts

Do

Keep it practical and high-visibility
Use orange boldly but purposefully
Preserve project-based category hierarchy

Don't

Don’t make it feel boutique or lifestyle-first
Don’t hide shopping flows under decorative imagery

8. Responsive Behavior

Breakpoints

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

Responsive Rules

Keep search and category access obvious
Stack dense promo modules cleanly

9. Agent Prompt Guide

textDesign this like Home Depot: practical orange-led home-improvement retail UI with white cards, high-visibility category access, project-driven shopping hierarchy, and rugged straightforward ecommerce structure.

Use it with your agent

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

Download

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

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

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

Xiaomi

Brands · MiSans

Consumer technology at global scale with bold accessibility. Xiaomi's current public site combines bright white surfaces, vivid orange brand accents, broad product-category merchandising, and ecosystem storytelling…

Aiven

Brands · Inter

Open source data infrastructure design with practical cloud clarity, warm orange accents, and production-ready service management surfaces.

KKday

Brands · SF Mono

KKday is a Taiwan-born online travel marketplace — the place a traveler books a tea-ceremony in Kyoto, a SIM card for Bangkok, or a high-speed-rail pass before a trip — and its design system is built for one job:…

Greenvines

Brands · gv

Greenvines (綠藤生機) is Taiwan's flagship clean-beauty brand, and its site reads like a botanical manifesto typeset by a luxury magazine. The canvas is pure white (#ffffff), but the system's soul is a deep forest-green…

Substack

Brands · Georgia

Publishing with literary simplicity, serif display tone, and restrained orange brand cues. Substack's public site uses a clean editorial layout, black-and-white structure, and orange accents to frame newsletters,…

Postman