McDonald DESIGN.md

Brands

Fast-food commerce with strong red-and-yellow branding, friendly utility, and mainstream consumer accessibility. McDonald's public site uses bright brand color, white space, large food imagery, and clear app/deal CTAs.

Raw DESIGN.md

At a glance

Group: Brands
Main color: #da291cRed design systems
Fonts: SpeedeeHelvetica Neue SF Mono

Colors in this file

#da291c
Unnamed
#ffc72c
Unnamed
#e5e5e5
Unnamed
#ffffff
Unnamed
#111111
Unnamed
#666666
Unnamed

Fast-food commerce with strong red-and-yellow branding, friendly utility, and mainstream consumer accessibility. McDonald's public site uses bright brand color, white space, large food imagery, and clear app/deal CTAs.

1. Visual Theme & Atmosphere

Overall Aesthetic

McDonald's feels like global fast-food branding turned into a familiar, mobile-friendly digital ordering and offer interface.

Mood & Feeling

Friendly
Bold
Accessible
Promotional
Mainstream

Design Density

Medium density. Deals, food categories, and app benefits are clear and direct.

Visual Character

Bright red and yellow identity
White support surfaces
Large food imagery
Simple offer and app-focused modules

2. Color Palette & Roles

Token	Hex	Role
`--mcd-red`	`#DA291C`	Primary brand anchor
`--mcd-yellow`	`#FFC72C`	Highlight and brand support
`--mcd-white`	`#FFFFFF`	Main surface
`--mcd-black`	`#111111`	Text
`--mcd-muted`	`#666666`	Secondary text
`--mcd-border`	`#E5E5E5`	Borders

3. Typography Rules

Font Stack

css--font-display: "Speedee", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Hero 52/700, H1 36/700, H2 28/700, Body 16/400, Small 14/400

4. Component Stylings

css.button-primary { background:#da291c; color:#fff; border:none; border-radius:999px; min-height:44px; padding:0 18px; font-weight:700; }
.button-secondary { background:#ffc72c; color:#111; border:none; border-radius:999px; min-height:44px; padding:0 18px; font-weight:700; }
.card { background:#fff; border:1px solid #e5e5e5; border-radius:18px; }

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48px

Layout Behavior

Lead with offers, app benefits, and menu highlights
Keep ordering and location actions clear
Use food imagery generously but simply

6. Depth & Elevation

McDonald's uses light consumer-card framing with direct promotional hierarchy.

7. Do's and Don'ts

Do

Keep it bold, friendly, and mobile-order ready
Use red and yellow with confidence
Preserve promotional clarity

Don't

Don’t overcomplicate with gourmet editorial minimalism
Don’t hide app or deal CTAs

8. Responsive Behavior

Breakpoints

Mobile <768px
Tablet 768px-1023px
Desktop 1024px+

Responsive Rules

Keep app/order/deals actions near the top
Stack food promos clearly and maintain strong imagery

9. Agent Prompt Guide

textDesign this like McDonald's: bold red-and-yellow fast-food UI with white support surfaces, large food imagery, simple offer cards, and strong app-and-order consumer clarity.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/mcdonalds.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "mcdonalds" })

Redis

Brands · Inter

Fast data-platform design with bold red identity, black technical contrast, and performance-first product framing.

Capital One

Brands · Optimist

National bank design with bold red identity, confident card surfaces, clean Sans typography, and accessible financial clarity.

Lenovo

Brands · Lato

Computing and device retail with black-red branding, practical hierarchy, and broad catalog structure. Lenovo's public site uses a black-white base, red brand accents, and hardware-forward merchandising.

Mistral

Brands · Arial

Frontier AI platform design with sharp black foundations, a warm orange-to-yellow signature spectrum, and highly controlled enterprise product framing. Mistral combines open-model energy with direct, no-frills…

Confluent