--- version: alpha name: "McDonald's" website: "https://www.mcdonalds.com" description: >- A global fast-food brand whose marketing site has been quietly stripped to a near-monochrome editorial grid — Speedee at 36px / weight 700 sits in charcoal ink on a white canvas, and the brand's famous golden yellow appears exactly once above the fold as a 48px-radius pill CTA fenced by a 1px gold-stroke border. Below the hero, a stack of full-bleed campaign photographs (McValue tile in flat yellow, Chicken McNuggets, McDelivery, Snack Wrap, Breakfast Comes First) carries every chromatic moment; the marketing chrome itself has receded almost entirely to charcoal and white. The 48px pill radius is the only consistent shape language, the campaign yellow #ffbc0d the only voltage, and the photography does every other job. seo: title: "McDonald's Design System for React — golden #ffbc0d pill on white, Speedee, 16 components" metaDescription: "McDonald's marketing system as a DESIGN.md file — golden #ffbc0d pill CTA on white canvas, Speedee typeface, 48px pill radius, photography as voltage. Tokens for React, Next.js, and AI tools." highlights: - "Photography as voltage — the marketing chrome has receded to charcoal #292929 on white; every chromatic moment lives inside the campaign photography stacked below the hero" - "Single golden pill — Arches yellow #ffbc0d appears exactly once on the captured page as the CTA pill fill, fenced by a 1px #c08b00 gold-stroke border" - "Speedee across every tier — the 36px / 700 h2 is the loudest typographic moment; no display ladder, no serif companion, no italic emphasis variant" - "Binary radius — 48px pill for buttons and 12px for image tiles, nothing in between; no 4 / 8 / 16px middle tier" - "Quiet civic blue — community-program text #006bae appears 74 times as the only secondary color in the chrome, never on commercial CTAs" tags: - "Food & Delivery" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | McDonald's marketing site does something the brand was famously incapable of for thirty years: it shuts up. The hero on mcdonalds.com is not a wall of red and yellow chrome — it is a six-row stack of campaign photographs (a trio of fountain drinks, a yellow McValue tile, a Chicken McNuggets shot, the McDelivery bag, a Snack Wrap, a Breakfast Comes First flat-lay) each paired with a Speedee headline at 36px / weight 700 in charcoal ink on a white canvas. The Arches yellow shows up exactly once above the fold, as a 48px-radius pill CTA reading "Order Now." A 1px gold-stroke border at #c08b00 fences the pill — a small typographic restraint that signals the brand has moved decisively toward an editorial register. The DESIGN.md file packages the system into a machine-readable spec. Inside: 7 color tokens (charcoal ink at #292929 carrying 839 of the captured page's text + border occurrences, the singular Arches yellow #ffbc0d as the one chromatic voltage, a quiet civic-program blue #006bae that appears in 74 places never on commercial CTAs, and four neutral tones); 11 Speedee typography tokens spanning a 36px / 700 hero h2 down to 10px / 400 disclaimer captions; a binary 48px / 12px radius scale; an 18px-and-6px-dominated spacing rhythm; and 16 component definitions covering the golden pill CTA, the photo-card stack, the secondary outline button, the disclaimer caption strip, and the top-nav. Feed this file to an AI coding tool and it reproduces the specific moves the rebrand was built on: photography as the only chromatic moment, charcoal-on-white marketing chrome, Speedee at modest tiers without a heavier display weight, and the golden pill held in such reserve that a single CTA above the fold carries the entire brand recognition. Treat it as a reference rather than a clone target — the system works because the campaign photography is doing the load-bearing work. Strip the photography and the chrome alone reads as a generic editorial page; what the system is really documenting is the brand's willingness to let the food speak. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.mcdonalds.com" title: "McDonald's — official site" description: "McDonald's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is McDonald's primary brand color?" answer: "McDonald's brand voltage is Arches Gold — the saturated yellow of the Golden Arches logo. On the captured marketing page it appears exactly once as a background fill (the Order Now pill CTA above the hero stack) and is paired with a single 1px darker-gold stroke that fences the pill rather than disappearing into it. Every other chromatic moment on the page is delivered through the campaign photographs themselves — the McValue tile, the McNuggets pack, the Snack Wrap shot — never through the marketing chrome, which sits at charcoal ink on a pure-white canvas." - id: "typography" title: "What typeface does McDonald's use, and what should I use as a substitute?" answer: "McDonald's runs Speedee, a custom proprietary sans-serif commissioned in 2018, across every tier of the marketing system. The hero h2 sits at 36px / weight 700 with -0.15px letter-spacing; body copy at 16px / 400; small disclaimer text drops to 10px / 400. There is no separate display family, no serif companion, no italic emphasis cut. Inter at the same sizes is the closest open-source substitute; the proportions transfer cleanly and Inter's slightly looser counters read close to Speedee at 14-18px body sizes. The 36px hero size is the loudest typographic moment in the system — Speedee never goes higher on the captured surface." - id: "pill-radius" title: "Why does McDonald's use such an aggressive 48px button radius?" answer: "The 48px corner-radius on the Order Now CTA renders the button as a full pill — a deliberate echo of the rounded form vocabulary in Arches-era promotional materials. The system is binary: 48px on buttons and 12px on image tiles, with nothing between them. There is no 4px or 8px tight-rounding tier the way Vercel or Linear use. The pill shape pairs with the 1px gold stroke to give the button a tactile, candy-coated feel against the otherwise flat charcoal-on-white chrome — the single warmest surface on the page." - id: "civic-blue" title: "What is the blue I see in the McDonald's footer?" answer: "The page exposes a quiet civic-program blue used 74 times across the captured surface — 37 as text and 37 as border. It appears only inside community-program callouts, accessibility notices, and footer link clusters; it never touches a commercial CTA or product photograph. The blue is a structural carve-out for institutional content (Ronald McDonald House Charities, accessibility, careers) and signals a deliberate split between marketing chrome and civic chrome. Treat it as a scoped semantic tone, not as a secondary brand color." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own fast-food marketing site?" answer: "Yes — the file feeds into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce McDonald's specific moves: photography-as-voltage above the fold, single-pill CTA in saturated yellow, charcoal-on-white marketing chrome at Speedee 36px weight 700, and the binary 48px-pill plus 12px-tile radius scale. The tokens resolve cleanly without invention. The one move worth borrowing only if your brand has equity comparable to the Arches is the willingness to recede the chrome entirely — most challenger brands need their visual identity to do more of the talking, and an editorial reduction at this level reads as anonymity rather than confidence." mockups: - "marketing-hero" - "media-grid" colors: primary: "#ffbc0d" primary-stroke: "#c08b00" ink: "#292929" ink-strong: "#000000" muted: "#7c7c7c" canvas: "#ffffff" civic-blue: "#006bae" typography: display-md: fontFamily: "Speedee, -apple-system, system-ui, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 40px letterSpacing: "-0.15px" heading-sm: fontFamily: "Speedee, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 20px letterSpacing: "-0.15px" body-md: fontFamily: "Speedee, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 22.8571px letterSpacing: "-0.15px" body-md-tight: fontFamily: "Speedee, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 22px letterSpacing: "-0.15px" body-md-loose: fontFamily: "Speedee, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: "-0.15px" body-md-light: fontFamily: "Speedee, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 22px letterSpacing: "-0.15px" body-sm: fontFamily: "Speedee, -apple-system, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 24px letterSpacing: "-0.15px" emphasis-md: fontFamily: "Speedee, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 22.8571px letterSpacing: "-0.15px" button-md: fontFamily: "Speedee, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 20px letterSpacing: 0 caption: fontFamily: "Speedee, -apple-system, system-ui, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 14.5px letterSpacing: "-0.15px" nav-link: fontFamily: "Speedee, -apple-system, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 24px letterSpacing: "-0.15px" rounded: none: "0px" md: "12px" pill: "48px" spacing: xxs: "4px" xs: "6px" sm: "12px" md: "14px" base: "15px" lg: "18px" xl: "20px" 2xl: "25px" 3xl: "30px" 4xl: "65px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "14px 16px 11px" height: "48px" borderColor: "{colors.primary-stroke}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "14px 16px 11px" height: "48px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "0px 15px" height: "64px" borderColor: "{colors.muted}" nav-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "0px 12px" hero-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-md}" section-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.body-md}" emphasis-inline: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.emphasis-md}" campaign-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "0" campaign-tile-yellow: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.md}" padding: "0" disclaimer: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.caption}" civic-link: backgroundColor: transparent textColor: "{colors.civic-blue}" typography: "{typography.body-md}" borderColor: "{colors.civic-blue}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "20px 0px" borderColor: "{colors.muted}" shadow-rule: backgroundColor: transparent textColor: "{colors.ink-strong}" borderColor: "{colors.ink-strong}" --- ## Overview McDonald's marketing site does something the brand spent thirty years refusing to do. **Editorial recession.** The chrome has been stripped to charcoal `{colors.ink}` (#292929) on a white canvas (`{colors.canvas}` — #ffffff), and the famous Arches yellow appears exactly once above the fold as the Order Now pill CTA. Where Burger King paints its hero in saturated brand red and Wendy's runs its red-on-white voltage across every section, McDonald's lets the campaign photography do the chromatic work — a stack of six full-bleed photo cards (refreshing drinks, McValue, Chicken McNuggets, McDelivery, Snack Wrap, Breakfast Comes First) each paired with a 36px Speedee h2 and a single secondary outline button. The marketing chrome between the photos is so quiet it reads as an editorial site, not a quick-service-restaurant page. The single act of chromatic force is the golden pill. The Order Now button uses Arches Gold (`{colors.primary}` — #ffbc0d) as the background fill and a 1px `{colors.primary-stroke}` (#c08b00) gold-stroke border. The stroke is the small detail that telegraphs the system: the brand will hold the yellow in reserve and fence it like a piece of jewelry rather than letting it bleed across the chrome. The captured page renders the yellow exactly once as a background; the 839 occurrences of charcoal carry every other text-and-border surface. A quiet civic-program blue (`{colors.civic-blue}` — #006bae) appears 74 times in the chrome, but only inside community callouts, accessibility links, and footer clusters — never on commercial CTAs. The split between commercial chrome (charcoal + yellow + photography) and civic chrome (charcoal + blue + text) is a deliberate carve-out; treat them as two scoped systems sharing a single ink color. **Key Characteristics:** - Single chromatic voltage `{colors.primary}` (#ffbc0d) used exactly once above the fold as the pill CTA fill, fenced by a 1px `{colors.primary-stroke}` (#c08b00) gold-stroke border. - Charcoal-on-white marketing chrome — `{colors.ink}` (#292929) carries 839 of the captured surface's text + border occurrences; never pure black for body copy. - Speedee across every tier — no separate display family, no italic cut, no heavier-than-700 weight. The 36px / 700 h2 is the loudest typographic moment. - Binary radius scale — 48px pill on buttons (`{rounded.pill}`) and 12px on image tiles (`{rounded.md}`), with no 4 / 8 / 16px middle tier. - Photography as the page's chromatic vocabulary — every red, every product hue, every campaign accent lives inside the photos, not in the chrome. - Civic-program blue `{colors.civic-blue}` (#006bae) scoped to community + accessibility + footer text; commercial CTAs never use it. - Photo-card grid alternates with full-bleed yellow-fill campaign tiles (the McValue lockup, the Snack Wrap callout) — the single in-body application of the brand yellow at scale. - 18px and 6px dominate the spacing rhythm — the system is tight-paced and rarely uses the 24 / 32px breathing room a Stripe or Linear page leans on. ## Colors ### Brand - **Arches Gold** (`{colors.primary}` — #ffbc0d): frequency 1. Used as bg (1). The single chromatic moment on the captured marketing chrome — the Order Now pill CTA fill above the hero stack. Within the campaign photography below the fold the yellow also carries the McValue tile and the Snack Wrap callout, but those are image surfaces rather than tokenized chrome. - **Arches Gold Stroke** (`{colors.primary-stroke}` — #c08b00): frequency 1. Used as border (1). A darker gold that fences the pill CTA. The stroke is what telegraphs the system's confidence — the yellow does not need to bleed across the chrome because the stroke contains it. ### Text - **Ink** (`{colors.ink}` — #292929): frequency 839 — the dominant text + border tone across every tier. Display headlines, body paragraphs, nav labels, button text on the secondary outline button. Wired without a CSS custom-property family, applied inline across the captured surface. Never pure black; the slight warmth softens the chrome against the photography. - **Ink Strong** (`{colors.ink-strong}` — #000000): frequency 6 — used 2 as text, 2 as border, 2 as shadow ink. Reserved for the page's faint elevation hairlines and the rare emphasis underline. - **Muted** (`{colors.muted}` — #7c7c7c): frequency 10. Used as border (10). The quiet divider rule between footer columns and beneath the top-nav band. The single secondary neutral in the chrome. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 13 — the page floor, the secondary-button fill, the top-nav surface. Used wherever the photography or the yellow pill needs an unbroken white field beneath it. ### Civic - **Civic Blue** (`{colors.civic-blue}` — #006bae): frequency 74. Used as text (37) and border (37). Scoped to community-program callouts (Ronald McDonald House Charities), accessibility notices, and footer link clusters. Never appears on commercial CTAs, product photography, or above-the-fold chrome — the system reserves it for institutional content only. ## Typography ### Font Family The system runs **Speedee** across every tier — a custom proprietary sans-serif McDonald's commissioned in 2018. Fallbacks walk `-apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif`. There is no separate display family, no serif tier, no italic emphasis variant, and no heavier-than-700 weight on the captured page. One sans-serif does every job. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-md}` | 36px | 700 | 40px | Section h2 ("6 new refreshing drinks", "Free McNuggets?!", "Get your McD's anywhere you want") | | `{typography.heading-sm}` | 16px | 700 | 20px | Card h3 headings, secondary section titles | | `{typography.body-md}` | 16px | 400 | 22.86px | Default running text — paragraph body | | `{typography.body-md-tight}` | 16px | 400 | 22px | Compact paragraph variant | | `{typography.body-md-loose}` | 16px | 400 | 24px | Loose paragraph variant for nav menus and lists | | `{typography.body-md-light}` | 16px | 300 | 22px | Rare lighter-weight body — appears 2 times, used in promotional callouts | | `{typography.body-sm}` | 14px | 400 | 24px | Caption rows, secondary metadata, "Sign Up for Email" nav link | | `{typography.emphasis-md}` | 16px | 700 | 22.86px | Inline bold emphasis inside body paragraphs | | `{typography.button-md}` | 16px | 700 | 20px | Primary and secondary button labels | | `{typography.caption}` | 10px | 400 | 14.5px | Disclaimer text, legal footnotes, fine print | | `{typography.nav-link}` | 14px | 400 | 24px | Top-nav link labels | ### Principles The 36px / 700 h2 is the loudest typographic moment in the system. There is no 48 / 56 / 64px display tier — the rebrand deliberately caps the display size so the campaign photography can carry the visual force above it. Body sits at 16px / 400 with -0.15px tracking, slightly tighter than the default sans treatment; the tracking is the single typographic detail that distinguishes Speedee at body size from generic Inter. Caption text at 10px / 400 is the smallest tier on the page, reserved for nutrition disclaimers and "Subject to availability" footnotes. ### Note on Font Substitutes Speedee is proprietary and not publicly licensed. **Inter** at the same weights is the closest open-source substitute; the proportions transfer cleanly and Inter's slightly looser counters read close to Speedee at 16-18px body sizes. For the 36px hero size, **Geist** (Vercel's open-source sans) holds the cap height and weight-700 stem thickness Speedee uses. The -0.15px letter-spacing should carry across the substitute. ## Layout ### Spacing System - **Base unit:** 6px — the dominant micro-gap (31 occurrences), paired with an 18px macro-gap (34 occurrences). The system runs on a tight 6 / 12 / 18px rhythm rather than the conventional 4 / 8 / 16px scale. - **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 6px · `{spacing.sm}` 12px · `{spacing.md}` 14px · `{spacing.base}` 15px · `{spacing.lg}` 18px · `{spacing.xl}` 20px · `{spacing.2xl}` 25px · `{spacing.3xl}` 30px · `{spacing.4xl}` 65px. - **Section padding:** vertical spacing between photo-card sections runs around 30px — tight by editorial standards, deliberately so the photo stack reads as a single sequence rather than separated bands. - **Button padding:** `{spacing.md}` 14px top, 16px sides, 11px bottom — asymmetric, with the extra 3px at the top balancing the Speedee cap-height optical center. - **Top-nav padding:** `{spacing.base}` 15px horizontal. ### Grid & Container - **Max content width:** ~1080px on the photo-card stack, ~1280px on the top-nav and footer. - **Hero block:** the page does not have a traditional one-hero treatment; the first photo card ("6 new refreshing drinks") is the de-facto hero and shares its visual weight with the five photo cards stacked beneath it. - **Card layout:** each campaign card runs a 50/50 split — full-bleed photograph on one side, charcoal headline + paragraph + secondary outline button on the other. The cards alternate the photo side (left / right) section over section to create a visual zig-zag. - **Footer:** multi-column civic-link grid with `{colors.civic-blue}` text and `{colors.muted}` divider rules. ### Rhythm The page alternates **photo / text / photo / text** in a tight cadence — there is no editorial breathing band, no testimonial interlude, no logo wall. The rhythm is the photo stack, and the chrome is the connective tissue. This is the inverse of a Stripe or Airbnb page that uses generous whitespace as a primary device; McDonald's runs the rhythm at high density and trusts the photography to carry the eye downward. ## Elevation The system has essentially **no shadow tier**. The captured page renders six occurrences of `#000000` total — two as text, two as border, two as shadow ink — and those shadows sit at extremely low opacity on the top-nav and pill CTA only. The photo cards themselves carry no drop shadow; depth comes from the photograph's own internal lighting rather than from a layered elevation system. Where a typical dashboard product would use a 4-tier shadow scale, this marketing page uses zero. - **Flat (no shadow):** body, hero cards, photo grid, footer — 99% of surfaces. - **Pill CTA elevation:** a faint stroke at `{colors.primary-stroke}` (#c08b00) fences the Order Now button, but no drop shadow is drawn beneath it. - **Top-nav rule:** a 1px `{colors.muted}` (#7c7c7c) bottom border separates the nav from the page content. ## Shapes The radius scale is **binary**: a 48px pill for buttons and a 12px round for image tiles, with nothing between them. - `{rounded.none}` 0px — headings, body text, footer. - `{rounded.md}` 12px — campaign photo tiles, image cards, the McValue and Snack Wrap full-bleed tiles. - `{rounded.pill}` 48px — the Order Now CTA and the secondary outline buttons beneath every photo card. There is no 4px tier, no 8px tier, no 16 / 20 / 24px middle. The scale is deliberately polarized: either a surface is a photograph with a soft 12px corner, or it is a button with a full 48px pill. The pill is the only warm surface on the page, and the radius difference between the two tiers is the system's main visual tempo. ## Components **`button-primary`** — The signature CTA. Arches Gold `{colors.primary}` (#ffbc0d) fill, charcoal `{colors.ink}` (#292929) text, `{rounded.pill}` 48px radius, asymmetric 14 / 16 / 11px padding, 48px height. A 1px `{colors.primary-stroke}` (#c08b00) stroke fences the pill. "Order Now" is the canonical instance, anchored at the top-right of the page above the photo stack. **`button-secondary`** — White `{colors.canvas}` fill, charcoal text, `{rounded.pill}` 48px radius, 14 / 16 / 11px padding, 48px height, with a 1px `{colors.ink}` charcoal border. Used beneath each campaign photo card for "Learn more" / "Order now" / "Find a location" secondary actions — the workhorse CTA of the photo stack. **`top-nav`** — White `{colors.canvas}` surface, charcoal text, 64px height, `{spacing.base}` 15px horizontal padding, with a 1px `{colors.muted}` bottom border. Houses the Golden Arches lockup flush left, the primary nav cluster center (Our Menu / McDelivery / Mobile App / Rewards), and the Order Now pill flush right. **`nav-link`** — Transparent background, charcoal text in `{typography.nav-link}` (14px / 400), 0 / 12px padding. **`hero-heading`** — Charcoal text, `{typography.display-md}` (36px / 700 / -0.15px tracking). The h2 inside the first photo card ("6 new refreshing drinks") and every subsequent card title. **`section-heading`** — Same 36px / 700 token, used for full-section h2s rather than card-internal headings. **`body-paragraph`** — Default charcoal running text at `{typography.body-md}` (16px / 400 / 22.86px line height). The single-paragraph dek beneath each card headline. **`body-paragraph-muted`** — `{colors.muted}` (#7c7c7c) variant for secondary copy and footer text. **`emphasis-inline`** — `{typography.emphasis-md}` (16px / 700) — bold inline emphasis inside body paragraphs, used 3 times across the captured page for product names and price callouts. **`campaign-tile`** — White `{colors.canvas}` fill, `{rounded.md}` 12px radius, 0 padding (the photo fills the tile edge-to-edge). The default photo card in the campaign stack. **`campaign-tile-yellow`** — Arches Gold `{colors.primary}` (#ffbc0d) fill, charcoal text, `{rounded.md}` 12px radius. The McValue lockup and the Snack Wrap full-bleed callouts — the single in-body application of the brand yellow at scale. Two captured instances on the page. **`disclaimer`** — Charcoal text at `{typography.caption}` (10px / 400 / 14.5px line height). Used for nutrition disclaimers, "Subject to availability" footnotes, and "Participating locations only" small print. The smallest typographic tier in the system. **`civic-link`** — Civic blue `{colors.civic-blue}` (#006bae) text and border, body-md typography. Scoped to community-program callouts, accessibility links, and footer civic clusters. Never appears on commercial chrome. **`footer`** — White canvas, charcoal text at `{typography.body-sm}` (14px / 400), 20 / 0px padding, with a 1px `{colors.muted}` top divider. Multi-column civic-link grid; the civic-blue carries the link text. **`shadow-rule`** — A faint 1px `{colors.ink-strong}` (#000000 at low opacity) rule used 2 times for top-nav and CTA elevation hairlines. Not a visible shadow; closer to a border than a drop shadow. ## Do's and Don'ts **Do** hold Arches Gold `{colors.primary}` (#ffbc0d) in reserve for the single Order Now pill CTA above the fold. The system renders the yellow exactly once as background chrome on the captured page; multiplying it into multiple yellow CTAs across a page dilutes the only chromatic brand signal in the marketing chrome. **Do** use the 1px `{colors.primary-stroke}` (#c08b00) stroke on the yellow pill. The stroke is the system's typographic confidence move — it fences the voltage like jewelry rather than letting the yellow bleed flat. Dropping the stroke makes the pill read as a generic SaaS CTA. **Do** let the campaign photography carry every red, every product hue, every saturated chromatic moment. The marketing chrome has no red token, no orange token, no warm-neutral tier — those colors live exclusively inside the photo cards. **Do** keep display weight at 700 / 36px. The h2 is the loudest typographic tier in the system; there is no 48 / 56 / 64px display moment. Bumping to a larger display tier turns the editorial recession into a generic fast-food shout. **Don't** use the civic blue `{colors.civic-blue}` (#006bae) for commercial CTAs, product photography, or above-the-fold chrome. The blue appears 74 times on the captured page but is scoped to community-program callouts, accessibility, and footer link clusters only. Applying it to an Order Now button breaks the chrome / civic split. **Don't** introduce a middle radius tier between `{rounded.md}` 12px and `{rounded.pill}` 48px. The system is binary — image tiles round at 12px and buttons go to a full pill, with no 16 / 20 / 24px alternative. Adding a middle softens the contrast between the photo-card grid and the warm pill CTA. **Don't** swap the charcoal `{colors.ink}` (#292929) for pure black `#000000`. The system uses charcoal at 839 of the captured surface's text + border occurrences and reserves true black for hairlines and faint shadow ink only. Pure-black body copy on white reads as a generic editorial site and loses the small warmth that softens the chrome against the photography. **Don't** add a saturated red token to the chrome. The brand has historically used red prominently, but the rendered marketing site exposes no red on the chrome surface — every red on the page lives inside campaign photographs. Adding a red CTA, red banner, or red link tone re-introduces a voltage the rebrand deliberately stripped out. ## Known Gaps - **Hover and focus states:** the captured surface does not expose `:hover` or `:focus` variants. The Order Now pill, secondary outline button, and nav links carry the resting state only; pressed / active / disabled tints are not represented. - **Form input states:** no `` was captured on the marketing surface; the `text-input` token typical of other DESIGN.md files is absent here. McDonald's surface form work lives inside the rewards login flow and the McDelivery checkout — not on the captured marketing page. - **Mobile breakpoints:** the captured surface is the 1440px desktop view. The mobile breakpoint (where the photo-card stack collapses to a single column and the Arches lockup moves to a hamburger nav) is not represented in the tokens. - **Motion:** the photo cards carry no visible scroll-driven animation on the captured surface, but the production page has subtle scroll-into-view fades that are not captured here. - **Campaign photography:** the brand's chromatic vocabulary lives inside the campaign photographs themselves — the McNuggets red, the Snack Wrap green, the McDelivery red bag, the Breakfast yellow. These are image-bound colors, not tokenized, and the spec does not attempt to enumerate them. - **Localized chrome:** the captured surface is us-en. Other locales (mcdonalds.fr, mcdonalds.de, mcdonalds.com.au) carry their own chromatic carve-outs — French sites lean into a red-accent revival, German sites use a darker green-tinted nutrition strip — and are not represented here. - **Sub-brand surfaces:** Ronald McDonald House Charities, McCafé, and the McDonald's app each carry their own surface tokens that diverge from the marketing chrome (the app uses a red CTA, McCafé uses a brown wordmark). None of those sub-brand tokens are in the captured page.