Meta
Design System · Generated 15/04/2026 · 16 colors · 32 type tokens · 34 spacing steps · 218 breakpoints · 6 motion tokens
April 2026
Color Palette
Background Colors
Black
#000000
White
#FFFFFF
Blue 3
#0457CB
Blue 4
#0064E0
Dark Blue 2
rgba(10,19,23,.12)
White 2
#F8F9FB
Text Colors
Dark Gray
#1C1E21
Blue
#5D6C7B
Dark Gray 2
#0A1317
Dark Blue
#1C2B33
Blue 2
#385898
Light Gray
#DADDE1
Dark Blue 3
#465A69
Blue 5
#768591
Border Colors
White 3
rgba(248,249,251,.2)
Light Gray 2
#CBD2D9
Brand Gradient
Brand Blue
#0457CB → #0064E0
Typography
Primary Display · Optimistic VF / Display Medium
Optimistic
Connecting people and building products that bring the world closer together through technology.
Regular · 400 Medium · 500 Bold · 700
Fallback · Helvetica / Times (Serif)
Times
Building the metaverse — AR, VR, and the future of connection.
Helvetica Times (Serif)
Connecting the world
Display XL · 48px · Bold · line-height: 57.6px · letter-spacing: −0.48px
The metaverse awaits
Heading Large · 36px · Bold · line-height: 43.2px · letter-spacing: −0.36px
Augmented and virtual reality technologies are shaping the next computing platform.
Body Large · 18px · Medium · line-height: 27px · letter-spacing: −0.16px
Our apps help more than 3.9 billion people around the world connect, share, discover, and communicate.
Body Default · 16px · Regular · line-height: 24px · letter-spacing: −0.14px
Last updated 3 minutes ago · Meta Platforms, Inc. · Menlo Park, CA
Body Small · 14px · Regular · line-height: 21.6px · letter-spacing: +0.08px
CONNECT · SHARE · BUILD
Label · 12px · Bold · uppercase · letter-spacing: +0.576px
Line Heights
Tight
16.08px
Snug
20px
Normal
21.6px
Relaxed
24px
Loose
27px
Spacious
39.6px
Open
43.2px
Heading
52.8px
Display
57.6px
Letter Spacing
Meta
Tight
−0.48px · hero display
Connect
Normal
−0.36px · headings
Build
Widest
+0.08px · body text
SHARE
LS-8
+0.576px · labels
Spacing
Spacing Scale
34 tokens — 2px → 470px (includes computed layout values)
2
3
4
5
8
10
11
12
15
16
20
32
36
40
45
48
56
64
72
80
96
120
123
136
160
470
Borders
Border Radii
sm
24px
md
32px
lg / Circle
50%
xl / Pill
100px
Border Widths
Hairline
1px · ×22 · Cards, inputs, dividers
Thin
2px · ×4 · Emphasis borders, focus rings
Meta uses very large radii — notably, the system defaults to pill shapes (100px) and circles (50%) rather than the subtle corner rounding common in other design systems. This reflects the rounded aesthetic across Meta's product surfaces.
Shadow / Elevation
—
No shadow tokens detected
The Meta design system token extractor found no structured shadow tokens on this page. Elevation is achieved through background color layering, the dark-on-black surface system, and explicit rgba overlay values defined in the CSS custom properties layer (e.g. --shadow-elevated, --shadow-persistent from the root properties layer).
Layer 1
rgba(255,255,255,.04)
Layer 2
rgba(255,255,255,.08)
Layer 3
rgba(255,255,255,.12)
Z-Index
LayerValueUsage
z-1 (Behind)-1Background canvas layers, decorative elements behind content
z-2 (Base)1Default elevated layer above static page flow
z-3 (Raised)2Slightly raised interactive elements, stacked cards
z-4 (Overlay)400Sticky navigation, modals, overlays, floating UI elements
Breakpoints
218 breakpoints extracted — from 70px (very small screen) to 9999px (sentinel max). This reflects Meta's React Native Web + atomic CSS approach where each component defines its own pixel-perfect responsive rules. A representative sample of key breakpoints is shown below.
XS
70px
SM
240px
MD
320px
LG
375px
XL
390px
428
428px
480
480px
540
540px
600
600px
700
700px
768
768px
800
800px
900
900px
960
960px
1024
1024px
1100
1100px
1200
1200px
1280
1280px
1440
1440px
1600
1600px
1920
1920px
2048
2048px
2300
2300px
MAX
9999px
The 218 total breakpoints span 70px → 9999px, with clusters around device-specific sizes (375px iPhone SE, 390px iPhone 14, 428px iPhone 14 Pro Max, 768px iPad, 1024px iPad Pro). The ultra-high range (2142px, 2243px, 2604px) targets large-format VR/XR displays — consistent with Meta's focus on immersive technologies.
Opacity
Opacity Scale
2 tokens — 0.40 · 0.50
Dim
40% · ×4
Half
50% · ×4
Meta defines 2 structured opacity tokens. Additional transparency throughout the system is expressed via rgba color values — e.g. rgba(0,0,0,.05) for hover overlays, rgba(0,0,0,.6) for modal overlays.
Accessibility
WCAG 2.1 thresholds: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text ColorBackground ColorRatioWCAG Rating
Dark Gray (#1C1E21)Black (#000000)1.26:1Fail
Dark Gray (#1C1E21)White (#FFFFFF)16.71:1AAA
Dark Gray (#1C1E21)Blue 3 (#0457CB)2.57:1Fail
Dark Gray (#1C1E21)Blue 4 (#0064E0)3.1:1AA Large
Blue (#5D6C7B)Black (#000000)3.9:1AA Large
Blue (#5D6C7B)White (#FFFFFF)5.39:1AA
Blue (#5D6C7B)Blue 3 (#0457CB)1.21:1Fail
Blue (#5D6C7B)Blue 4 (#0064E0)1:1Fail
Dark Gray 2 (#0A1317)White (#FFFFFF)18.78:1AAA
Dark Blue (#1C2B33)White (#FFFFFF)14.56:1AAA
Dark Blue (#1C2B33)Black (#000000)1.44:1Fail
Blue 2 (#385898)White (#FFFFFF)6.96:1AA
Blue 2 (#385898)Black (#000000)3.02:1AA Large
Blue 2 (#385898)Blue 3 (#0457CB)1.07:1Fail
Blue 2 (#385898)Blue 4 (#0064E0)1.29:1Fail
CSS Variables Reference
Background Colors6 tokens
Black--color-black#000000
White--color-white#FFFFFF
White 2--color-white-2#F8F9FB
Blue 3--color-blue-3#0457CB
Blue 4 (Brand)--color-blue-4#0064E0
Dark Blue 2--color-dark-blue-2rgba(10,19,23,.12)
Text & Border Colors10 tokens
Dark Gray--color-dark-gray#1C1E21
Dark Gray 2--color-dark-gray-2#0A1317
Dark Blue--color-dark-blue#1C2B33
Blue 2--color-blue-2#385898
Blue (Muted)--color-blue#5D6C7B
Dark Blue 3--color-dark-blue-3#465A69
Blue 5--color-blue-5#768591
Light Gray--color-light-gray#DADDE1
Light Gray 2 (Border)--color-light-gray-2#CBD2D9
White 3 (Border)--color-white-3rgba(248,249,251,.2)
Typography32 tokens
Optimistic VF / Display--font-family-3Optimistic VF
Optimistic Text--font-family-4Optimistic Text
Helvetica (Fallback)--font-family-2Helvetica
Times (Serif)--font-family-baseTimes
Regular--font-weight-regular400
Medium--font-weight-medium500
Bold--font-weight-bold700
2xs (Caption)--font-size-2xs12px
xs (Small body)--font-size-xs14px
sm (Body)--font-size-sm16px
base (Large body)--font-size-base18px
lg (Heading)--font-size-lg36px
xl (Display)--font-size-xl48px
Tight--letter-spacing-tight−0.48px
Normal--letter-spacing-normal−0.36px
Wide--letter-spacing-wide−0.16px
Wider--letter-spacing-wider−0.14px
Widest--letter-spacing-widest+0.08px
LS-7--letter-spacing-ls-7+0.36px
LS-8--letter-spacing-ls-8+0.576px
Spacing34 tokens
Space 1--space-12px
Space 2--space-23px
Space 3--space-34px
Space 5 (SM)--space-58px
Space 6--space-610px
Space 10--space-1012px
Space 16 (MD)--space-1616px
Space 20--space-2020px
Space 40--space-4032px
Space 48--space-4836px
Space 96--space-9648px
Space 128--space-12856px
Space 160--space-16064px
Space 192 (LG)--space-19272px
Space 24--space-2480px
Space 25--space-2596px
Space 26--space-26120px
Space 29--space-29160px
Space 32 (Max)--space-32191px
Borders & Radius6 tokens
Hairline--border-width-hairline1px
Thin--border-width-thin2px
sm--radius-sm24px
md--radius-md32px
lg / Circle--radius-lg50%
xl / Pill--radius-xl100px
Motion, Opacity & Layers12 tokens
Instant--duration-instant0.15s · ×1
Fast--duration-fast0.2s · ×17
Normal--duration-normal0.3s · ×16
Slow--duration-slow0.333s · ×36
Ease In/Out--easing-ease-in-outease-in-out · ×16
Ease Out--easing-ease-outease-out · ×9
Dim 40%--opacity-400.4
Half 50%--opacity-500.5
Behind--z-1-1
Base--z-21
Raised--z-32
Overlay (nav/modal)--z-4400
Meta Design System · Generated 15/04/2026 · 16 color tokens · 32 type tokens · 34 spacing steps · 4 border radii · 2 border widths · 0 shadows (layer-based elevation) · 4 durations · 2 easing functions · 4 z-index layers · 218 breakpoints · 2 opacity tokens