Color Palette
Background Colors
Orange
rgba(201,105,69,.13)
Shadow Colors
No shadow color tokens detected. Shadow values are defined inline using rgba(0,0,0,…) directly within the shadow tokens.
Typography
Primary Font · Roboto
Roboto
Watch, like, share, subscribe — the world's largest video platform.
Regular · 400
Medium · 500
Bold · 700
Fallbacks · Arial / YouTube Noto
Arial & Noto
YouTube Noto provides CJK and multilingual script support across the platform.
Arial · Regular
Arial · Bold
Trending on YouTube
20px · Bold · lh: 40px
Music · Gaming · News · Sports
18px · Bold · lh: 36px
Recommended for you
16px · Medium · lh: 26px
How to build a design system from scratch
14px · Medium · lh: 22px
Google Design · 1.2M views · 3 days ago
13px · Regular · lh: 18px
Subscribe for the latest design updates and tutorials
12px · Regular · lh: 18px
SHORTS · LIVE · COMMUNITY
11px · Medium · uppercase · lh: 14px · ls: 0.5px
Letter Spacing
Subscribe
--letter-spacing-tight
0.35px · buttons, labels
TRENDING NOW
--letter-spacing-normal
0.5px · uppercase chip labels
Spacing
Spacing Scale
26 tokens — 1px → 284.695px
Borders
Border Widths
--border-width-hairline
1px · ×762
--border-width-thin
2px · ×12
--border-width-base
3px · ×36
--border-width-thick
6px · ×32 — progress bar, active nav indicator
Shadow / Elevation
Shadow Tokens
4 tokens — from subtle inset to layered drop shadow
--shadow-sm
×1
Layered 2px/3px drops — buttons, dialogs, notification cards
--shadow-md
×1
Inset 1px light gray — search input underline, chip depth
--shadow-lg
×1
Soft 2px drop — thumbnail hover, chip active state
--shadow-xl
×1
Material 3-layer — FAB, raised action buttons
Z-Index
| Layer | Value | Usage |
|---|
| --z-1 | -1 | Background decorations |
| --z-2 | 1 | Base content layer |
| --z-3 | 2 | Slightly elevated content |
| --z-4 | 10 | Sticky elements, navigation |
| --z-5 – --z-35 | 15 – 75 | Mid-level UI layers: tooltips (25), menus (28–35), panels (37–60), headers (67–75) |
| --z-36 | 82 | Elevated floating UI |
| --z-37 | 100 | Fixed banners, persistent overlays |
| --z-38 | 300 | Notification toasts |
| --z-39 | 600 | Video player controls overlay |
| --z-40 – --z-51 | 1001 – 2031 | Modals, dialogs, search suggestions, casting UI (2000+) |
| --z-52 – --z-54 | 2100 – 2300 | Maximum UI layer: critical alerts, fullscreen overlays |
54 z-index tokens total. YouTube's granular stacking context reflects a complex SPA architecture with concurrent overlapping UI surfaces — player, sidebar, modals, and casting panels each maintain independent stacking domains.
Breakpoints
Responsive Breakpoints
109 tokens — 250px → 2244px · showing a representative subset of key layout thresholds
--breakpoint-bp-101
1439px
--breakpoint-bp-105
1600px
--breakpoint-bp-107
1720px
--breakpoint-bp-108
2200px
--breakpoint-bp-109
2244px
Showing 24 representative breakpoints. Full system contains 109 tokens (250px–2244px) reflecting YouTube's pixel-perfect responsive layout across every device category, including ultra-wide displays.
Opacity
Opacity Tokens
7 tokens — 0.3 → 0.9
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Token | Background Token | Ratio | WCAG Rating |
|---|
| --color-dark-gray-2 | --color-black | 3.34:1 | AA Large |
| --color-dark-gray-2 | --color-dark-gray | 3.05:1 | AA Large |
| --color-dark-gray-2 | --color-light-gray | 5.42:1 | AA |
| --color-dark-gray-2 | --color-white | 6.29:1 | AA |
| --color-dark-gray-2 | --color-dark-gray-3 | 1.02:1 | Fail |
| --color-blue | --color-black | 2.23:1 | Fail |
| --color-blue | --color-dark-gray | 2.04:1 | Fail |
| --color-blue | --color-light-gray | 8.10:1 | AAA |
| --color-blue | --color-white | 9.40:1 | AAA |
| --color-blue | --color-dark-gray-3 | 1.52:1 | Fail |
| --color-dark-green | --color-black | 3.58:1 | AA Large |
| --color-dark-green | --color-dark-gray | 3.27:1 | AA Large |
| --color-dark-green | --color-light-gray | 5.06:1 | AA |
| --color-dark-green | --color-white | 5.87:1 | AA |
| --color-dark-green | --color-dark-gray-3 | 1.06:1 | Fail |
| --color-blue-2 | --color-black | 3.60:1 | AA Large |
| --color-blue-2 | --color-dark-gray | 3.28:1 | AA Large |
| --color-blue-2 | --color-light-gray | 5.03:1 | AA |
| --color-blue-2 | --color-white | 5.84:1 | AA |
| --color-blue-2 | --color-dark-gray-3 | 1.06:1 | Fail |
| --color-light-gray-4 | --color-black | 15.46:1 | AAA |
| --color-light-gray-4 | --color-dark-gray | 14.11:1 | AAA |
| --color-light-gray-4 | --color-light-gray | 1.17:1 | Fail |
| --color-light-gray-4 | --color-white | 1.36:1 | Fail |
| --color-light-gray-4 | --color-dark-gray-3 | 4.56:1 | AA |
CSS Variables Reference
Black--color-black#000000
Dark Gray--color-dark-gray#0F0F0F
Light Gray--color-light-gray#EEEEEE
White--color-white#FFFFFF
Dark Gray 3--color-dark-gray-3#616161
Light Gray 2--color-light-gray-2#E3E3E3
Red 2--color-red-2#E1002D
Light Gray 3--color-light-gray-3#EFEFEF
Mid Gray 3--color-mid-gray-3#909090
White 2--color-white-2#F8F8F8
Blue 5--color-blue-5#3EA6FF
Red 9--color-red-9#CC0000
Dark Gray 4 (fill)--color-dark-gray-4#212121
Dark Gray 2 (text)--color-dark-gray-2#606060
Blue (text)--color-blue#0000EE
Dark Green (text)--color-dark-green#107516
Blue 2 (text)--color-blue-2#065FD4
Light Gray 4 (text)--color-light-gray-4#DDDDDD
Light Gray 5 (text)--color-light-gray-5#B8B8B8
Mid Gray 2 (text)--color-mid-gray-2#999999
Light Gray 7 (border)--color-light-gray-7#D3D3D3
Mid Gray (fill)--color-mid-gray#AAAAAA
Red 7 (fill)--color-red-7#FF2791
Mid Gray 4 (fill)--color-mid-gray-4#717171
Light Gray 6 (fill)--color-light-gray-6#EAEAEA
Roboto--font-family-baseRoboto
Arial--font-family-2Arial
YouTube Noto--font-family-3YouTube Noto
Regular--font-weight-regular400
Medium--font-weight-medium500
Bold--font-weight-bold700
xs--font-size-xs10px
sm--font-size-sm11px
base--font-size-base11.7px
lg / xl--font-size-lg / xl12px / 13px
14px--font-size-14px14px
16px--font-size-16px16px
18px--font-size-18px18px
20px--font-size-20px20px
tight--line-height-tight12px
snug--line-height-snug14px
normal--line-height-normal15px
loose--line-height-loose18px
lh-6 – lh-15--line-height-lh-6…1520px – 56px
tight ls--letter-spacing-tight0.35px
normal ls--letter-spacing-normal0.5px
Space 1--space-11px · ×38
Space 2--space-22px · ×126
Space 3--space-34px · ×184
Space 5--space-58px · ×202
Space 8--space-812px · ×237
Space 16--space-1616px · ×49
Space 32--space-3232px · ×24
Space 48--space-4836px · ×10
Space 64--space-6440px · ×7
Space 80--space-8048px · ×2
Space 23--space-2372px · ×2
Space 24--space-24120px · ×2
Space 25--space-25177.93px · ×6
Space 26--space-26183.93px · ×21
Space 27--space-27284.695px · ×10
Hairline--border-width-hairline1px · ×762
Thin--border-width-thin2px · ×12
Base--border-width-base3px · ×36
Thick--border-width-thick6px · ×32
sm (right-pill)--radius-sm0 40 40 0
md (bottom-round)--radius-md0 0 12 12
full--radius-full4px · ×181
r10--radius-r108px · ×175
r12--radius-r1212px · ×201
r14--radius-r1416px · ×215
r15--radius-r1518px · ×246
r23 · Pill--radius-r2340px · ×4
r24 · Circle--radius-r2450% · ×277
r25--radius-r25100px · ×1
Motion · 11 tokens
Instant--duration-instant0.08s · ×2
Fast--duration-fast0.1s · ×90
Normal--duration-normal0.15s · ×1
Slow--duration-slow0.2s · ×35
Slower--duration-slower0.25s · ×42
d-6--duration-duration-60.28s · ×32
d-7--duration-duration-70.3s · ×288
d-8--duration-duration-80.33s · ×7
d-9--duration-duration-90.5s · ×2
Ease In Out--easing-ease-in-outease-in-out
Ease In--easing-ease-inease-in
Opacity · 7 tokens
Shadows · 4 tokens
sm (layered)--shadow-sm2px/3px drop
md (inset)--shadow-md#eee 1px inset
lg (soft)--shadow-lg2px drop
xl (material)--shadow-xl3-layer drop
Z-Index (selected)
Below--z-1-1
Base--z-21
Navigation--z-410
Menus--z-12/1328–29
Banners--z-37100
Notifications--z-38300
Player controls--z-39600
Modals--z-40/411001–1002
Casting UI--z-43/442000–2010
Max overlay--z-542300
Design System Preview · YouTube (Light) · Generated 13/04/2026 · 45 color tokens · 17 font-size · 3 font-family · 3 font-weight · 15 line-height · 2 letter-spacing · 26 spacing · 25 radius · 4 border-width · 4 shadow · 9 duration · 2 easing · 54 z-index · 109 breakpoints · 7 opacity