McDonald's Design System
McDonald's client brand system: Golden Arches, app-first convenience, MyMcDonald's Rewards, delivery, drive-thru, menu, franchise, restaurant analytics, and campaign delivery patterns. Includes approved supplied logo assets, inferred tokens from provided artwork, QSR voice guidance, brand board, and an installable brand skill.
Brand board
Tokens · system.css
:root {
--mcd-golden: #FDBB20;
--mcd-red: #DB0007;
--mcd-ketchup: #B01217;
--mcd-black: #27251F;
--mcd-charcoal: #3A332C;
--mcd-cream: #FFF7E2;
--mcd-mustard-soft: #FFE8A3;
--mcd-sky: #D8F0FF;
--mcd-white: #FFFFFF;
--mcd-border: #E7D8BC;
--mcd-shadow: 0 18px 40px rgba(39, 37, 31, 0.14);
--font-display: "Arial Black", "Helvetica Neue", system-ui, sans-serif;
--font-body: Inter, Aptos, "Helvetica Neue", system-ui, sans-serif;
--font-condensed: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", system-ui, sans-serif;
--radius-sm: 4px;
--radius-md: 8px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
}
body {
margin: 0;
background: var(--mcd-cream);
color: var(--mcd-black);
font-family: var(--font-body);
}
.mcd-board {
min-height: 100vh;
background:
linear-gradient(180deg, rgba(255, 232, 163, 0.72), rgba(255, 247, 226, 0.94) 48%),
var(--mcd-cream);
}
.mcd-hero {
display: grid;
grid-template-columns: 1.08fr 0.92fr;
min-height: 420px;
background: var(--mcd-red);
color: var(--mcd-white);
}
.mcd-hero__copy {
padding: clamp(28px, 5vw, 64px);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-4);
}
.mcd-eyebrow {
font-family: var(--font-condensed);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.mcd-hero h1 {
margin: 0;
max-width: 10ch;
color: var(--mcd-golden);
font-family: var(--font-display);
font-size: clamp(46px, 8vw, 104px);
line-height: 0.92;
}
.mcd-hero p {
margin: 0;
max-width: 52ch;
font-size: 18px;
line-height: 1.45;
}
.mcd-hero__media {
position: relative;
min-height: 280px;
background: var(--mcd-red);
overflow: hidden;
}
.mcd-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mcd-panel {
max-width: 1180px;
margin: 0 auto;
padding: var(--space-6) var(--space-5);
}
.mcd-section-title {
margin: 0 0 var(--space-4);
font-family: var(--font-display);
font-size: 24px;
line-height: 1.1;
}
.mcd-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-4);
}
.mcd-card {
background: var(--mcd-white);
border: 1px solid var(--mcd-border);
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: var(--mcd-shadow);
}
.mcd-logo-card {
min-height: 188px;
display: flex;
align-items: center;
justify-content: center;
}
.mcd-logo-card img {
max-width: 100%;
max-height: 118px;
object-fit: contain;
}
.mcd-red-card {
background: var(--mcd-red);
}
.mcd-swatch {
min-height: 128px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-3);
color: var(--mcd-white);
font-weight: 800;
}
.mcd-swatch small {
font-weight: 700;
opacity: 0.86;
}
.mcd-component {
display: grid;
gap: var(--space-3);
}
.mcd-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
border-radius: 999px;
border: 0;
padding: 0 22px;
background: var(--mcd-golden);
color: var(--mcd-black);
font-weight: 900;
}
.mcd-metric {
font-family: var(--font-display);
font-size: 42px;
line-height: 1;
color: var(--mcd-red);
}
.mcd-caption {
margin: 0;
color: var(--mcd-charcoal);
font-size: 14px;
line-height: 1.45;
}
@media (max-width: 860px) {
.mcd-hero,
.mcd-grid {
grid-template-columns: 1fr;
}
}
Files & assets
| Name | Kind | Location | |
|---|---|---|---|
| McDonald's Golden Arches symbol (SVG) | logo | content/design-systems/mcdonalds/assets/logos/mcdonalds-golden-arches.svg | |
| McDonald's wordmark black | logo | content/design-systems/mcdonalds/assets/logos/mcdonalds-wordmark-black.png | |
| McDonald's wordmark white | logo | content/design-systems/mcdonalds/assets/logos/mcdonalds-wordmark-white.png | |
| McDonald's Golden Arches symbol (PNG) | logo | content/design-systems/mcdonalds/assets/logos/mcdonalds-golden-arches.png | |
| McDonald's Golden Arches symbol (WebP) | logo | content/design-systems/mcdonalds/assets/logos/mcdonalds-golden-arches.webp | |
| McDonald's red icon | logo | content/design-systems/mcdonalds/assets/logos/mcdonalds-icon-red.jpeg | |
| McDonald's ba da ba ba ba banner | photography | content/design-systems/mcdonalds/assets/photography/mcdonalds-ba-da-ba-ba-ba-banner.jpeg |
Overview
# McDonald's Design System
Client brand system for **McDonald's**. This entry translates the supplied assets and public
McDonald's brand signals into an Enlighten-style system for decks, reports, dashboards, demos,
QSR analytics artifacts, restaurant operations, loyalty, ordering, delivery, and franchise work.
The core idea is **iconic convenience at restaurant scale**: instantly recognizable, simple,
optimistic, app-first, operationally precise, and built around faves people already know.
## Brand Signals
| Signal | Role |
| --- | --- |
| `Golden Arches` | Primary recognition system and strongest visual asset. |
| `I'm lovin' it` | Brand attitude: simple, warm, optimistic, familiar. |
| `ba da ba ba ba` | Audio/social shorthand for campaigns and mnemonic moments. |
| `MyMcDonald's Rewards` | Loyalty/app surface for points, deals, ordering, and personalization. |
| `Drive-thru, delivery, app` | Convenience layer: fast access across channels. |
## Color
The Golden Arches color is taken from the supplied SVG asset. Other supporting colors are inferred
from supplied McDonald's artwork and public digital surfaces until official guidelines are provided.
| Token | Hex | Role |
| --- | --- | --- |
| `--mcd-golden` | `#FDBB20` | Golden Arches, primary optimism, key highlights. |
| `--mcd-red` | `#DB0007` | Brand red, campaign fields, urgent offers, app icon background. |
| `--mcd-black` | `#27251F` | Wordmark, body text, high-contrast UI. |
| `--mcd-white` | `#FFFFFF` | Logo-safe background, cards, app surfaces. |
| `--mcd-cream` | `#FFF7E2` | Warm food-friendly surface. |
| `--mcd-ketchup` | `#B01217` | Deep red for contrast and status emphasis. |
| `--mcd-mustard-soft` | `#FFE8A3` | Pale yellow tints, charts, callouts. |
| `--mcd-sky` | `#D8F0FF` | App and delivery information accent. |
## Type
Official McDonald's type packages were not included. Until those arrive, use a practical stack that
keeps deliverables bold, readable, and QSR-friendly:
| Token | Stack | Role |
| --- | --- | --- |
| `--font-display` | `Arial Black`, `Helvetica Neue`, system sans | Big offer headlines and hero numbers. |
| `--font-body` | `Inter`, `Aptos`, system sans | UI, reports, dashboards, and body copy. |
| `--font-condensed` | `Arial Narrow`, `Roboto Condensed`, system sans | Menu labels, dense cards, operational tables. |
## What's In This Entry
| File / folder | Purpose | Where |
| --- | --- | --- |
| `system.css` | Authoritative design tokens and reusable component CSS | git |
| `brand-board.html` | Brand board with palette, logos, voice, components, and sample layouts | git |
| `overview.md` | Human-readable summary of the system | git |
| `meta.json` | Registry metadata and asset references | git |
| `assets/logos/` | Supplied McDonald's logo and icon assets | git |
| `assets/photography/` | Supplied campaign/banner imagery | git |
| `skill/` | Installable `mcdonalds-design` brand skill | git |
## How Agents Should Use It
1. Pull `system.css` into context. It is authoritative for this registry entry.
2. Use tokens by `var()` name. Do not hardcode brand colors.
3. Treat supplied logo files as approved assets. Do not redraw, stretch, or recolor them.
4. Use a simple, confident, app-first voice for client-facing artifacts.
5. Mark inferred decisions clearly when a deliverable claims brand-standard accuracy.
## Source Notes
Evidence used for this first pass:
- Approved files supplied for client use: Golden Arches symbol, McDonald's wordmarks, square app
icon, and campaign banner.
- Public McDonald's digital surfaces reviewed on June 17, 2026: home, app, MyMcDonald's Rewards,
delivery, and ordering pages.
> This is a client-enabled working system, not a substitute for official brand guidelines. Update
> color, type, spacing, and logo rules if McDonald's provides a guideline PDF or font package.