A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
12type steps
2radius steps
12pxspacing base
McDonald's, in one page
McDonald's iOS app is a loyalty-and-ordering machine wearing the most recognizable brand colors on earth. The instant you open it, two things establish identity: the Golden Arches Yellow #FFC72C and McDonald's Red #DA291C. The canvas is white (#FFFFFF) in light mode and a near-black charcoal (#121212) in dark mode, but the screen is *carried* by the yellow — it is the rewards points number, the primary CTA pill, the active tab, the order FAB, and the arches logomark. Red is the energetic counterpoint: deal flags, the secondary "Add to Mobile Order" button, urgency states. The aesthetic is bold, rounded, friendly, and unmistakably fast-food — pill-shaped buttons everywhere, generous rounding, big confident type, and appetizing product photography on every deal tile.
The signature screen is the home / deals + mobile-order hub. It opens with a personal greeting ("Hi, Alex" with the arches), then the hero of the whole app: the MyMcDonald's Rewards card — a points balance in huge yellow numerals, a progress bar toward the next reward, and a "X points away from a free …" line. Below it, a Deals & Rewards grid of two-up tiles (product photo + red "DEAL"/"FREE" flag + name + offer + "or N,NNN pts"), and a Start an order mode selector: four large pill/tile choices — Pickup, Curbside, Drive Thru, Delivery — the active one outlined in yellow. The second signature surface is the deal/coupon detail — a dashed-yellow-bordered coupon card with the food image, the offer, validity, and an "Add to order" yellow pill that drops the deal into a mobile order.
The color system is deliberately tiny and iconic: yellow + red carry everything, over a neutral canvas, with a single success green for "Order Ready". There is a hard brand rule baked into the system — yellow always pairs with near-black text (#1A1A1A), never white; the arches are never recolored. The mood is *cheerful efficiency*: get the user to a deal and into a mobile order in as few taps as possible, and make the rewards balance feel rewarding every time the app opens.
Typography is McDonald's proprietary Speedee — a friendly, slightly rounded humanist sans designed for the brand's signage and digital. On iOS it falls back to SF Pro (or a rounded grotesque) when Speedee isn't bundled; for documentation and the catalog, Archivo is the closest free analog. The hierarchy is heavy and confident: screen titles at 32pt/900, the rewards number at 28pt/900, card titles at 18pt/800, body at 16pt/400. Weight (800/900) and the yellow accent do the heavy lifting.
Key Characteristics:
- White canvas (
#FFFFFF) light / near-black charcoal (#121212) dark — carried by Golden Arches Yellow#FFC72C - Two-color brand system: Yellow
#FFC72C(primary CTA, rewards, active tab, FAB) + Red#DA291C(deal flags, secondary CTA, urgency) - Hard rule: yellow always pairs with near-black text
#1A1A1A— never white on yellow; arches never recolored - MyMcDonald's Rewards card — the home hero: huge yellow points number + progress bar + "X points to free …"
- Deals grid — two-up product-photo tiles with a red "DEAL"/"FREE"/"NEW" flag, offer line, and points alternative
- Mobile-order mode selector — Pickup / Curbside / Drive Thru / Delivery as four large tiles, active outlined yellow
- Pill-shaped buttons everywhere — 999pt radius CTAs; rounded 16pt cards
- Center "Order" FAB in the tab bar — elevated yellow circle, the app's primary action
- Coupon/deal cards — dashed yellow border, food photo, "Add to order" yellow pill
- Friendly heavy type — Speedee (Archivo fallback), screen titles 32pt/900, weight + yellow carry hierarchy
- Personal greeting header — "Hi, {name}" with the arches and a notification bell
Do's and don'ts
Do
- Use Golden Arches Yellow (
#FFC72C) for the primary CTA, rewards number, active tab, and Order FAB - Always put
#1A1A1Anear-black text/icons on yellow — it's a hard brand rule - Use McDonald's Red (
#DA291C) for deal flags, the secondary CTA, and urgency - Make the MyMcDonald's Rewards card the home hero — big yellow points number + progress bar
- Lead every deal tile with appetizing product photography + a red flag
- Use pill (999pt) buttons and rounded 16pt cards throughout — the language is round and friendly
- Elevate the center Order FAB with a yellow-tinted glow shadow
- Offer the four order modes (Pickup / Curbside / Drive Thru / Delivery) as large tiles, active outlined yellow
- Roll the points number and animate the progress fill when rewards change
- Use tabular numerals for points, prices, and timers
- Keep dark mode near-black (
#121212) with full-saturation food photography
Don't
- Don't put white text on yellow — ever; near-black
#1A1A1Aonly - Don't recolor or restyle the Golden Arches
- Don't introduce a third loud brand color competing with yellow + red
- Don't use sharp-cornered buttons — CTAs are pills, cards are 16pt rounded
- Don't bury the rewards balance — it's the reason the app is opened; it leads the home screen
- Don't shrink or crop deal photography to thumbnails — product imagery sells the deal
- Don't hide the Order FAB — it's the elevated center of the tab bar and the app's primary action
- Don't use pure black (
#000000) for the dark canvas —#121212is correct - Don't desaturate food imagery in dark mode — chrome recedes, food does not
- Don't animate aggressively — motion is cheerful and quick (150–300ms), tied to ordering/rewards
- Don't use timid sentence-case flags — deal flags are UPPERCASE and punchy
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 McDonald's design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Golden Arches Yellow: #ffc72c
- Yellow Pressed: #e6b015
- Yellow Tint: #ffc72c
- McDonald's Red: #da291c
- Red Pressed: #b71f14
- Dark Red: #b0210e
- Canvas White: #ffffff
- Surface Gray: #f4f4f5
- Surface Pressed: #eaeaeb
- Divider: #e3e3e5
Type:
- families: Speedee, Archivo, Pill CTAs, Dynamic Type
- scale: 10, 11, 12, 14, 15, 16, 18, 19, 22
- weights: 400, 600, 700, 800, 900
Shape:
- radius: 12, 16
- elevation: Elevate the center Order FAB with a yellow-tinted glow shadow
Spacing: 12, 14, 16
Rules:
- Use Golden Arches Yellow (`#FFC72C`) for the primary CTA, rewards number, active tab, and Order FAB
- Always put `#1A1A1A` near-black text/icons on yellow — it's a hard brand rule
- Use McDonald's Red (`#DA291C`) for deal flags, the secondary CTA, and urgency
- Make the MyMcDonald's Rewards card the home hero — big yellow points number + progress bar
- Lead every deal tile with appetizing product photography + a red flag
- Use pill (999pt) buttons and rounded 16pt cards throughout — the language is round and friendly
Avoid:
- Don't put white text on yellow — ever; near-black `#1A1A1A` only
- Don't recolor or restyle the Golden Arches
- Don't introduce a third loud brand color competing with yellow + red
- Don't use sharp-cornered buttons — CTAs are pills, cards are 16pt rounded
- Don't bury the rewards balance — it's the reason the app is opened; it leads the home screen
- Don't shrink or crop deal photography to thumbnails — product imagery sells the deal
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Golden Arches Yellow (
#FFC72C): The brand. Primary CTA pill, rewards points number, active tab, order FAB, progress fill, arches logomark. Always with#1A1A1Atext/icon on top. - Yellow Pressed (
#E6B015): Pressed state for yellow CTAs. - Yellow Tint (
#FFC72C14): 8% yellow wash behind the active order-mode tile.
Secondary (Brand Red)
- McDonald's Red (
#DA291C): Deal/offer flags, the secondary "Add to Mobile Order" button, urgency/error, "See all" links. - Red Pressed (
#B71F14): Pressed state for red CTAs. - Dark Red (
#B0210E): Pressed deal flags, deep accents.
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Primary light canvas. - Surface Gray (
#F4F4F5): Card backgrounds, grouped sections, the rewards card base. - Surface Pressed (
#EAEAEB): Pressed rows / tiles. - Divider (
#E3E3E5): Hairline dividers; dashed variant on coupons (yellow).
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#121212): Primary dark canvas — near-black, NOT pure black. - Dark Surface 1 (
#1C1C1E): Card backgrounds, rewards card, sheets. - Dark Surface 2 (
#2A2A2A): Elevated tiles, coupon background, badge fills. - Dark Divider (
#2C2C2E): Hairline dividers.
Text
- Text Primary Light (
#1A1A1A): Primary text — near-black; the only color allowed on yellow. - Text Secondary Light (
#5C5C5C): Metadata, validity, sub-copy. - Text Tertiary Light (
#8A8A8A): Disabled, low-emphasis. - Text Primary Dark (
#F2F2F2): Primary text on dark. - Text Secondary Dark (
#A0A0A0): Metadata on dark. - Text On Yellow (
#1A1A1A): Mandatory text/icon color over#FFC72Cin both modes.
Roles Summary
| Role | Light Mode | Dark Mode |
|---|---|---|
| Canvas | #FFFFFF | #121212 |
| Surface 1 | #F4F4F5 | #1C1C1E |
| Surface 2 | #EAEAEB | #2A2A2A |
| Divider | #E3E3E5 | #2C2C2E |
| Text Primary | #1A1A1A | #F2F2F2 |
| Text Secondary | #5C5C5C | #A0A0A0 |
| Brand Yellow / CTA | #FFC72C | #FFC72C |
| Text on Yellow | #1A1A1A | #1A1A1A |
| Brand Red | #DA291C | #DA291C |
| Error | #DA291C | #DA291C |
Semantic
- Success Green (
#2B8A3E): "Order Ready", payment success, "Reward redeemed". - Error Red (
#DA291C): Payment failure, item unavailable, destructive delete (shares the brand red). - Warning Amber (
#E6A700): "Deal expiring soon", store-closing notice. - Info Blue (
#2E6DB4): Informational links, store-info notices in checkout. - Rewards Gold (
#FFC72C): Points balance, progress fill, reward chips (the brand yellow).
Type scaleRead the full spec
Font Family
- Brand / All UI:
Speedee— McDonald's proprietary humanist sans (friendly, slightly rounded; designed for signage + digital). Bundled in the official app. - iOS Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Web/Catalog Fallback:
Archivo(closest free grotesque with the same confident weight range) - Numerals are tabular in points, prices, and timers so balances and totals align.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Speedee | 32pt | 900 | 1.2 | -0.4pt | "Rewards", "Menu" large title |
| Rewards Number | Speedee | 28pt | 900 | 1.0 | -0.5pt | The points balance — yellow |
| Hero / Tagline | Speedee | 26pt | 800 | 1.25 | -0.3pt | "i'm lovin' it", promo headline |
| Greeting | Speedee | 22pt | 800 | 1.25 | -0.4pt | "Hi, {name}" |
| Card Title | Speedee | 18pt | 800 | 1.3 | -0.3pt | "MyMcDonald's Rewards", section card |
| Section Header | Speedee | 19pt | 800 | 1.3 | -0.3pt | "Deals & Rewards", "Start an order" |
| Body | Speedee | 16pt | 400 | 1.5 | 0pt | Descriptions, paragraph copy |
| Deal Title | Speedee | 15pt | 600 | 1.4 | 0pt | "Buy one, get one $1" |
| Price / Points | Speedee | 14pt | 700 | 1.4 | 0pt | "$5.99" / "1,900 pts" — tabular |
| Meta | Speedee | 14pt | 400 | 1.4 | 0pt | "Valid through Sun", store name |
| Badge / Flag | Speedee | 12pt | 800 | 1.1 | 0.3pt | "DEAL", "FREE", "NEW" — UPPERCASE |
| Button (Primary) | Speedee | 15pt | 800 | 1.0 | 0.1pt | Pill CTAs |
| Caption | Speedee | 12pt | 400 | 1.4 | 0pt | T&C, tiny print |
| Tab Label | Speedee | 10pt | 700 | 1.0 | 0.1pt | Bottom tab labels |
| Mode Tile Label | Speedee | 11pt | 700 | 1.1 | 0pt | "Pickup", "Curbside" |
Principles
- Weight + yellow carry hierarchy: emphasis lives at 800/900 and in the Golden Arches Yellow. The rewards number is the single largest, heaviest, most colorful element on the home screen.
- Friendly, not corporate: Speedee's slight roundness keeps the heavy weights warm — pair with rounded shapes (pill buttons, 16pt cards) to keep the tone cheerful.
- Tabular numerals for points/money/timers: the rewards balance, deal points, prices, and the "order ready in X min" timer all align.
- UPPERCASE flags: deal flags and status badges are uppercase with +0.3pt tracking — punchy and scannable.
- Dynamic Type: titles, body, deal copy scale; the rewards number, badges/flags, tab labels, and mode-tile labels stay fixed (layout-critical).
Components and layoutRead the full spec
Buttons
Primary Button (Order Now / Add to order / Redeem)
- Shape: Pill, 999pt corner radius
- Background:
#FFC72C(Golden Arches Yellow) - Text:
#1A1A1A(mandatory — never white), Speedee 15pt weight 800 - Padding: 14pt vertical, 28pt horizontal (full-width in cart/checkout)
- Pressed: background
#E6B015+ scale 0.98 - Disabled: background
#E3E3E5/#2A2A2A, text#8A8A8A
Secondary Button (Add to Mobile Order / Continue)
- Shape: Pill, 999pt corner radius
- Background:
#DA291C(McDonald's Red) - Text:
#FFFFFF, Speedee 15pt weight 800 - Pressed: background
#B71F14+ scale 0.98
Outline Button (Change Location / Edit)
- Background: transparent
- Border: 1.5pt
#1A1A1A/#F2F2F2 - Text:
#1A1A1A/#F2F2F2, Speedee 14pt weight 700 - Corner radius: 999pt (pill)
- Padding: 12pt vertical, 22pt horizontal
Text Button (View Deal Details / See all)
- Text:
#DA291C(brand red), Speedee 14pt weight 800 - No background, no border
- Pressed: opacity 0.6
Icon Button (bell, close, back)
- 36pt circle,
#F4F4F5/#1C1C1Ebackground - 18pt glyph,
#1A1A1A/#F2F2F2
Core Atoms
Rewards Points Pill
- Pill, 999pt radius,
#FFC72Cfill - "2,150 PTS" in
#1A1A1A, Speedee 12pt weight 800, tabular numerals - Sometimes a leading 11pt star glyph in
#1A1A1A
Deal Flag
- Rounded rectangle, 6pt corner radius,
#DA291Cfill - "DEAL" / "FREE" / "NEW" in
#FFFFFF, Speedee 12pt weight 800 UPPERCASE - Top-left corner of the deal-tile image, 8pt inset
Progress Bar (Rewards)
- Track:
#3A3A3A(dark) /#E3E3E5(light), 8pt tall, 4pt radius - Fill:
linear-gradient(90deg, #FFC72C, #FFD75E), 4pt radius - Caption beneath: "Just {N} points away from {reward}" — secondary text, reward name bold primary
Status Badge
- Pill, 999pt radius
- "ORDER READY" green
#2B8A3E/ white text; "PREPARING" yellow#FFC72C/#1A1A1A; "DEAL" red - Speedee 12pt weight 800 UPPERCASE
Order-Mode Tile
- Rounded rectangle, 12pt corner radius
- Default: 1.5pt
#E3E3E5/#2C2C2Eborder, transparent fill, icon + label#1A1A1A/#F2F2F2 - Active: 1.5pt
#FFC72Cborder,#FFC72C14fill, icon + label tinted#FFC72C - 22pt centered icon, 11pt/700 label below
Navigation
Greeting Header
- Leading: 32×28pt arches logomark (yellow, never recolored)
- Title: "Hi, {name}" — Speedee 22pt/800, the name often tinted
#FFC72C - Trailing: 36pt circular bell button (
#1C1C1Ebg) - Scrolls away; a compact title bar replaces it on scroll
Bottom Tab Bar
- Height: 70pt incl. safe area
- Background:
rgba(255,255,255,0.94)/rgba(18,18,18,0.94)with blur, 0.5pt top divider - Tabs (5): Home, Rewards, Order (center FAB), Menu, More
- Center Order FAB: 50pt elevated yellow
#FFC72Ccircle,#1A1A1Acart glyph,rgba(255,199,44,0.4) 0 6px 16pxshadow, lifted -6pt above the bar; label "Order" in yellow - Side tabs: 22pt glyph; active = filled glyph in
#FFC72C; inactive = stroke#888; labels 10pt/700 always shown
Top Nav (Menu / Deal detail)
- Height: 56pt incl. safe area
- Leading back chevron (circular icon button)
- Center: screen title, Speedee 18pt/800
- Trailing: bag / search / store-info as circular icon buttons
- Sticky category strip on the menu once it scrolls
Input Fields
Search Field
- Height: 48pt
- Background:
#F4F4F5/#1C1C1E - Corner radius: 999pt (pill) — consistent with the rounded language
- Leading 18pt
magnifyingglass#5C5C5C/#A0A0A0 - Placeholder: "Search the menu"
#5C5C5C/#A0A0A015pt - Focus: 1.5pt
#FFC72Cborder
Form Field (address / payment)
- Height: 52pt
- Background:
#F4F4F5/#1C1C1E - Corner radius: 12pt
- Floating label 11pt
#5C5C5Con focus; text#1A1A1A/#F2F2F215pt - Focus: 1.5pt
#FFC72Cborder - Error: 1.5pt
#DA291Cborder + 12pt red helper text
Promo Code Field
- Inline, dashed
#FFC72Cborder, 12pt radius - "APPLY" trailing text button in
#DA291C13pt/800 UPPERCASE
Distinctive Components
MyMcDonald's Rewards Card
- Rounded 16pt card, subtle radial yellow glow in a corner
- "MyMcDonald's Rewards" eyebrow (12pt/700 secondary UPPERCASE)
- Points balance: huge
#FFC72CSpeedee 28pt/900 + " points" secondary - Progress bar (yellow gradient fill) + "Just {N} points away from {reward}"
- Tapping opens the full rewards catalog (100 / 200 / 400 / 600 / 1500 pt tiers)
Deal Tile (two-up grid)
- Rounded 16pt card
- Top: ~96pt product photo with a red
DEAL/FREEflag top-left - Body: deal name 14pt/800 → offer line 12pt secondary → "or N,NNN pts" in
#FFC72C11pt/800 with a leading star - Full-tile tap opens the deal detail
Deal / Coupon Detail Card
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Single column; deals stay 2-up but shorter photos; compact greeting |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; greeting respects it |
| iPhone 15/16 Pro Max | 430pt | Larger deal photos; bigger rewards number |
| iPad (portrait) | 768pt | 2–3 column deal grid; rewards card spans top; content max 760pt centered |
| iPad (landscape) | 1024pt+ | 3-column deals; persistent order summary panel on the right |
Dynamic Type
- Screen titles, section headers, body, deal copy: full scale
- Rewards number, deal flags, status badges, tab labels, mode-tile labels: FIXED (layout-critical)
- Prices/points scale one step then truncate gracefully
Orientation
- iPhone: portrait-locked for the order flow (category standard)
- iPad: supports landscape with a 3-column grid + sticky order panel
Touch Targets
- Pill CTA: ≥ 48pt tall
- Order FAB: 50pt circle, 56pt+ hit area
- Order-mode tile: full-tile tap, ≥ 64pt tall
- Tab bar icon: 22pt glyph, 44pt+ hit
- Rewards card: full-card tap to open catalog
Safe Area Handling
- Top: greeting + Dynamic Island respected
- Bottom: Order FAB and tab bar above the home indicator; sticky CTA bar pins above the tab bar
- Keyboard: address/promo forms scroll above keyboard; curbside sheet positions above it
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-mcdonalds {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #121212;
--heading-color: #121212;
--link-color: #8b6500;
--link-hover-color: #584000;
--border-color: #d4d4d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(18,18,18,0.06);
--card-hover-shadow: 0 6px 18px rgba(18,18,18,0.12);
--header-bg: #121212;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #656565;
--button-bg: #ffc72c;
--button-text-color: #000000;
--button-hover-bg: #f8b600;
--button-border: none;
--button-border-radius: 16px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #121212;
--button-secondary-hover-bg: #e3e3e3;
--button-secondary-border: 1px solid #d4d4d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #121212;
--base-font: var(--font-sans);
--heading-font: var(--font-sans);
--card-border-radius: 16px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- coffee meets bagel 89.5%
- sanu 82.6%
- uber eats 82.0%
- lemon8 80.2%
- clubhouse 80.2%
Where this came from
- Source document
ios/design-md/food/mcdonalds/DESIGN.md· 25.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.