YouTube design system

YouTube at a glance

A content-first, almost colourless frame. White page (near-black #0F0F0F in dark), one font (Roboto), grey 5% "washes" for every chip and button, and only two strong colours: the red of the logo and progress bar, and the blue of links. The pictures (thumbnails) carry all the colour. Hovers fade in over 0.45 s; presses answer in 40 ms.

What you notice first

Left: the redacted original (our own screenshot of youtube.com; every picture covered, creator text blurred, because we never copy real thumbnails or faces). Right: our copy, built only from this design system. The copies work: open one to switch chips, play the video, like, subscribe, comment, search and swipe Shorts. The Dark theme button at the top also switches every copy here.

How to read the scores. "All pixels" counts every pixel within 24 of 255 per colour against the real (private) screenshot. Our copies use stand-in pictures, so the big picture areas can never match. "UI only" covers the pictures in both and scores only the frame, text and controls. "Edges" counts only text, icon and line pixels; it drops fast when words differ, and every word under a picture is made up on purpose. All six copies in one place: YouTube screens.

A small working YouTube built only from this design system. Pick a chip to re-sort the feed, point at a card, open the ⋮ menu, click a card to watch it (play / pause, seek, like, subscribe, save with Undo), search, and go back. It follows the page's light/dark switch. For the full-size copies see the six screens.

YouTube names its colours by job, not by hue: --yt-sys-color-baseline--text-primary, --additive-background, --call-to-action. In 2026 these replaced the old --yt-spec-* names. The tables are read live from our token file, in both themes at once.

The roles you will use real

Every YouTube colour token (203) real

Each square is split: left half light, right half dark. Click a row to copy the token name. Many tokens are for the keyboard, live chat or Premium add-ons and never show on the screens we copied.

One family: Roboto (free, open licence) in 400, 500 and 700. YouTube's type tokens come in families (body, title, headline, action, display) with sizes from 10 to 64 px; the screens use only a handful. The player asks for "YouTube Noto" and big display text for "YouTube Sans"; neither is openly licensed, so Roboto stands in.

YouTube writes sizes in rem on a 10 px root (html font-size 62.5%): 1.4rem = 14 px. The stack is Roboto, Arial, sans-serif real. Text is drawn with grey (not colour) antialiasing because the page lives on GPU layers measured.

The real drawings YouTube puts inline on its pages: a 24 px outline set for the frame and buttons, a filled version when chosen (Home, Shorts), 12–18 px versions for metadata, and the player's own set (36-unit grid). Click any icon to copy its name; Copy SVG copies the drawing. Study use only.

Round, but not bubbly: 4 px badges, 8 px chips, 10 px guide rows, 12 px thumbnails and menus, full pills for buttons and player controls. Space follows a 4 px grid (YouTube's own --ytd-margin-*x steps) and its --yt-sys-measurement--* tokens.

Space steps real

Heights and sizes real

YouTube is almost flat. Only menus and the round shelf arrows float. Instead of shadows it uses frosted glass: the top bar is 90% white with a 48 px blur, and the player pills are 30% black with a 16 px blur.

Live and clickable, drawn with the real kit classes in youtube.css. Point, click and use the keyboard. Copy for Figma on each part copies it as an SVG: paste it into Figma and it becomes editable shapes and text.

One rule for every control: a grey wash on hover (5% → 10% on tonal parts), a stronger one when pressed (20%), a 2 px outline in the text colour for keyboard focus, and black (or white in dark) when chosen. Each state is frozen below so you can compare them without pointing.

Motion real

YouTube eases in slowly and answers presses fast. Press Play to see each one at its real speed.

Motion tokens

With "reduce motion" switched on in the computer's settings, the kit turns every transition off.

YouTube's Dark theme is real and complete: every token has a dark value, read live after switching YouTube's own Appearance menu. The page is #0F0F0F (not pure black), text #F1F1F1, muted #AAAAAA, washes turn white (10% / 20%), links turn light blue, and the watch page adds Ambient mode: a soft glow in the video's colours behind the player.

What is real and what is ours

Signed out, YouTube's Appearance menu offers only Light and Dark ("applies to this browser only"). Switching your computer to dark did not change it.

Checked against YouTube's own screens. The small label after each rule names the Law of UX behind it; click it to jump there. A red bullet marks a place where YouTube itself falls short.

The rules behind YouTube's feel, and why they matter for a sales tool too. All 29 laws are checked one by one in the scorecard below.

Each pair is measured live from the token file, in both themes at once. Text needs 4.5:1 (big text 3:1). Icons and outlines need 3:1.

Accessibility checklist

Tick as you check a screen. Your ticks are saved in this browser.

All 29 laws from lawsofux.com, each checked against YouTube's real screens. Every card says what the law means in plain words, what YouTube really does, and what AltLeads should take from it. Click a coloured bar to jump to a law, or filter by result.

AltLeads is a sales CRM: a caller works through a feed of leads, filters it, tracks progress and gets "what next" suggestions. That is YouTube's home page, player and up-next, for sales.

Add these files to any HTML page, then use the classes. Put yt-dark on <html> for the Dark theme (or yt-dark-scope on one part). Icons: <svg data-i="like"> is filled in by the kit.

<link rel="stylesheet" href="youtube/youtube-tokens.css">  <!-- 203 real colours light + dark, type, sizes, motion -->
<link rel="stylesheet" href="youtube/youtube.css">         <!-- parts: yt-chip, yt-btn, yt-lockup, yt-player ... -->
<body class="yt-root">
<script src="youtube/youtube-icons.js"></script>           <!-- 76 real YouTube icons + the logo -->
<script src="youtube/youtube-kit.js"></script>             <!-- YT.svg, YT.ph, YT.av, YT.tips, YT.toast, YT.menu -->

<button class="yt-chip" aria-pressed="true">All</button>
<button class="yt-btn m filled">Subscribe</button>
<button class="yt-btn m tonal"><svg data-i="share"></svg>Share</button>
<button class="yt-ib" aria-label="More actions" data-tip="More actions"><svg data-i="more_vert"></svg></button>

<script>
  YT.tips(document);                                          // grey tooltips for every [data-tip]
  YT.toast('Saved to Watch later', 'Undo', undoFn);            // bottom-left toast
  YT.menu(button, [{ label: 'Save to playlist', icon: 'save', run: fn }, '-', { label: 'Report', icon: 'flag' }]);
  el.innerHTML = YT.ph('any-seed');                            // a stand-in picture (never a real thumbnail)
</script>

Everything came from youtube.com, signed out, 14 Oct 2026, in a fresh throwaway browser profile (deleted after). No sign-in, no bot check, no cookie notice in our region. Full notes: inspiration/youtube/NOTES.md.

Honest gaps

• Signed out only: no signed-in top bar (avatar, Create, notifications), no subscriptions feed, no Studio, no real comment posting.
• Pictures are stand-ins, so "all pixels" scores stay low; read the "UI only" scores for how well the frame matches.
• The tooltip, the "Subscribed" button and the share dialog were not captured live; they follow YouTube's CSS defaults and are marked est.
• Ambient mode's glow is drawn by YouTube from the real video; ours blurs the stand-in picture, so its colours differ.
• Shorts showed two layouts (details inside the video, or to its left). Both are copied; we do not know which one is the default.
• No phone (mobile web, m.youtube.com) or TV layouts were collected.