Lowe's Design System

Overview

Lowe's marketing chrome does something most big-box hardware retailers avoid. Voltage as interactive surface. The cobalt #0072ce isn't a held-in-reserve CTA accent — it owns every link, every focus ring, every icon-fill, every primary-action border and text-tint across the page, and the only background fill it makes is the single RETURN HOME pill. Where Home Depot drowns its hero in saturated orange and lets product photography carry the warmth, Lowe's holds the chrome chromatically narrow: one cobalt for action, one deep navy #012169 reserved for the footer floor where the gable-mansard house silhouette stamps the page closed. Five product-domain colors (light-blue for sales, red for alerts, gold for protection plans, green for sustainability, plus the cobalt itself) each scope to a single retail subdomain via their own --bds-color-marketing-* var; none of them share the page above the fold.

The system documents itself as the Lowe's Brand Design System — every CSS variable on :root carries a --bds-* prefix (--bds-color-action-interactive for the cobalt, --bds-font-family-fellix for the typeface, --bds-border-radius-md for the 4px increment, --bds-spacing-xs for the 8px unit). The captured page exposes 310 of these custom properties, which is the strongest signal that Lowe's treats its design system as a load-bearing engineering artifact rather than a marketing skin.

Typography is Fellix across every tier — a proprietary humanist sans built by Phantom Foundry, declared as --bds-font-family-fellix: Fellix,Arial,sans-serif. The h1 sits at 35px / weight 400 / 49px line-height — there is no 700+ display moment anywhere on the page. The h3 small-caps tier at 12.25px / weight 700 / uppercase / 28px line-height is the loudest typographic move in the system, and it's deliberately tiny so the cobalt voltage and the gable-mansard footer carry the brand recognition instead.

Key Characteristics:

