Lowe's Design System

Lowe's marketing chrome does something most big-box retailers avoid: it gives the entire interactive surface to one saturated cobalt and saves the deep navy for the footer floor. The top banner reads "Get your home summer-ready with Memorial Day savings" in white-on-Lowe's-Blue, with the cobalt repeating down the page on every link, every icon, every focus ring, and culminating in the "RETURN HOME" CTA pill rendered as a 7px-rounded block of #0072ce. Below the fold the page floor flips to deep navy #012169, with the iconic gable-mansard house silhouette stamped over it as the wordmark transitions into the footer logo. Where Home Depot pours its orange across the hero and lets product photography do the warmth, Lowe's holds the chrome chromatically narrow — one cobalt for action, one navy for the footer floor, and a tightly scoped palette of marketing colors (light-blue for sales, red for alerts, gold for protection plans, green for sustainability) that never share the page above the fold.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 19 color tokens drawn from the Lowe's Brand Design System (every CSS var on `:root` carries the --bds-* prefix — Lowe's documents the system as "bds" internally), organized into a brand-voltage tier (cobalt #0072ce plus the hover/pressed cobalt-darker variants), a marketing-domain tier (light-blue, dark-blue, red, gold, green — five colors, each scoped to a single product domain), and a structural tier of pure-white surface, near-black ink #17191f, and three neutral grays for borders and disabled states. Eleven typography tokens span Fellix from 35px h1 down to 8.75px micro-label, with --bds-font-tag-h1-desktop-font-size declared as 2.5rem. Sixteen component definitions cover the cobalt-pill CTA, the 8px-rounded search input, the white nav banner, the dark navy footer with the gable-mansard wordmark, and the dropdown menu surfaces.

Feed this file to Claude or Cursor and it reproduces Lowe's specific moves: cobalt as the single interactive color rather than as a held-in-reserve accent, deep navy reserved for the footer floor, Fellix at modest weights (no 700+ display tier), 7px on the pill CTA and 8px on the search input as the only two rounding moments, and the scoped product-domain palette that lets a Sales tile carry light-blue without the cobalt giving way. The token references resolve cleanly — `{colors.primary}` for the cobalt, `{colors.dark-blue}` for the footer, `{typography.display-md}` for the h1 — so the AI never has to invent a value. The disciplined move worth borrowing is the five-scoped-marketing-colors pattern: each retail subdomain gets exactly one color, scoped to one --bds-color-marketing-* var, so chips and section bands self-color without diluting the cobalt voltage.