Walmart DESIGN.md

1. Brand Overview

Brand Identity

Walmart is the world's largest retailer, founded in 1962 by Sam Walton with a mission to help people save money and live better. The brand represents accessibility, value, and everyday low prices for millions of customers worldwide.

Core Values

• Save Money. Live Better. - The iconic tagline encapsulating Walmart's promise
• Everyday Low Prices (EDLP) - Consistent value without gimmicks
• Customer-First - Making shopping easy, affordable, and convenient
• Community - Serving local communities across America and beyond
• Accessibility - Products and services for everyone

Brand Personality

• Approachable and friendly
• Trustworthy and reliable
• Value-conscious and practical
• Helpful and service-oriented
• Inclusive and welcoming

Design Philosophy

Walmart's design system emphasizes clarity, utility, and value communication. Every design decision supports the core mission of helping customers save money while providing a seamless shopping experience across all channels—from superstores to mobile apps.

2. Color Palette

Primary Colors

Walmart Blue

Primary Blue: #0071DC
RGB: 0, 113, 220
HSL: 209°, 100%, 43%

The signature Walmart Blue represents trust, reliability, and the brand's heritage. Used for primary actions, headers, and key brand moments.

Walmart Yellow (Spark Yellow)

Spark Yellow: #FFC220
RGB: 255, 194, 32
HSL: 44°, 100%, 56%

The vibrant yellow from the Spark logo, representing optimism, savings, and value. Used for highlights, promotions, and the iconic Spark element.

Secondary Colors

Action Blue

Action Blue: #004F9A
RGB: 0, 79, 154
HSL: 209°, 100%, 30%

A deeper blue for hover states, active elements, and text links.

Success Green

Success Green: #2E7D32
RGB: 46, 125, 50
HSL: 123°, 46%, 34%

Used for positive actions, confirmations, and availability indicators.

Rollback Red

Rollback Red: #DE1C24
RGB: 222, 28, 36
HSL: 357°, 80%, 49%

The iconic rollback color for price reductions and urgent promotions.

Neutral Colors

Text Dark

Primary Text: #2E2F32
RGB: 46, 47, 50
HSL: 225°, 4%, 19%

Text Secondary

Secondary Text: #46474A
RGB: 70, 71, 74
HSL: 225°, 3%, 28%

Text Muted

Muted Text: #74767C
RGB: 116, 118, 124
HSL: 225°, 3%, 47%

Backgrounds

White: #FFFFFF
Light Gray: #F5F5F5
Card Gray: #F8F8F8
Border Gray: #E6E6E6
Divider: #CCCCCC

Functional Colors

Color Usage Guidelines

1. Blue dominates - Use Walmart Blue for primary CTAs, headers, and navigation
2. Yellow accents - Reserve Spark Yellow for the logo and special promotions
3. Red for savings - Rollback Red exclusively for price reductions
4. Green for availability - Use green to indicate in-stock, pickup ready, or success states
5. Maintain contrast - Ensure WCAG AA compliance (4.5:1 for text)

3. Typography

Primary Typeface: Bogle

Bogle is Walmart's custom typeface, designed specifically for the brand. It's friendly, approachable, and highly legible across all platforms.

Bogle Font Family

cssfont-family: 'Bogle', 'Helvetica Neue', Helvetica, Arial, sans-serif;

Font Weights

Type Scale

Display Headlines

css/* Hero Display */
font-size: 48px;
line-height: 56px;
font-weight: 900;
letter-spacing: -0.5px;

/* Display Large */
font-size: 40px;
line-height: 48px;
font-weight: 700;

/* Display Medium */
font-size: 32px;
line-height: 40px;
font-weight: 700;

Headlines

css/* H1 */
font-size: 28px;
line-height: 36px;
font-weight: 700;

/* H2 */
font-size: 24px;
line-height: 32px;
font-weight: 700;

/* H3 */
font-size: 20px;
line-height: 28px;
font-weight: 700;

/* H4 */
font-size: 18px;
line-height: 24px;
font-weight: 700;

Body Text

css/* Body Large */
font-size: 16px;
line-height: 24px;
font-weight: 400;

/* Body Regular */
font-size: 14px;
line-height: 20px;
font-weight: 400;

/* Body Small */
font-size: 12px;
line-height: 16px;
font-weight: 400;

/* Caption */
font-size: 11px;
line-height: 14px;
font-weight: 400;

Price Typography

Prices are a critical element in Walmart's design and require special treatment:

css/* Large Price (Hero) */
.price-hero {
  font-size: 48px;
  font-weight: 700;
  color: #2E2F32;
}

.price-hero .cents {
  font-size: 24px;
  vertical-align: super;
}

/* Standard Price */
.price-standard {
  font-size: 24px;
  font-weight: 700;
  color: #2E2F32;
}

/* Rollback Price */
.price-rollback {
  font-size: 24px;
  font-weight: 700;
  color: #DE1C24;
}

/* Was Price (Strikethrough) */
.price-was {
  font-size: 14px;
  font-weight: 400;
  color: #74767C;
  text-decoration: line-through;
}