• Single cobalt voltage ({colors.primary} — #0072ce) wired as --bds-color-action-interactive; carries 46 occurrences across the page (22 text, 23 border, 1 bg fill on the lone CTA pill).
• Deep-navy footer floor ({colors.dark-blue} — #012169) where the gable-mansard house silhouette stamps the wordmark transition into the footer.
• Five scoped product-domain colors — light-blue, red, gold, green, plus the cobalt itself — each in its own --bds-color-marketing-* var; never shared above the fold.
• Fellix at modest weights (400 body / 700 emphasis only on small-caps and heading-md+); no 700+ display tier on the captured surface.
• 7px on the pill CTA plus 8px on the search input as the only two rounding moments; cards, banners, footer, nav all sit at 0px.
• Visited-link state flips to purple #7f2cfc ({colors.link-visited}) — a single-purpose color that never appears anywhere else in the chrome.
• Roboto and Helvetica are the in-system fallbacks (--bds-font-family-roboto) for non-Latin scripts and the in-product editor surfaces.

Colors

Brand

• Lowe's Blue ({colors.primary} — #0072ce): frequency 46. Used as text (22), border (23), bg (1). Wired as --bds-color-action-interactive, --bds-color-marketing-interactive, --bds-color-icon-interactive, --bds-color-focus-interactive, --bds-color-text-interactive, --bds-color-border-interactive. The single chromatic interactive voltage on the page; the lone bg fill is the RETURN HOME pill.
• Cobalt Hover ({colors.primary-hover} — #0059a4): frequency 0 in captured surface. Wired as --bds-color-action-interactive-hover. Reserved for hover/press states on the primary CTA.
• Cobalt Pressed ({colors.primary-pressed} — #00386a): frequency 0 in captured surface. Wired as --bds-color-action-interactive-pressed. Reserved for active/pressed states on the primary CTA.

Marketing-domain

• Sales Light-Blue ({colors.light-blue} — #9bcbeb): frequency 121. Used as text (64), border (57). Wired as --bds-color-marketing-light-blue and --bds-color-surface-light-blue. The dominant marketing color after the cobalt — scoped to sale chips, weekly-ad banners, and the homecare promotional tile.
• Footer Navy ({colors.dark-blue} — #012169): frequency 4. Used as bg (4). Wired as --bds-color-marketing-dark-blue and --bds-color-surface-dark-blue. Reserved for the footer floor — carries the gable-mansard house silhouette as the visual transition.
• Bright Marketing Blue ({colors.marketing-blue} — #00a3e0): frequency 0 in captured surface. Wired as --bds-color-marketing-blue and --bds-color-surface-blue. Reserved for category banners on weekly-ad and seasonal-promo tiles.
• Alert Red ({colors.red} — #971b2f): frequency 1. Used as bg (1). Wired as --bds-color-marketing-red, --bds-color-action-red, --bds-color-icon-red, --bds-color-text-red. Reserved for recall banners, clearance pricing, and protection-plan urgency tags.
• Protection Gold ({colors.gold} — #f0b323): frequency 0 in captured surface. Wired as --bds-color-marketing-gold and --bds-color-surface-gold. Reserved for protection-plan badges and Lowe's PRO loyalty chips.
• Sustainability Green ({colors.green} — #007a33): frequency 0 in captured surface. Wired as --bds-color-marketing-green, --bds-color-action-green, --bds-color-text-green. Reserved for the Energy Star and sustainability-program chips.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 189. Used as text (90), bg (10), border (89). Wired as --bds-color-neutral-01, --bds-color-surface-default, --bds-color-elevation-01 through --bds-color-elevation-06. The page floor and the dominant card surface.
• Surface Subdued ({colors.surface-subdued} — #f4f6fa): wired as --bds-color-surface-subdued, --bds-color-action-neutral, --bds-color-border-contrast-inverse. The slightly-cool surface tone for the "Find a Store" and search-input rest states.
• Canvas Deep ({colors.canvas-deep} — #000000): frequency 219. Used as text (117), border (98), shadow (4). The text-default tone and the shadow-color base. Pure black; Lowe's does not soften it to a near-black charcoal.

Text

• Ink ({colors.ink} — #17191f): frequency 136. Used as text (68), border (68). Wired as --bds-color-text-primary, --bds-color-border-contrast, --bds-color-icon-primary, --bds-color-neutral-09. The dominant non-pure-black text tone on white surfaces.
• Ink Soft ({colors.ink-soft} — #333333): frequency 4. Used as text (2), border (2). The h1 text tone — slightly warmer than the structural ink.
• Ink Muted ({colors.ink-muted} — #616670): frequency 1. Used as border (1). Wired as --bds-color-neutral-06, --bds-color-border-default, --bds-color-focus-default. The hairline tone on input borders and disabled-state outlines.
• Ink Disabled ({colors.ink-disabled} — #9ea4b2): wired as --bds-color-neutral-05, --bds-color-border-disabled. Reserved for disabled-state text and outlines.

Hairlines

• Hairline ({colors.hairline} — #cbd1dd): frequency 7. Used as border (7). Wired as --bds-color-neutral-04, --bds-color-border-subdued, --bds-color-skeleton-02, --bds-color-action-neutral-pressed. The dominant hairline tone on card borders and dropdown menu edges.
• Hairline Soft ({colors.hairline-soft} — #e5e9f1): frequency 1. Used as bg (1). Wired as --bds-color-neutral-03, --bds-color-skeleton-01, --bds-color-surface-light-blue-subdued. The faintest tonal lift for skeleton loaders and subdued surface tiles.

Single-purpose

• Visited-link Purple ({colors.link-visited} — #7f2cfc): wired as --bds-color-text-visited-link. The one purple in the system; appears only on visited link states and never anywhere else.

Typography

Font Family

The system runs Fellix for every display, heading, body, button, and label surface — a proprietary humanist sans designed by Phantom Foundry. Wired in CSS as --bds-font-family-fellix: Fellix,Arial,sans-serif and --bds-font-family-fellix-roboto: Fellix,Roboto,Helvetica,Arial,sans-serif. There is no separate display family or serif tier; one humanist sans does every job, with Roboto as the in-system fallback for non-Latin scripts and the legacy editor surfaces. Helvetica appears once on a single <a> tag in the captured surface, a vestigial legacy declaration.

Hierarchy

Principles

Body weight is uniformly 400. Weight 700 appears only on h3 small-caps labels, h2+ headings, and strong-emphasis spans — there is no semibold (500/600) tier rendered on the captured page, even though --bds-font-weight-medium: 500 and --bds-font-weight-semibold: 600 are declared in CSS. The h1 at 35px / 400 / 49px line-height is the dominant heading moment; the small-caps h3 at 12.25px / 700 / uppercase / 0.21px tracking is the loudest typographic move in the system, deliberately tiny so the cobalt voltage and the gable-mansard footer carry the brand recognition.

Note on Font Substitutes

Fellix is proprietary. Inter at the same weights is the closest open-source substitute; the metrics transfer cleanly and the humanist proportions read close to Fellix at the 14-16px body sizes. For the small-caps h3 tier, IBM Plex Sans Condensed at weight 700 with 0.21px tracking also works. The Roboto fallback in the system stack is already what Lowe's ships for non-Latin scripts and the editor surfaces.

Layout

Spacing System

• Base unit: 8px (with 14px as the body-text rhythm module).
• Tokens: {spacing.xxs} 4px · {spacing.xs} 7px · {spacing.sm} 8px · {spacing.md} 11px · {spacing.base} 14px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.2xl} 32px · {spacing.3xl} 40px.
• Section padding (vertical): 14px is the dominant module (38 occurrences) with 16px as the secondary step (10 occurrences). Larger section breaks step up to 32-40px.
• Card internal padding: 11px (7 occurrences) and 0x5px (15 occurrences) on the dropdown items; 16px on full-bleed marketing tiles.
• Top-nav padding: 11x24 with an 88px overall nav height (40px logo row + 48px category row).

Grid & Container

• Max content width: ~1424px on the desktop hero (captured at 1440 viewport).
• Top nav: white surface with the gable-mansard logo at the left, an 8px-rounded search input centered, MyLowe's + Sign In + Cart icons right-aligned, and a category bar (Shop All, Installations, Deals, Design & Ideas, HomeCare, Appliances, Bathroom, Building Supplies, Doors & Windows…) sitting below at 48px height.
• Footer: deep-navy floor with a 7-column "quick-links" row (Mylow, Help Center, Order Status, Lowe's Credit Center, Gift Cards, Installation Services, Lowe's App) carrying circular icon avatars, a 4-column "About Lowe's / Stores & Services / Customer Service / Connect with Us" link grid, and a Privacy & Use column on the right.

Rhythm

The page alternates between white editorial bands (the nav, the hero, the inline category tiles) and a single deep-navy floor (the footer). There is no atmospheric gradient between bands — every section terminates on a hairline border or a 0px-rounded surface flip, and depth comes from the cobalt-on-white contrast rather than from background gradients.

Elevation

The system declares a six-tier shadow scale (--bds-shadows-shadow-01 through --bds-shadows-shadow-06) but uses none of them on the captured page above the fold. The captured hero, nav, and editorial bands are entirely flat — depth comes from cobalt-on-white contrast and from the hairline {colors.hairline} borders on cards and dropdowns rather than from drop shadows.

• Shadow tier (declared, mostly unused): the six shadow tokens range from 0px 2px 1px rgba(0,0,0,.2) at tier 01 to 0px 11px 15px rgba(0,0,0,.2) at tier 06 — reserved for modal overlays and floating tooltips in the product editor, not the marketing chrome.
• Hairline outlines: {colors.hairline} (#cbd1dd) marks the resting card edge and the dropdown menu border; {colors.hairline-soft} (#e5e9f1) marks skeleton-loader fills and subdued surface tiles.
• Tonal lift: {colors.surface-subdued} (#f4f6fa) is the slightly-cool surface tone for the "Find a Store" pill and the search-input rest state, lifted off the pure-white canvas by ~3% lightness contrast.

Shapes

The radius scale is binary plus circle:

• {rounded.none} 0px — cards, banners, footer, nav, dropdown menus, every editorial band.
• {rounded.sm} 4px — declared as --bds-border-radius-md: .25rem but rendered rarely; reserved for chips and small badges.
• {rounded.md} 7px — the dominant rounding on every CTA pill (frequency 20 — button-primary, button-secondary).
• {rounded.lg} 8px — declared as --bds-border-radius-lg: .5rem; rendered only on the text-input search field.
• {rounded.full} 9999px — circular footer-link icon avatars, the round category-icon badges in the footer quick-links row.

There is no 12px / 16px / 24px middle tier. The system is deliberately tight: 7px on action surfaces, 8px on the input, 0px on every editorial band, and circle on the footer-link icon avatars. The CSS declares --bds-border-radius-circle: 8rem as a maximum-radius helper for the full-circle treatment.

Components

button-primary — The signature CTA. Cobalt-blue {colors.primary} fill, white text, {rounded.md} 7px radius, 0x17.5 padding, 35px height. "RETURN HOME" on the 404 page and "Add to Cart" / "Find a Store" across the marketing pages are the canonical instances.

button-primary-hover — Background flips to {colors.primary-hover} (#0059a4) — a darker cobalt for hover, wired as --bds-color-action-interactive-hover. Pressed state flips further to {colors.primary-pressed} (#00386a).

button-secondary — White fill with cobalt text and a 1px cobalt border, {rounded.md} 7px radius. Used for tertiary "Learn more" and "Shop Now" CTAs in the marketing tiles.

top-nav — White {colors.canvas} surface with hairline-bottom border, 88px overall height (40px logo / search / icon row + 48px category row), {typography.body-md} link labels. Floats flush at the page top.

top-banner — Cobalt-blue {colors.primary} strip at 32px height with white text. Carries the seasonal-savings promotional message ("Get your home summer-ready with Memorial Day savings") above the main nav.

nav-link — Transparent background, ink-default text in {typography.body-md}, 0x14 padding. No hover background visible in the captured surface; the cobalt underline appears on hover via --bds-color-text-interactive.

category-link — Transparent background, ink text at {typography.label-md} (14px / 700), 0x16 padding, 48px height. The category bar below the top-nav houses these.

hero-heading — Ink-soft text on transparent, {typography.display-md} (35px / 400 / 49px line-height). The single h1 moment per page — not the loudest move in the system.

section-heading — Ink text, {typography.heading-md} (28px / 700 / 36px line-height). The h2 tier for marketing-tile section headings.

small-caps-label — Ink text, {typography.label-cap} (12.25px / 700 / uppercase / 0.21px tracking / 28px line-height). The dominant section-label treatment in the editorial grids — the loudest typographic move in the system at a deliberately tiny size.

body-paragraph — Default ink text at {typography.body-md} (14px / 400 / 21px line-height). The dominant body tier across the page.

text-input — White fill with pure-black text, {rounded.lg} 8px radius, 0x10 padding, 46px height, hairline border at {colors.hairline}. The "What can we help you find?" search field in the top nav is the canonical instance — the only 8px-rounded surface on the page.

card — White fill, ink text, {rounded.none} 0px corners (deliberate — the editorial tile aesthetic), 16px padding, hairline-soft {colors.hairline-soft} border. Used in the marketing-tile grids and the My Lists / Recently Viewed sections.

footer — Deep-navy {colors.dark-blue} fill with white text at {typography.body-sm}, 40x24 padding. The gable-mansard house silhouette stamps the transition from the body into the footer; it's the only deep-navy surface on the page.

footer-link — White text on the transparent footer floor, {typography.body-sm} (12.25px / 400 / 17.15px line-height), 8x0 padding. Includes the seven circular icon-avatar quick-links at the top of the footer.

text-link — Cobalt-blue {colors.primary} text on the transparent surface, {typography.body-sm}. The "Lowe's Credit Center" / "Order Status" inline links are canonical; visited state flips to {colors.link-visited} (#7f2cfc).

Do's and Don'ts

Do treat the cobalt as the single interactive color rather than as a held-in-reserve accent. The cobalt #0072ce wears the entire interactive surface — links, focus rings, icon-fills, primary borders, the lone CTA pill — and the system depends on that singular voltage. Multiplying the cobalt into additional bg fills above the fold would dilute the only chromatic action-signal on the page.

Do scope each marketing color to one product domain. Sales gets light-blue #9bcbeb, alerts get red #971b2f, protection plans get gold #f0b323, sustainability gets green #007a33. Each color has its own --bds-color-marketing-* var; mixing them on the same tile breaks the recognition convention.

Do keep display weight at 400 except for h3 small-caps labels and h2+ headings. The h1 at 35px / 400 / 49px line-height is the canonical hero moment in the system; bumping it to 700 would turn the editorial chrome into a generic SaaS shout.

Do reserve the deep-navy {colors.dark-blue} (#012169) for the footer floor only. It is the held-in-reserve transition color — the visual home for the gable-mansard house silhouette — and the footer is the only place it appears on the page.

Don't introduce a 12px or 16px middle radius tier. The system is binary: 7px on the CTA pill and 8px on the search input are the only two rounding moments; cards, banners, footer, dropdown menus all sit at 0px. A 12px corner would feel borrowed from a fintech system (Stripe, Plaid) rather than from Lowe's editorial chrome.

Don't apply the cobalt #0072ce as a background fill on tiles or banner bands. The single bg-fill occurrence on the captured page is the lone RETURN HOME pill — multiplying it would compete with the deep-navy footer floor and dilute the interactive voltage.

Don't use the purple #7f2cfc anywhere except on visited-link states. It is wired as --bds-color-text-visited-link only; rendering it on a CTA or a chip would break the implicit "you've been here" convention and introduce a sixth marketing voice the system doesn't tolerate.

Don't swap the canvas-deep #000000 to a near-black charcoal. Lowe's uses pure black as the --bds-color-text-solid default and as the shadow-color base; softening it to #17191f is acceptable on body text (where --bds-color-text-primary lives) but the page floor depends on the pure-white-on-pure-black contrast for legibility against the cobalt voltage.

Known Gaps

• Hover and focus states: documented for {components.button-primary-hover} and the cobalt --bds-color-action-interactive-hover / --bds-color-action-interactive-pressed only; the full state matrix (focus rings on inputs, disabled tints, error states on form fields) is partially declared in --bds-color-focus-* vars but not rendered in the captured surface.
• Product surfaces: this DESIGN.md captures the marketing chrome only. The Lowe's product-detail-page (PDP), cart, checkout, MyLowe's loyalty dashboard, and the Pro / contractor surfaces carry additional component-specific tokens (price-strikethrough red, financing-promo gold, in-stock green) that are not represented here.
• Sub-brand palettes: Lowe's PRO Rewards, MyLowe's Silver Key, and Lowe's Marketplace each have their own secondary palette layers wired as --bds-color-pro-*, --bds-color-loyalty-*, etc. — not exposed on the captured marketing surface.
• Mobile chrome: the captured surface is the desktop 1440px viewport. The mobile site collapses the top-nav into a hamburger drawer and inlines the category-link bar into a horizontally-scrolling chip rail; those token overrides live in --bds-grid-breakpoint-sm-* and --bds-font-tag-*-mobile-* vars.
• Motion: the cobalt-on-hover transitions and the dropdown menu reveals carry timing curves declared in JS rather than CSS; the spec captures end-state values only.
• Seasonal-promo display tier: the 56px {typography.display-xl} token is documented from the CSS --bds-font-tag-h1-desktop-font-size: 2.5rem plus a 1rem step-up; the actual seasonal-promo banner heading on weekly-deals pages may run larger and is not captured on the 404 surface.
• Dark mode: Lowe's declares a full *-inverse color tier (--bds-color-text-primary-inverse, --bds-color-surface-default-inverse rendering as a deep near-navy black, --bds-color-border-default-inverse) that suggests an internal-tools or product-editor dark surface, but the marketing site is light-only.