At a glance
22tokens
8type steps
3radius steps
24pxspacing base
Walmart, in one page
Walmart's iOS app is an unapologetically bright, white-canvas retail environment built for speed and trust. The interface sits on pure white (#FFFFFF) with the faintest cool-blue tinted surfaces (#F2F8FD) to separate cards from the page. Nothing is dim, nothing is moody — this is a store you can shop at 6am in a parking lot, so contrast is high, type is sturdy, and the famous Walmart Blue (#0071DC) anchors every primary action. The atmosphere is "everyday low price made digital": dense product grids, big tap targets, and a relentless focus on getting you from search to cart.
The accent system is a two-color signature. Walmart Blue (#0071DC) carries every verb — "Add to cart", links, the active tab, the filled checkbox — while Spark Yellow (#FFC220) is reserved for two ritual moments: the six-ray Spark logo and the savings-callout chrome (Rollback tags, "Save" badges, the yellow CTA on deal modules). Yellow never carries body text or large fills; it punctuates a price. The discipline is what makes the yellow read instantly as *money saved*.
Typography is Bogle, Walmart's proprietary humanist sans (Inter is the closest free substitute). It's friendly but no-nonsense — open apertures, sturdy stems, comfortable at small sizes because price-per-unit and fine print live everywhere in a grocery app. The hierarchy is compact and weight-driven: 12–28pt concentrated at 400 / 600 / 700. The most expressive type moment is a product price: the dollar amount in 22–28pt weight 700 next to a struck-through "was" price in gray and a Rollback tag in Walmart Blue on Spark Yellow.
Key Characteristics:
- Bright white canvas (
#FFFFFF) with cool-tinted surface (#F2F8FD) for cards - Walmart Blue (
#0071DC) as the single action color — buttons, links, active tab - Spark Yellow (
#FFC220) reserved for the Spark logo and savings chrome only - The six-ray Spark mark — Walmart's instantly recognizable sunburst logo
- Rollback price tag — the distinctive blue-on-yellow savings callout
- Pickup / Delivery toggle pill at the top of Shop — fulfillment is a first-class choice
- Bogle font (proprietary, humanist sans), weights 400 / 600 / 700
- Bottom tab bar: Shop, Services, Search, Cart, Account — Search is center
- Haptic "bump" on add-to-cart, confirming the item dropped in
Do's and don'ts
Do
- Use
#FFFFFFas the canvas and#F2F8FDfor grouped surfaces — keep it bright - Reserve Walmart Blue (
#0071DC) for actions, links, and the active tab — it is the verb - Reserve Spark Yellow (
#FFC220) for the Spark logo and savings chrome (Rollback) only - Put dark charcoal text (
#2E2F32) on Spark Yellow — never white on yellow (contrast) - Make the price the heaviest element on a card — 22pt weight 700
- Use tabular numerals for all prices and quantity steppers
- Keep the Pickup/Delivery toggle at the top of Shop — fulfillment is a primary choice
- Give the add-to-cart action a confirming bump + haptic
- Use 1pt
#E2E8F0borders for separation before reaching for shadow
Don't
- Don't use a dark or moody canvas — Walmart is a bright, high-contrast store
- Don't use Spark Yellow for body text, large fills, or as a second action color
- Don't put white text on Spark Yellow — it fails contrast and breaks the brand
- Don't let the product title outweigh the price visually
- Don't use heavy drop shadows — separation is border-first, shadow-second and subtle
- Don't use pure black
#000000for text — charcoal#2E2F32is the brand tone - Don't hide the fulfillment toggle or ETA — the pickup/delivery promise is core
- Don't round product imagery corners independently of the card (image fills to the 12pt card radius)
- Don't animate aggressively — motion is short (150–260ms) and confirmation-focused
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Walmart design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Walmart Blue: #0071dc
- Blue Pressed: #004f9a
- Blue Tint: #e6f1fc
- Spark Yellow: #ffc220
- Spark Yellow Pressed: #e5a800
- Canvas White: #ffffff
- Surface Tint: #f2f8fd
- Surface Gray: #f5f5f5
- Divider: #e2e8f0
- Border Strong: #c9d2de
Type:
- families: Bogle, Fallback Stack, Numerals
- scale: 11, 12, 13, 15, 16, 18, 22, 28
- weights: 400, 600, 700
Shape:
- radius: 12, 22, 24
- elevation: Pressed: border `#C9D2DE`, subtle shadow lift | Selected segment: white pill with shadow + text `#0071DC` weight 600 | Use 1pt `#E2E8F0` borders for separation before reaching for shadow
Spacing: 24
Rules:
- Use `#FFFFFF` as the canvas and `#F2F8FD` for grouped surfaces — keep it bright
- Reserve Walmart Blue (`#0071DC`) for actions, links, and the active tab — it is the verb
- Reserve Spark Yellow (`#FFC220`) for the Spark logo and savings chrome (Rollback) only
- Put dark charcoal text (`#2E2F32`) on Spark Yellow — never white on yellow (contrast)
- Make the price the heaviest element on a card — 22pt weight 700
- Use tabular numerals for all prices and quantity steppers
Avoid:
- Don't use a dark or moody canvas — Walmart is a bright, high-contrast store
- Don't use Spark Yellow for body text, large fills, or as a second action color
- Don't put white text on Spark Yellow — it fails contrast and breaks the brand
- Don't let the product title outweigh the price visually
- Don't use heavy drop shadows — separation is border-first, shadow-second and subtle
- Don't use pure black `#000000` for text — charcoal `#2E2F32` is the brand tone
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Walmart Blue (
#0071DC): Primary CTA ("Add to cart", "Continue"), links, active tab, selected toggle, filled checkbox/radio. - Blue Pressed (
#004F9A): Active/pressed state for blue CTAs and the pressed link state. - Blue Tint (
#E6F1FC): Selected-row wash, info banners, blue chip background. - Spark Yellow (
#FFC220): The six-ray Spark logo, Rollback tag fill, "Save" badge, deal-module CTA. - Spark Yellow Pressed (
#E5A800): Pressed state for the yellow deal CTA.
Canvas & Text
- Canvas White (
#FFFFFF): Primary page background, card fill on white-on-white layouts. - Surface Tint (
#F2F8FD): Cool-blue tinted surface — section backgrounds, card wells, the area behind product grids. - Surface Gray (
#F5F5F5): Neutral input fill, skeleton placeholders, image-tile backing. - Divider (
#E2E8F0): Hairline rules between list rows and around cards. - Border Strong (
#C9D2DE): Input outline at rest, segmented-control border. - Text Primary (
#2E2F32): Product titles, prices, headings, primary UI text (a near-black charcoal, not pure black). - Text Secondary (
#74767C): Unit price, "was" struck price, metadata, helper text. - Text Tertiary (
#9BA0A8): Disabled labels, placeholder text, very low-emphasis captions.
Semantic
- Success Green (
#1A7F37): "In stock", order-confirmed, free-shipping eligibility. - Savings Green (
#2A8703): "You save $X" inline savings text on price blocks. - Warning Amber (
#B25E00): "Only 3 left", low-stock and time-limited warnings. - Error Red (
#D03A2D): Form errors, payment failure, out-of-stock state. - Star Gold (
#FFB81C): Product rating stars (a touch warmer than Spark Yellow).
Dark Mode (Limited Use)
Walmart's iOS app is a light-first experience optimized for in-aisle and outdoor readability. A dark variant exists for system-wide dark mode but the canonical experience is the bright white store.
- Dark Canvas (
#0E0F11) - Dark Surface (
#1A1C1F) - Dark Text (
#F4F5F7) - Blue (dark-adjusted) (
#4D9BEA) — lifted for contrast on dark
Type scaleRead the full spec
Font Family
- Primary:
Bogle(proprietary Walmart humanist sans, Regular / Medium / Semibold / Bold) - Fallback Stack:
'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: Tabular figures used in price blocks and quantity steppers so columns align
- CJK/Non-Latin: Falls to system stack — Walmart ships in the US/CA/MX with Spanish localization
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title (Large) | Bogle | 28pt | 700 | 1.2 | -0.3pt | "Cart", "Account" large nav title |
| Section Header | Bogle | 22pt | 700 | 1.25 | -0.2pt | "Deals", "Buy it again" shelf headers |
| Price (Large) | Bogle | 22pt | 700 | 1.1 | -0.2pt | Primary product price on PDP / card |
| Subsection | Bogle | 18pt | 600 | 1.3 | -0.1pt | "Pickup at Supercenter", group titles |
| Product Title | Bogle | 16pt | 600 | 1.3 | 0pt | Item name on card, 2-line clamp |
| Body | Bogle | 15pt | 400 | 1.45 | 0pt | Descriptions, item specs |
| Button (Primary) | Bogle | 16pt | 600 | 1.0 | 0pt | "Add to cart", "Continue" pill |
| Price (Inline) | Bogle | 15pt | 700 | 1.2 | 0pt | Price on dense list rows |
| Was / Struck Price | Bogle | 13pt | 400 | 1.2 | 0pt | Strikethrough original price, #74767C |
| Meta / Unit Price | Bogle | 13pt | 400 | 1.3 | 0pt | "$0.21/oz", "Sold by Walmart" |
| Tag / Badge | Bogle | 12pt | 700 | 1.0 | 0.2pt | "Rollback", "Best seller" |
| Tab Label | Bogle | 11pt | 600 | 1.0 | 0.1pt | Bottom tab bar labels |
| Caption | Bogle | 11pt | 400 | 1.3 | 0pt | Legal, "Prices may vary" |
Principles
- Weight does the work: Hierarchy is built on 400 → 600 → 700, not on dramatic size jumps — a grocery app stays dense
- Price is the loudest element: The dollar figure always outweighs the product name in visual weight
- Tabular numerals everywhere price or quantity appears: Columns of prices must align vertically
- Charcoal, not black: Primary text is
#2E2F32— softer than pure black, easier on a bright white field - Yellow is never type: Spark Yellow appears only as a fill behind dark text (Rollback), never as text color
- Dynamic Type respected on titles, body, prices; tab labels and badges hold fixed sizes
Components and layoutRead the full spec
Buttons
Primary CTA ("Add to cart" / "Continue")
- Background:
#0071DC - Text:
#FFFFFF, Bogle 16pt weight 600 - Height: 48pt, full-width on PDP / 40pt inline on cards
- Corner radius: 24pt (full pill at 48pt height)
- Pressed: background
#004F9A, scale 0.98, haptic "bump" - Disabled: background
#C9D2DE, text#FFFFFF
Secondary Button ("Save for later" / outline)
- Background: transparent
- Text:
#0071DC, Bogle 16pt weight 600 - Border: 1.5pt solid
#0071DC - Height: 48pt, corner radius 24pt
- Pressed: background
#E6F1FC
Deal / Savings CTA (Spark Yellow)
- Background:
#FFC220 - Text:
#2E2F32(dark charcoal — never white on yellow) - Height: 44pt, corner radius 22pt
- Used for: "Shop deals", "Get the deal" inside savings modules only
- Pressed: background
#E5A800
Quantity Stepper
- Pill container, 1pt border
#C9D2DE, height 36pt, radius 18pt - Minus / plus glyphs 18pt in
#0071DC, count center in#2E2F32weight 600 (tabular) - At quantity 1, the minus becomes a trash icon
Icon Button (heart / share / list)
- Size: 24pt glyph, 44pt hit area
- Default:
#74767C; Active (saved to list):#0071DC - Heart filled when item is in a list
Text Link
- Bogle 15pt weight 600, color
#0071DC, no underline - Pressed:
#004F9A
Cards & Containers
Product Card (Grid / Shelf)
- Width: ~170pt in a 2-up grid (12pt gutter), shelf tiles 150pt
- Background:
#FFFFFF, 1pt border#E2E8F0, corner radius 12pt - Structure: square image (
#F5F5F5backing) → Rollback tag (if any) → price block → title (16pt w600, 2-line clamp) → rating stars → "Add to cart" pill - Pressed: border
#C9D2DE, subtle shadow lift - Tap image: opens PDP; tap pill: adds to cart with bump haptic
Price Block
- Current price
$24.97in 22pt weight 700#2E2F32(tabular) - "was $34.97" struck, 13pt
#74767Cto the right or below - Savings line "Save $10.00" 13pt weight 600
#2A8703 - Rollback tag sits directly above the price
Cart Line Item
- Height: dynamic ~96pt
- 64×64pt product thumbnail (8pt radius) → title (2-line) + seller + price → trailing quantity stepper
- Divider
#E2E8F0between items - "Save for later" and "Remove" as text links below the row
Category Tile (Shop landing)
- 2-up or 3-up grid of soft tiles, background
#F2F8FD, radius 12pt - Icon/illustration top, label 15pt weight 600
#2E2F32below - Pressed: background
#E6F1FC
Order / Tracking Card
- White card, 1pt
#E2E8F0, radius 12pt - Status pill top ("Out for delivery" —
#1A7F37on tint), progress track in#0071DC
Navigation
Bottom Tab Bar
- Height: 56pt + safe area
- Background:
#FFFFFFwith 0.5pt top border#E2E8F0(opaque — no blur, readability first) - Tabs: Shop, Services, Search (center), Cart, Account
- Icon size: 24pt; Cart shows a
#0071DCcount badge - Active: icon + label
#0071DC(filled icon variant) - Inactive:
#74767C(outlined icon variant) - Labels: Bogle 11pt weight 600, always shown
Top App Bar (Shop / Home)
- Height: 56pt + safe area, background
#FFFFFF - Left: Spark logo (28pt). Center: location/fulfillment chip ("Sacramento Supercenter ▾"). Right: list/notification icons
- Search bar pinned directly below, full-width
Pickup / Delivery Toggle Pill
- Segmented pill at top of Shop, container
#F2F8FD, height 40pt, radius 20pt - Two segments: "Pickup" / "Delivery" (sometimes "Shipping")
- Selected segment: white pill with shadow + text
#0071DCweight 600 - Unselected: text
#74767C - Sliding-thumb transition on switch (220ms ease)
Search Header (results)
- Sticky filter / sort row below search field
- Filter chips: pill,
#F2F8FDdefault,#E6F1FC+ 1pt#0071DCwhen active
Input Fields
Search Bar
- Background:
#F5F5F5, height 44pt, corner radius 22pt - Leading SF Symbol
magnifyingglass18pt#74767C - Placeholder "Search Walmart" 16pt
#74767C - Focus: background
#FFFFFF, 1.5pt border#0071DC - Trailing: barcode-scan icon
#0071DC
Text Field (checkout / address)
- Floating-label style, height 56pt, background
#FFFFFF - Rest border: 1pt
#C9D2DE, radius 8pt - Focus: 1.5pt
#0071DC, label floats up and tints#0071DC - Error: 1.5pt
#D03A2D, helper text#D03A2Dbelow
Checkbox / Radio
- 22pt box, 2pt border
#74767Cunselected - Selected: fill
#0071DC, white check; radius 4pt (checkbox) / circle (radio)
Distinctive Components
Rollback Price Tag
- The signature savings callout. Pill or flag shape, background
#FFC220(Spark Yellow) - Text "Rollback" in
#2E2F32(dark), Bogle 12pt weight 700, slight uppercase tracking - Sits flush above the price block on cards and PDP
- Variant: "Clearance" uses
#D03A2Dfill with white text; "Best seller" uses#0071DCon#E6F1FC
Spark Logo Mark
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | 2-col grid, ~165pt cards, tighter shelf tiles |
| iPhone 13/14/15 | 390pt | Standard 2-col grid, ~170pt cards |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the app bar |
| iPhone 15/16 Pro Max | 430pt | Larger cards (~190pt), more shelf peek |
| iPad | 768pt+ | 3–4 col grid, two-pane PDP, persistent filter rail |
Dynamic Type
- Product titles, prices, body: full scale
- Tab labels, Rollback/badge tags: fixed (layout-sensitive)
- Price block scales but caps to keep grid alignment
- Quantity stepper digits: fixed tabular size
Orientation
- Shop / Search / Cart / Account: portrait-locked on iPhone
- iPad: supports landscape with multi-column grid and split PDP
- Barcode scanner: portrait-locked, full-screen camera
Touch Targets
- Primary "Add to cart": 40–48pt height, full pill — easy in-aisle tap
- Quantity stepper buttons: 36pt with 44pt effective hit area
- Tab bar icons: 24pt glyph, 44pt effective hit
- Card image and CTA are independently tappable (browse vs. add)
Safe Area Handling
- Top: app bar + search respect the safe area / Dynamic Island
- Bottom: sticky "Add to cart" bar on PDP floats above the tab bar; both clear the home indicator
- Sides: 16pt content insets throughout
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-walmart {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #2e2f32;
--heading-color: #2e2f32;
--link-color: #0071dc;
--link-hover-color: #0057a9;
--border-color: #d9dada;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(46,47,50,0.06);
--card-hover-shadow: 0 6px 18px rgba(46,47,50,0.12);
--header-bg: #2e2f32;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6d6e70;
--button-bg: #0071dc;
--button-text-color: #ffffff;
--button-hover-bg: #0057a9;
--button-border: none;
--button-border-radius: 22px;
--button-secondary-bg: #f2f3f3;
--button-secondary-text-color: #2e2f32;
--button-secondary-hover-bg: #e6e6e6;
--button-secondary-border: 1px solid #d9dada;
--prompt-bg: #f5f5f5;
--prompt-text-color: #2e2f32;
--base-font: var(--font-sans);
--heading-font: var(--font-sans);
--card-border-radius: 22px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- clubhouse 80.1%
- coffee meets bagel 77.9%
- lovable 76.5%
- apple maps 76.4%
- grindr 75.9%
Where this came from
- Source document
ios/design-md/finance/walmart/DESIGN.md· 20.6 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.