Typography Best Practices

1. Left-align most text for optimal readability
2. Bold prices to make them instantly scannable
3. Use sentence case for most content (not ALL CAPS)
4. Limit line length to 60-80 characters for readability
5. Maintain hierarchy with consistent size jumps

4. Spacing & Layout

Spacing Scale

Walmart uses an 8px base unit for consistent spacing:

Grid System

Desktop Grid (1280px+)

css.container {
  max-width: 1440px;
  padding: 0 64px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

Tablet Grid (768px - 1279px)

css.container {
  padding: 0 32px;
}

.grid {
  grid-template-columns: repeat(8, 1fr);
  gap: 16px;
}

Mobile Grid (< 768px)

css.container {
  padding: 0 16px;
}

.grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

Product Grid Layouts

css/* Desktop: 4-5 products per row */
.product-grid-desktop {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

/* Tablet: 3-4 products per row */
.product-grid-tablet {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Mobile: 2 products per row */
.product-grid-mobile {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

Breakpoints

5. Components

Buttons

Primary Button

css.btn-primary {
  background-color: #0071DC;
  color: #FFFFFF;
  font-family: 'Bogle', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: #004F9A;
}

.btn-primary:disabled {
  background-color: #CCCCCC;
  cursor: not-allowed;
}

Secondary Button

css.btn-secondary {
  background-color: transparent;
  color: #0071DC;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 24px;
  border: 2px solid #0071DC;
}

.btn-secondary:hover {
  background-color: #F0F8FF;
}

Add to Cart Button

css.btn-add-to-cart {
  background-color: #0071DC;
  color: #FFFFFF;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-add-to-cart .icon {
  width: 20px;
  height: 20px;
}

Product Card

css.product-card {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.2s ease;
}

.product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-card__image {
  aspect-ratio: 1;
  object-fit: contain;
  width: 100%;
}

.product-card__title {
  font-size: 14px;
  font-weight: 400;
  color: #2E2F32;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product-card__price {
  font-size: 24px;
  font-weight: 700;
  color: #2E2F32;
}

.product-card__price .cents {
  font-size: 14px;
  vertical-align: super;
}

Rollback Badge

css.rollback-badge {
  background-color: #DE1C24;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rollback-badge::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url('rollback-arrow.svg') no-repeat center;
}

Fulfillment Options

css.fulfillment-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fulfillment-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #46474A;
}

.fulfillment-option--pickup {
  color: #1E8900;
}

.fulfillment-option--delivery {
  color: #0071DC;
}

.fulfillment-option .icon {
  width: 16px;
  height: 16px;
}

Search Bar

css.search-bar {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 8px 16px;
  width: 100%;
  max-width: 600px;
}

.search-bar__input {
  flex: 1;
  border: none;
  font-size: 16px;
  font-family: 'Bogle', sans-serif;
  outline: none;
}

.search-bar__button {
  background: #0071DC;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

Navigation Header

css.header {
  background: #0071DC;
  color: #FFFFFF;
  padding: 12px 0;
}

.header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header__logo {
  height: 32px;
}

.header__nav {
  background: #004F9A;
  padding: 8px 0;
}

.header__nav-link {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  text-decoration: none;
}

.header__nav-link:hover {
  text-decoration: underline;
}

Rating Stars

css.rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rating__stars {
  display: flex;
  gap: 2px;
}

.rating__star {
  width: 16px;
  height: 16px;
  fill: #FFC220;
}

.rating__star--empty {
  fill: #E6E6E6;
}

.rating__count {
  font-size: 12px;
  color: #74767C;
}

6. Iconography

Icon Style Guidelines

Walmart icons are simple, functional, and universally recognizable:

• Style: Outlined with 2px stroke weight
• Size: 24px standard, 16px small, 32px large
• Color: Inherit from parent or use functional colors
• Corner radius: 2px rounded corners

Core Icons

The Spark

The Walmart Spark is the most recognizable brand element:

css.spark {
  width: 48px;
  height: 48px;
}

.spark-yellow {
  fill: #FFC220;
}

/* Spark usage rules:
   - Always use official Spark asset
   - Maintain clear space equal to spark height
   - Never rotate or distort
   - Yellow Spark on blue or dark backgrounds
   - Blue Spark on white or light backgrounds
*/

Icon Sizes

css/* Small Icons */
.icon-sm {
  width: 16px;
  height: 16px;
}

/* Standard Icons */
.icon-md {
  width: 24px;
  height: 24px;
}

/* Large Icons */
.icon-lg {
  width: 32px;
  height: 32px;
}

/* Extra Large (feature icons) */
.icon-xl {
  width: 48px;
  height: 48px;
}

7. Imagery & Media

Photography Style

Product Photography

• Clean white backgrounds for primary product images
• Consistent lighting - soft, even illumination
• Multiple angles - front, back, detail shots
• Scale reference where appropriate
• High resolution - minimum 1000x1000px

Lifestyle Photography

• Real people in authentic settings
• Diverse representation across all demographics
• Bright, optimistic lighting
• Natural, unposed moments
• Family and community focus

Image Specifications

Image Treatment

css/* Product Image Container */
.product-image {
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Lazy Loading */
.product-image img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-image img.loaded {
  opacity: 1;
}

Video Guidelines

• Auto-play product videos on hover (muted)
• Captions required for accessibility
• Max length 30 seconds for product demos
• Mobile optimized with vertical variants

8. Motion & Animation

Animation Principles

1. Purposeful - Every animation should serve a function
2. Fast - Customers want efficiency, not entertainment
3. Subtle - Support the experience, don't distract
4. Consistent - Use standard timing across the platform

Timing Tokens

css/* Duration */
--duration-instant: 100ms;
--duration-fast: 200ms;
--duration-normal: 300ms;
--duration-slow: 500ms;

/* Easing */
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

Common Animations

Button Interactions

css.btn {
  transition: background-color 200ms var(--ease-default),
              transform 100ms var(--ease-default);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

Add to Cart Animation

css@keyframes addToCart {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.btn-add-to-cart.added {
  animation: addToCart 300ms var(--ease-bounce);
}

Loading States

css@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.skeleton {
  background: linear-gradient(90deg, #F5F5F5 25%, #E6E6E6 50%, #F5F5F5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

Page Transitions

css.page-enter {
  opacity: 0;
  transform: translateY(8px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms var(--ease-out),
              transform 300ms var(--ease-out);
}

Cart Badge Animation

css@keyframes cartBounce {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(0.95);
  }
  75% {
    transform: scale(1.05);
  }
}

.cart-badge.updated {
  animation: cartBounce 400ms var(--ease-bounce);
}

9. Accessibility

Accessibility Standards

Walmart is committed to WCAG 2.1 AA compliance across all digital properties.

Color Contrast

Focus States

css/* Global Focus Style */
*:focus-visible {
  outline: 2px solid #0071DC;
  outline-offset: 2px;
}

/* Button Focus */
.btn:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #0071DC;
}

/* Link Focus */
a:focus-visible {
  outline: 2px solid #0071DC;
  outline-offset: 2px;
  border-radius: 2px;
}

Keyboard Navigation

css/* Skip Link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: #0071DC;
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: 4px;
  z-index: 9999;
}

.skip-link:focus {
  top: 16px;
}

Screen Reader Support

html<!-- Product Card Example -->
<article class="product-card" aria-label="Product: Great Value Milk">
  <img src="milk.jpg" alt="Great Value Whole Milk, 1 Gallon">
  
  <h3 class="product-card__title">
    Great Value Whole Milk, 1 Gallon
  </h3>
  
  <div class="product-card__price" aria-label="Price: $3.48">
    <span aria-hidden="true">$3</span>
    <span class="cents" aria-hidden="true">48</span>
  </div>
  
  <div class="rating" aria-label="4.5 out of 5 stars, 1,234 reviews">
    <div class="rating__stars" aria-hidden="true">
      <!-- Star icons -->
    </div>
    <span class="rating__count">(1,234)</span>
  </div>
  
  <button class="btn-add-to-cart" aria-label="Add Great Value Whole Milk to cart">
    <span aria-hidden="true">Add to cart</span>
  </button>
</article>

Form Accessibility

html<!-- Accessible Form Field -->
<div class="form-field">
  <label for="email" class="form-label">
    Email Address
    <span class="required" aria-label="required">*</span>
  </label>
  <input 
    type="email" 
    id="email" 
    name="email"
    aria-required="true"
    aria-describedby="email-hint email-error"
    class="form-input"
  >
  <span id="email-hint" class="form-hint">
    We'll send your order confirmation here
  </span>
  <span id="email-error" class="form-error" role="alert">
    <!-- Error message appears here -->
  </span>
</div>

Motion Preferences

css/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Touch Target Sizes

css/* Minimum touch target: 44x44px */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Button minimum size */
.btn {
  min-height: 44px;
  padding: 12px 24px;
}

Accessibility Checklist

• All images have meaningful alt text
• Color is not the only means of conveying information
• Form fields have associated labels
• Error messages are announced to screen readers
• Focus order follows visual order
• Interactive elements are keyboard accessible
• Sufficient color contrast on all text
• ARIA labels on icon-only buttons
• Skip navigation link available
• Page titles are unique and descriptive

Quick Reference

Design Tokens Summary

css:root {
  /* Colors */
  --color-primary: #0071DC;
  --color-primary-dark: #004F9A;
  --color-secondary: #FFC220;
  --color-rollback: #DE1C24;
  --color-success: #1E8900;
  --color-text-primary: #2E2F32;
  --color-text-secondary: #46474A;
  --color-text-muted: #74767C;
  --color-background: #FFFFFF;
  --color-background-gray: #F5F5F5;
  --color-border: #E6E6E6;
  
  /* Typography */
  --font-family: 'Bogle', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 48px;
  --spacing-8: 64px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 24px;
  --radius-full: 50%;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  
  /* Transitions */
  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

This design system documentation is based on Walmart's public-facing digital properties and brand guidelines. For internal use, refer to the official Walmart Design System documentation.