Design SystemJan 2025
McDonald's Styleguide v2
A condensed, single-view design system with minimal scrolling and maximum information density
Tools
React, Tailwind CSS, TypeScript
Type
Design System
Typography
Font Families
Aa
Speedee
Primary
Light 300Regular 400Bold 700
Aa
Mono
Code
Regular 400Medium 500
Headers
H148px / 700
H236px / 600
H328px / 600
H422px / 500
H518px / 500
Body Text
Body Large18px
Body16px
Body Small14px
Caption12px
Color
Primary
Red
#DA291C
Gold
#FFC72C
White
#FFFFFF
Secondary
Green
#234E33
Dark
#292929
Gray
#6B6B6B
Light
#F0EFF2
Gradients
Warm
Fresh
Neutral
Opacity
100
80
60
40
20
10
Semantic
Success
#27AE60
Warning
#F2994A
Error
#EB5757
Info
#2F80ED
Shapes
Border Radius
None
0
SM
4px
MD
8px
LG
12px
XL
16px
2XL
24px
3XL
32px
Full
9999px
Corner Variants
Top
Bottom
Left
Right
TL
TR
Component States
Default
Hover
Active
Success
Error
Spacing
4xs
2
3xs
4
2xs
8
xs
12
sm
16
md
24
lg
32
xl
48
Effects
Drop Shadows
SM
blur: 2
MD
blur: 6
LG
blur: 15
XL
blur: 25
2XL
blur: 50
Layer Blur
Blur: 0
Blur: 2
Blur: 4
Blur: 8
Blur: 16
Backdrop Blur
0px
4px
8px
12px
Inner Shadows
Light
Medium
Strong
Deep
Border Weights
1px
2px
3px
4px