What is Walmart's primary brand color?

Walmart's action voltage is Walmart Blue (#0053e2) — wired into the Living Design System as --ld-semantic-color-fill-brand, --ld-semantic-color-action-fill-primary, --ld-semantic-color-border-brand, and --ld-semantic-color-text-brand. It is the load-bearing fill for every primary CTA. The brand-bold navy (#001e60) is the chrome companion, wired as --ld-semantic-color-fill-brand-bold and --ld-primitive-color-blue-160, carrying the top-nav band fill and the brand-text-bold token. The Spark Yellow (#ffc220), wired as --wcp-semantic-color-action-fill-primary-alt and --ld-semantic-color-fill-accent-spark, is the secondary alt-CTA used for savings and Flash Deals callouts — with text intentionally rendered in brand-bold navy rather than white, since yellow-on-yellow contrast requires the deeper companion.

What typeface does Walmart use, and what should I use as a substitute?

Walmart's marketing site runs EverydaySans — a proprietary face shipped with the fallback chain `EverydaySans, "Helvetica Neue", Helvetica, Arial, sans-serif`. The face is Walmart's metric clone of Helvetica Neue, commissioned for brand consistency across digital and in-store signage. Typography uses weight 400 for body and weight 700 for nav links, button labels, headings, and savings flags. Display headlines run at 16-18px / 700 in the captured frame (the homepage is tile-heavy and does not carry a 38px-plus hero display moment the way Target's does). The closest open-source substitute is Inter at the same weights, or Roboto for a closer metric match to the Helvetica Neue fallback chain.

Why does Walmart use a navy top-nav band when most retailers use white?

Walmart's persistent top-nav band is filled with brand-bold navy (#001e60) carrying white text, and the second strip beneath it (the categories nav) is filled with a slightly lighter blue (#002e99, wired as --wcp-semantic-color-bottom-nav-fill-brand) also carrying white text. The double-band chrome creates a navy 'walmart shelf' header that no other US mass-market retailer applies at this saturation. The decision keeps the brand voltage permanently visible regardless of where the customer is in the page scroll, and lets the body floor below it remain pure white so the merchandise photography and Spark Yellow savings callouts can read as the loudest moments. Target uses a white top-nav with a thin red utility strip; Walmart inverts the convention.

Why does Walmart use a fully-rounded pill on the search bar and category tabs?

The Walmart Living Design System uses a binary radius scale: 8px for content surfaces (offer tiles, product cards, savings cards) and 9999px fully-rounded pill for inputs and category-scroller tabs (the search bar, the 'Is this the right location?' confirm pill, the category-scroller chips in the navy strip). The pill treatment echoes the lowercase 'walmart' wordmark's rounded letterforms, and gives the search bar — which is the primary action on the homepage for most users — the warmest, most-tappable shape in the system. Primary CTA buttons sit at 32px corners (close to a pill at 40-44px button heights), splitting the difference between Target's 999px and a flat rectangle.

Can I use this DESIGN.md to build my own React mass-market retail site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Walmart's specific moves: navy brand-bold top-nav band with white category links, two-tier CTA voltage (Walmart Blue primary, Spark Yellow alt with brand-bold-navy text), 8px offer-tile rounding, and the fully-rounded pill on the search input. The tokens resolve cleanly to the LDS variable names that Walmart's own engineers reference. The one move worth borrowing only if you have the brand permission is the two-tier action voltage; on most sites, putting both a blue CTA and a yellow CTA on the same surface reads as a brand-tone conflict rather than as a savings-emphasis hierarchy.

Walmart Design System

Walmart's marketing system as a DESIGN.md file.

About Walmart DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source walmart.com

E-commerce & Retail

Walmart's homepage opens with a persistent navy top-nav band (Walmart brand-bold #001e60) carrying white "Pickup or delivery?", a full-width search bar, and the right-aligned utility cluster (Reorder, Sign In, Cart) — and below that a secondary navy strip with white category links (Departments, Memorial Day, Get it Fast, Pharmacy, New Arrivals, Father's Day, Graduation, Meals Made Easy, My Items, Only at Walmart, Walmart+). The above-fold canvas alternates between hero offer tiles ("Savings on fashion", "Find relief for aches & pains") at 8px corners on cream-and-color backdrops, with the yellow "Flash Deals" badge as the only spark moment in the captured frame. Where Target paints the hero in a single saturated red and Nordstrom commits to one editorial photograph, Walmart anchors on a navy chrome band and lets the tile grid below it carry seasonal merchandise photography on tinted product-color backgrounds.

The DESIGN.md file packages the system into a machine-readable spec for React and AI coding tools. Inside: 15 color tokens drawn from the Walmart Living Design System (LDS) tokens exposed under the `--ld-*` and `--wcp-*` CSS custom-property prefixes — Walmart Blue brand voltage, the Spark Yellow alt-CTA tier, brand-bold navy for chrome bands, charcoal ink for body chrome, and a small set of semantic colors for confidence (info-blue), urgency, and savings signals. 12 typography tokens run EverydaySans — Walmart's proprietary face shipped with Helvetica Neue / Helvetica / Arial fallbacks. 18 components cover the navy top-nav band, the secondary nav strip, the Walmart-Blue primary CTA, the Spark Yellow alt CTA, the search-input pill, the 8px offer tile, the category-scroller pill tab, and the bottom-nav fill (mobile shelf).

Feed this file to Claude or Cursor and it will reproduce Walmart's specific moves: navy brand-bold top-nav band with white category links, two-tier action voltage (blue primary, yellow alt), EverydaySans across the chrome, and the binary radius split between 8px tile rounding and 9999px pill on every tappable input. The tokens resolve cleanly without invention. Treat it as a reference: the move worth borrowing only if you have the brand permission Walmart has is the two-tier CTA — letting a saturated blue carry the primary action while a yellow spark carries the savings-emphasis CTA, with intentional text-on-yellow rendered in brand-bold navy rather than white.

What makes it distinct

Walmart Blue as primary action#0053e2 wired into --ld-semantic-color-fill-brand and --ld-semantic-color-action-fill-primary, the load-bearing CTA fill across the Living Design System
Spark Yellow as alt-CTA#ffc220 wired into --wcp-semantic-color-action-fill-primary-alt with text intentionally rendered in brand-bold navy #001e60 rather than white
Brand-bold navy top nav#001e60 fills the persistent top-nav band with white text, while #002e99 carries the bottom-nav band for mobile app surfaces
EverydaySans across the systemWalmart ships a proprietary Helvetica Neue metric clone with no secondary display, serif, or monospace voice
Two-tier radius system8px on offer cards and tile grids; 9999px fully-rounded pill on the search input, category tabs, and bottom-nav buttons

Live at walmart.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

walmart.com

Explore Walmart

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Walmart design system FAQ

Common questions about Walmart's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Walmart — official site

Walmart's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.