McDonald's Styleguide
A comprehensive design system showcasing colors, typography, spacing, shadows, radius, and iconography
Tools
React, Tailwind CSS, TypeScript
Type
Design System
Colors
Primary Colors
Neutral Colors
Semantic Colors
Typography
Font Family
PRIMARY FONT
Speedee
Custom typeface inspired by the Golden Arches. Friendly, characterful, and highly legible.
FALLBACK STACK
Speedee, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Type Scale
Display
48px / 56px · Weight 700
Heading 1
36px / 44px · Weight 700
Heading 2
28px / 36px · Weight 600
Heading 3
22px / 28px · Weight 600
Body Large
18px / 28px · Weight 400
Body
16px / 24px · Weight 400
Body Small
14px / 20px · Weight 400
Caption
12px / 16px · Weight 400
Spacing
Spacing Scale
Shadows
Elevation Scale
shadow-sm
Cards, buttons
shadow-md
Dropdowns, popovers
shadow-lg
Modals, dialogs
shadow-xl
Elevated panels
shadow-2xl
Floating elements
shadow-inner
Pressed states, inputs
Border Radius
Radius Scale
None
rounded-none
Small
rounded-sm
Medium
rounded-md
Large
rounded-lg
XL
rounded-xl
2XL
rounded-2xl
3XL
rounded-3xl
Full
rounded-full
Layout
Grid System
12-Column Grid
GUTTER
24px
MARGIN
24px (mobile) / 48px (desktop)
MAX WIDTH
1200px
Breakpoints
Mobile
0 - 639px
sm:
Tablet
640 - 1023px
md:
Desktop
1024 - 1279px
lg:
Wide
1280px+
xl:
Iconography
Icon Sizes
Icon Guidelines
Do
- • Use consistent stroke width (1.5px or 2px)
- • Maintain optical alignment within bounding box
- • Use rounded corners for friendly appearance
- • Ensure icons are legible at small sizes
Don't
- • Mix different icon styles in the same context
- • Use icons smaller than 12px
- • Add excessive detail that doesn't scale
- • Use icons without sufficient contrast