The Verge
Dark · Generated 18/04/2026 · theverge.com · Tech & Culture
v1.0.0
Color Palette
Background Colors
Black
#000000
Dark Gray
#131313
Dark Gray 6
#222222
Dark Gray 4
#2D2D2D
Dark Gray 2
#313131
Cyan (Brand)
#3CFFD0
Blue
#5200FF
Green
#468254
Blue 2
#3860BE
White
#FFFFFF
White 2
#F7F5FE
Light Pink
rgba(255,194,231,.9)
Yellow
rgba(214,243,31,.9)
Red
rgba(255,61,0,.9)
Text Colors
Mid Gray
#949494
Cyan 2
#309875
Light Gray
#E9E9E9
Dark Gray 3
#555555
Mid Gray 2
#696969
Light Gray 2
#EFEFEF
Light Gray 3
#BDBDBD
Border Colors
Cyan 3
#32AE88
Light Gray 6
#C1C1C1
Light Gray 7
#D8D8D8
Mid Gray 5
#707070
Light Gray 8
#BBBBBB
Light Gray 9
#E2E2E2
Shadow & Fill Colors
Light Gray 5
#C7C5C7
Mid Gray 3
#808080
Mid Gray 4
#999999
Dark Blue
#2E3644
Typography
Manuka (Impact fallback) · Display / Headlines
THE VERGE
BREAKING: AI TAKES OVER · TECH NEWS TODAY
Black · 900
FK Roman Standard (DM Serif fallback) · Editorial Body
The Future of Everything
Technology is reshaping how we live, work, and play. The Verge covers the intersection of technology, science, art, and culture.
Regular · 400
PolySans (Manrope fallback) · UI Sans
PolySans
The internet's homepage for all things tech. Reviews, news, and analysis about the future.
Light · 300 Regular · 400 Medium · 500 Semibold · 600 Bold · 700
PolySans Mono (Courier New fallback) · Code / Data
POLYSANS MONO
const verge = await fetchArticle({ topic: 'AI', limit: 10 })
Regular · 400
VERGE
Display Mega · 107px · Manuka/Black · line-height: 85.6px · tracking: 0.96px
AI & THE FUTURE
Display Hero · 65px · Manuka/Black · line-height: 52px
The next generation of computing
Editorial Headline · 40px · FK Roman/Regular · line-height: 35.2px
Apple Vision Pro Review
Article Title · 28px · PolySans/Bold · line-height: 32px · tracking: 0.28px
The world's most advanced mixed reality headset is here, and it changes everything you know about screens, space, and computing.
Body Large · 18px · PolySans/Regular · line-height: 27.2px
Yesterday's announcement marks a pivotal moment for the industry as analysts weigh in on the implications.
Body Default · 14px · PolySans/Regular · line-height: 22.8px
REVIEWS · SCIENCE · ENTERTAINMENT · TECH
Section Label · 12px · PolySans/Semibold · line-height: 19.2px · tracking: 1.2px
Line Heights
Tight
9.9px
Snug
11px
Normal
12px
Relaxed
13px
Loose
14px
LH-6
15px
LH-8
16.5px
LH-9
17.6px
LH-10
19.2px
LH-12
20.8px
LH-14
22.8px
LH-15
24px
LH-17
25.6px
LH-18
27.2px
LH-19
28px
LH-20
32px
LH-21
35.2px
LH-22
52px
LH-23
85.6px
Letter Spacing — Mostly Positive (wide tracking)
HEADLINE
Tight
−0.16px · display text only
SECTION
LS-9
+0.96px · UI labels, nav
REVIEWS
LS-13
+1.2px · category labels
BREAKING
LS-17
+1.9px · widest · alerts
Spacing
Spacing Scale
Token scale — 2px → 266.5px (editorial-scale jumps)
2
3
4
5
6
7
8
10
12
14
16
21
24
25
30
35
40
48
50
60
65
67
70
75
80
100
150
155
266
Borders
Border Radii
SM
1px
MD
2px
LG
3px
XL
4px
2XL
10px
Full
17px
R7
20px
R8
24px
R9
30px
R10
50%
R11
50px
Border Widths
Hairline
1px
Thin
8px · accent bar
Base
12px · hero accent
The Verge uses unusually thick borders (8px, 12px) as structural design elements — the distinctive cyan bottom accent bar on article cards uses border-width-thin, and the hero/featured story uses border-width-base.
Shadow / Elevation
Shadow Tokens — Inset Bottom-Border Pattern
5 inset-shadow tokens + 1 standard drop shadow. Verge uses bottom-border inset shadows as the primary decorative technique.
Transparent
--shadow-sm
Transparent inset · inactive/placeholder state
Cyan Underline
--shadow-md
rgb(60,255,208) −1px inset · brand cyan bottom border · article cards, interactive elements
Black Underline
--shadow-lg
rgb(0,0,0) −1px inset · black bottom border · dividers
Empty Inset
--shadow-xl
Zero-size transparent inset · reset state
White Underline
--shadow-shadow-5
rgb(255,255,255) −1px inset · light mode elements
Drop Shadow
--shadow-shadow-6
rgba(0,0,0,.4) 4px 10px · standard drop shadow for floating UI elements
Z-Index
TokenValueUsage
--z-1-1Background decorations, canvas elements
--z-21Base content layer
--z-32Slightly elevated elements
--z-43Active interactive elements
--z-59Minor overlays
--z-610Sticky navigation, floating UI
--z-750Drawers, sidebars
--z-8100Modals, dialogs
--z-9900High-priority overlays
--z-1010900Critical overlays (ads, paywalls)
--z-1111000Above paywalls
--z-122147483645Near-max: browser chrome proximity
--z-132147483646Near-max − 1: emergency overlays
--z-142147483647MAX INT32: absolute highest layer (cookie banners, critical alerts)
Breakpoints
📱
--breakpoint-xs
320px
Minimum mobile width
📱
--breakpoint-sm
400px
Small mobile
📱
--breakpoint-md
425px
Mobile (lower)
📱
--breakpoint-lg
426px
Mobile (upper)
📱
--breakpoint-xl
530px
Large mobile
📲
--breakpoint-2xl
549px
Phablet lower edge
📲
--breakpoint-3xl
550px
Phablet
📲
--breakpoint-bp-8
600px
Small tablet
📲
--breakpoint-bp-9
605px
Small tablet +
💻
--breakpoint-bp-10
620px
Wide phablet
💻
--breakpoint-bp-11
768px
Tablet (lower)
💻
--breakpoint-bp-12
769px
Tablet (upper)
💻
--breakpoint-bp-13
890px
Large tablet
💻
--breakpoint-bp-16
900px
Small desktop
🖥️
--breakpoint-bp-19
1024px
Desktop
🖥️
--breakpoint-bp-21
1180px
Wide desktop
🖥️
--breakpoint-bp-23
1200px
Wide screen
🖥️
--breakpoint-bp-24
1280px
Large desktop
📺
--breakpoint-bp-25
1300px
Ultra-wide
The Verge defines 25 breakpoints — by far the most granular in this series. Several consecutive pairs differ by only 1–2px (e.g. 425/426, 549/550, 768/769, 896/897, 900/901, 1179/1180, 1180/1181) serving as precise media query boundaries rather than semantic layout tiers.
Opacity
Opacity Tokens
2 tokens — 20% and 80%
--opacity-20
20% · overlay dimming
--opacity-80
80% · semi-opaque surfaces
The Verge keeps its opacity scale minimal — only 2 tokens. Most alpha values are embedded directly into color tokens (e.g. rgba(255,194,231,0.9), rgba(39,39,39,0.95)), with --opacity-80 used 85× for surface overlays.
Accessibility — Contrast Ratios
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text TokenBackground TokenRatioRating
Mid GrayBlack6.92:1AA
Mid GrayWhite3.03:1AA Large
Mid GrayDark Gray6.13:1AA
Mid GrayCyan2.37:1Fail
Mid GrayBlue2.47:1Fail
Cyan 2Black5.87:1AA
Cyan 2White3.58:1AA Large
Cyan 2Dark Gray5.2:1AA
Cyan 2Cyan2.79:1Fail
Light GrayBlack17.3:1AAA
Light GrayDark Gray15.3:1AAA
Light GrayBlue6.17:1AA
Dark Gray 3White7.46:1AAA
Dark Gray 3Cyan5.82:1AA
Mid Gray 2White5.49:1AA
Mid Gray 2Cyan4.29:1AA Large
CSS Variables Reference
Background & Brand Colors
Black--color-black#000000
Dark Gray--color-dark-gray#131313
Dark Gray 6--color-dark-gray-6#222222
Dark Gray 4--color-dark-gray-4#2D2D2D
Dark Gray 2--color-dark-gray-2#313131
Cyan (Brand)--color-cyan#3CFFD0
Cyan 2--color-cyan-2#309875
Cyan 3 (border)--color-cyan-3#32AE88
Blue--color-blue#5200FF
Blue 2--color-blue-2#3860BE
Green--color-green#468254
White--color-white#FFFFFF
White 2--color-white-2#F7F5FE
Light Pink--color-light-pinkrgba(255,194,231,.9)
Yellow--color-yellowrgba(214,243,31,.9)
Red--color-redrgba(255,61,0,.9)
Text, Border & Shadow Colors
Mid Gray--color-mid-gray#949494
Light Gray--color-light-gray#E9E9E9
Dark Gray 3--color-dark-gray-3#555555
Mid Gray 2--color-mid-gray-2#696969
Light Gray 2--color-light-gray-2#EFEFEF
Light Gray 3--color-light-gray-3#BDBDBD
Light Gray 6 (border)--color-light-gray-6#C1C1C1
Light Gray 7 (border)--color-light-gray-7#D8D8D8
Light Gray 9 (border)--color-light-gray-9#E2E2E2
Light Gray 5 (shadow)--color-light-gray-5#C7C5C7
Mid Gray 3 (shadow)--color-mid-gray-3#808080
Dark Blue (fill)--color-dark-blue#2E3644
Typography
UI Sans--font-family-baseui-sans-serif
PolySans Mono--font-family-2__polySansMono
PolySans--font-family-3__polySans
Manuka (display)--font-family-4__manuka
FK Roman (editorial)--font-family-5__fkRomanStandard
Light--font-weight-light300
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
Black--font-weight-black900
9px--font-size-2xs9px
12px--font-size-base12px
14px--font-size-3xl14px
16px--font-size-16px16px
20px--font-size-20px20px
28px--font-size-28px28px
40px--font-size-40px40px
65px--font-size-65px65px
107px (display)--font-size-107px107px
Tight--letter-spacing-tight−0.16px
Normal--letter-spacing-normal+0.13px
LS-9--letter-spacing-ls-9+0.96px
LS-13--letter-spacing-ls-13+1.2px
LS-17 (widest)--letter-spacing-ls-17+1.9px
Spacing, Borders, Motion & Layers
Space 1--space-12px
Space 3--space-34px
Space 8--space-88px
Space 10--space-1010px
Space 12--space-1212px
Space 20--space-2016px
Space 48--space-4824px
Space 128--space-12840px
Space 256--space-25660px
Space 27--space-2780px
Space 28--space-28100px
Hairline--border-width-hairline1px
Thin (accent bar)--border-width-thin8px
Base (hero bar)--border-width-base12px
LG--radius-lg3px
2XL--radius-2xl10px
R7--radius-r720px
R10--radius-r1050%
Instant--duration-instant0.1s
Fast--duration-fast0.15s
Normal--duration-normal0.2s
Slow--duration-slow0.25s
D7--duration-duration-70.5s
Ease In (primary)--easing-ease-inease-in
20%--opacity-200.2
80%--opacity-800.8
Background--z-1-1
Base--z-21
Nav--z-610
Modal--z-8100
Overlay--z-9900
Paywall--z-1010900
MAX INT32--z-142147483647
Design System Preview · The Verge (Dark) · Generated 18/04/2026