--- version: alpha name: "Lowe's" website: "https://www.lowes.com" description: >- A US home-improvement retailer whose marketing chrome runs the entire page on a single saturated cobalt called Lowe's Blue (#0072ce), with the deep-navy #012169 reserved for the footer floor and the gable-mansard house silhouette stamped over it. Type runs Fellix (a proprietary humanist sans wired into CSS as --bds-font-family-fellix) across every tier — h1 at 35px / weight 400, body at 14px / 400, uppercase 12.25px h3 labels — never reaching the 700+ weight that big-box competitors like Home Depot lean on. The radius scale is 7px on every CTA pill plus an 8px corner on the search input, the only two rounding moments in the system. Brand chrome borrows from the Lowe's Brand Design System (every CSS var carries a --bds-* prefix), and the marketing voice runs five subdomain colors — light-blue #9bcbeb for sales, red #971b2f for alerts, gold #f0b323 for protection plans, green #007a33 for sustainability — each scoped to a single product domain. seo: title: "Lowe's Design System for React — cobalt blue #0072ce, Fellix, 17 components" metaDescription: "Lowe's marketing chrome captured as a DESIGN.md spec. Cobalt-blue voltage as the single interactive color, deep-navy footer floor, Fellix at 35px / weight 400. Tokens for React, Next.js, and AI coding tools." highlights: - "Cobalt-blue voltage — Lowe's Blue #0072ce wired as --bds-color-action-interactive carries every CTA, link, focus ring, and icon-fill across the page, with the deep-navy #012169 held for the footer floor and the gable-mansard silhouette" - "Five product-domain accents — light-blue #9bcbeb for sales, red #971b2f for alerts, gold #f0b323 for protection plans, green #007a33 for sustainability, plus the cobalt itself, each scoped to its own --bds-color-marketing-* var" - "Fellix across every tier — the proprietary humanist sans runs 35px / 400 display down to 12.25px / 400 uppercase labels, with no 700+ weight anywhere; --bds-font-family-fellix declares the family" - "7px pill plus 8px input — only two rounded moments on the entire page; everything else (cards, dropdowns, banner bands) sits at 0px" - "Cooler-than-blue link state — visited links flip to #7f2cfc (--bds-color-text-visited-link), a single-purpose purple that never appears anywhere else" tags: - "E-commerce & Retail" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.lowes.com" title: "Lowe's — official site" description: "Lowe's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Lowe's primary brand color?" answer: "Lowe's brand voltage is the cobalt #0072ce, called Lowe's Blue internally and wired into the CSS as --bds-color-action-interactive, --bds-color-marketing-interactive, --bds-color-icon-interactive, --bds-color-focus-interactive, --bds-color-text-interactive, and --bds-color-border-interactive. It appears 46 times across the captured page — 22 as text, 23 as border, and a single background fill on the RETURN HOME pill CTA. The hover state flips to a darker cobalt #0059a4 (--bds-color-action-interactive-hover) and the pressed state to a navy-cobalt #00386a (--bds-color-action-interactive-pressed). The deeper marketing navy #012169 is wired as --bds-color-marketing-dark-blue and reserved for the footer floor and the gable-mansard logo lockup." - id: "typography" title: "What typeface does Lowe's use, and what should I use as a substitute?" answer: "Lowe's runs Fellix — a proprietary humanist sans designed by Phantom Foundry, declared in CSS as --bds-font-family-fellix: Fellix,Arial,sans-serif and --bds-font-family-fellix-roboto: Fellix,Roboto,Helvetica,Arial,sans-serif. The marketing site uses it across every tier: h1 at 35px / weight 400 / 49px line-height, h3 small-caps labels at 12.25px / weight 700 / 28px line-height / uppercase, body at 14px / 400, footer copy at 12.25px / 400 / 17.15px line-height. There is no 700+ display moment on the page — even the h1 sits at weight 400. The closest open-source substitute is Inter at the same weights; for the small-caps h3 tier, IBM Plex Sans Condensed at weight 700 also works. The Roboto fallback in the system stack is the in-product substitute for non-Latin scripts." - id: "marketing-colors" title: "Why does Lowe's have so many marketing colors if the brand is cobalt blue?" answer: "The structural-tier colors are not secondary brand accents — they are product-domain identifiers, the same pattern Cloudflare uses for Compute / Storage / AI / SASE. Sales is light-blue #9bcbeb (--bds-color-marketing-light-blue / --bds-color-surface-light-blue), alerts and clearance are red #971b2f (--bds-color-marketing-red), protection plans are gold #f0b323 (--bds-color-marketing-gold), sustainability is green #007a33 (--bds-color-marketing-green), and the deeper navy #012169 (--bds-color-marketing-dark-blue) carries the footer. The Brand Design System documents each color as scoped to a single retail subdomain — a Sales chip wears light-blue, a Recall banner wears red, a Protection Plan tile wears gold — so the cobalt voltage remains singular and the marketing tiles self-color without competing." - id: "radii-and-pills" title: "What corner-radius scale does Lowe's use?" answer: "The radius scale is binary plus circle: 7px on every CTA pill (frequency 20 in the captured page — the dominant rounding) and 8px on the search input. The CSS declares --bds-border-radius-md: .25rem (4px) but the rendered components use 7px on pill buttons (--bds-border-radius-lg approximates this at 8px). Everything else — cards, dropdown menus, banner bands, footer surface — sits at 0px. The fully-circular 50% radius (--bds-border-radius-circle declared at 8rem max) appears 7 times on icon avatars and the round footer-link icons. There is no 12px / 16px / 24px middle tier; the system is deliberately tight." - id: "footer-floor" title: "Why is the footer a deep navy instead of the brand cobalt?" answer: "The footer floor renders as #012169 (--bds-color-marketing-dark-blue and --bds-color-surface-dark-blue), a deep navy that lives in the marketing palette as a held-in-reserve floor color. The cobalt #0072ce is the interactive voltage — it must remain associated with action, links, and focus across the page — so the footer needs a darker contrast tone that reads as Lowe's-brand-blue without competing with the cobalt above it. The gable-mansard house silhouette (Lowe's registered trademark, the architectural ghost of a 1920s Mooresville hardware store) is stamped over the navy as the visual transition from the body into the footer. White-on-navy footer copy at 12.25px / 400 reads as restrained editorial chrome rather than as a second voltage." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own home-improvement retail site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Lowe's specific moves: cobalt as the single interactive color across CTAs / links / focus / icons, deep navy reserved for the footer floor, Fellix at modest weights (no 700+ display tier), 7px on pill CTAs and 8px on the search input as the only two rounding moments, and the scoped product-domain palette where Sales gets light-blue, alerts get red, protection plans get gold, and sustainability gets green. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The disciplined move worth borrowing is the five-scoped-marketing-colors pattern — each retail subdomain claims exactly one color and never shares it, so the cobalt voltage remains singular even with five secondary tones on the page." mockups: - "marketing-hero" - "media-grid" colors: primary: "#0072ce" primary-hover: "#0059a4" primary-pressed: "#00386a" light-blue: "#9bcbeb" dark-blue: "#012169" marketing-blue: "#00a3e0" red: "#971b2f" gold: "#f0b323" green: "#007a33" link-visited: "#7f2cfc" ink: "#17191f" ink-soft: "#333333" ink-muted: "#616670" ink-disabled: "#9ea4b2" hairline: "#cbd1dd" hairline-soft: "#e5e9f1" canvas: "#ffffff" surface-subdued: "#f4f6fa" canvas-deep: "#000000" typography: display-xl: fontFamily: "Fellix, Arial, sans-serif" fontSize: 56px fontWeight: 700 lineHeight: 64px letterSpacing: 0 display-md: fontFamily: "Fellix, Arial, sans-serif" fontSize: 35px fontWeight: 400 lineHeight: 49px letterSpacing: 0 heading-md: fontFamily: "Fellix, Arial, sans-serif" fontSize: 28px fontWeight: 700 lineHeight: 36px letterSpacing: 0 heading-sm: fontFamily: "Fellix, Arial, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 32px letterSpacing: 0 body-lg: fontFamily: "Fellix, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-md: fontFamily: "Fellix, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 21px letterSpacing: 0 body-sm: fontFamily: "Fellix, Arial, sans-serif" fontSize: 12.25px fontWeight: 400 lineHeight: 17.15px letterSpacing: 0 label-cap: fontFamily: "Fellix, Arial, sans-serif" fontSize: 12.25px fontWeight: 700 lineHeight: 28px letterSpacing: "0.21px" label-md: fontFamily: "Fellix, Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 21px letterSpacing: 0 caption: fontFamily: "Fellix, Arial, sans-serif" fontSize: 12.25px fontWeight: 400 lineHeight: 14px letterSpacing: "0.21px" micro-label: fontFamily: "Fellix, Arial, sans-serif" fontSize: 8.75px fontWeight: 400 lineHeight: 14px letterSpacing: "0.21px" rounded: none: "0px" sm: "4px" md: "7px" lg: "8px" full: "9999px" spacing: xxs: "4px" xs: "7px" sm: "8px" md: "11px" base: "14px" lg: "16px" xl: "24px" 2xl: "32px" 3xl: "40px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "0px 17.5px" height: "35px" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "0px 17.5px" height: "35px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "0px 17.5px" height: "35px" borderColor: "{colors.primary}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "11px 24px" height: "88px" top-banner: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "8px 24px" height: "32px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0px 14px" category-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "0px 16px" height: "48px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink-soft}" typography: "{typography.display-md}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.heading-md}" small-caps-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-cap}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.canvas-deep}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "0px 10px" height: "46px" borderColor: "{colors.hairline}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "16px" borderColor: "{colors.hairline-soft}" footer: backgroundColor: "{colors.dark-blue}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "40px 24px" footer-link: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.body-sm}" padding: "8px 0px" text-link: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.body-sm}" --- ## 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 `` tag in the captured surface, a vestigial legacy declaration. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 56px | 700 | 64px | Seasonal-promo display headlines (declared as `--bds-font-tag-h1-desktop-font-size: 2.5rem` plus a 1rem step-up for promo banners) | | `{typography.display-md}` | 35px | 400 | 49px | h1 ("Looks Like This Page Is Missing or Moved") — the dominant heading moment | | `{typography.heading-md}` | 28px | 700 | 36px | h2 — section heading tier | | `{typography.heading-sm}` | 20px | 700 | 32px | h4 sub-section labels | | `{typography.body-lg}` | 16px | 400 | 24px | Hero sub-paragraph, declared `--bds-font-tag-body-1-desktop-font-size` | | `{typography.body-md}` | 14px | 400 | 21px | Default running text — 44 occurrences, the dominant body tier | | `{typography.body-sm}` | 12.25px | 400 | 17.15px | Footer copy and legal text | | `{typography.label-cap}` | 12.25px | 700 | 28px | h3 small-caps section labels — uppercase, 0.21px tracking | | `{typography.label-md}` | 14px | 700 | 21px | Strong-emphasis labels | | `{typography.caption}` | 12.25px | 400 | 14px | Metadata, sub-labels, dates | | `{typography.micro-label}` | 8.75px | 400 | 14px | Footnote and ultra-small metadata, 0.21px tracking | ### 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.