video · dense · dark-default · sans · mass-market · red · material
YouTube
YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale.
By webdesignhot · www.youtube.com
$ npx design-md add youtube
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
1440 × 900
mobile · 390 × 844
Tokens design.md/v1.5
- bg
#0f0f0f - bg-deep
#000000 - bg-light
#ffffff - surface
#272727 - surface-strong
#3f3f3f - surface-soft
#1f1f1f - surface-card
transparent - surface-overlay
rgba(0,0,0,0.85) - surface-light
#f9f9f9 - text AAA · 19.2
#ffffff - text-strong
#ffffff - text-body
#ffffff - text-muted
#aaaaaa - text-soft
#717171 - text-inverse
#0f0f0f - text-disabled
#717171 - text-light
#0f0f0f - text-light-muted
#606060 - brand AA · 4.8
#ff0000 - brand-hover
#cc0000 - brand-active
#aa0000 - brand-deep
#990000 - brand-shorts
#ff0033 - on-brand
#ffffff - accent-link
#3ea6ff - accent-link-light
#065fd4 - accent-premium
#f1c21b - accent-music
#ff0033 - accent-tv
#ff0000 - accent-kids
#ff0000 - border — · 1.8
#3f3f3f - border-soft
#272727 - border-strong — · 3.0
#5e5e5e - border-light
#e5e5e5 - shadow-card
rgba(0,0,0,0.4) - shadow-modal
rgba(0,0,0,0.5) 0 8px 24px - scrim-thumb
linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 60%) - progress-watched
#ff0000 - progress-rail
rgba(255,255,255,0.2) - progress-buffer
rgba(255,255,255,0.4) - recording-dot
#ff0000 - live-badge-bg
#ff0000 - duration-badge-bg
rgba(0,0,0,0.6) - success
#0db750 - warning
#f1c21b - danger
#cc0000 - info
#3ea6ff - shorts-tab
#ff0033 - community-tab
#3ea6ff
Ship faster than ever.
brand-display "YouTube Sans" 120px w700 -0.02em
Ship faster than ever.
display-xl "YouTube Sans" 56px w700 -0.015em
Ship faster than ever.
display-lg "YouTube Sans" 40px w700 -0.01em
Ship faster than ever.
display-md "YouTube Sans" 32px w700 0
Ship faster than ever.
display-sm Roboto 24px w500 0
The quick brown fox jumps over the lazy dog.
section-title Roboto 20px w700 0
The quick brown fox jumps over the lazy dog.
video-title-large Roboto 16px w500 0
The quick brown fox jumps over the lazy dog.
body-lg Roboto 16px w400 0
The quick brown fox jumps over the lazy dog.
video-title Roboto 14px w500 0
The quick brown fox jumps over the lazy dog.
body-md Roboto 14px w400 0
The quick brown fox jumps over the lazy dog.
button-md Roboto 14px w500 0
OUR DESIGN SYSTEM
chip-label Roboto 14px w500 0
The quick brown fox jumps over the lazy dog.
nav-link Roboto 14px w400 0
The quick brown fox jumps over the lazy dog.
body-sm Roboto 13px w400 0
The quick brown fox jumps over the lazy dog.
button-sm Roboto 13px w500 0
npx design-md add linear
code "Roboto Mono" 13px w400 0
The quick brown fox jumps over the lazy dog.
metadata Roboto 12px w400 0
The quick brown fox jumps over the lazy dog.
duration-badge Roboto 12px w500 0
OUR DESIGN SYSTEM
caption Roboto 12px w400 0
The quick brown fox jumps over the lazy dog.
badge-live Roboto 11px w700 0.04em
The quick brown fox jumps over the lazy dog.
legal Roboto 11px w400 0
- step-0 4px
- step-1 8px
- step-2 12px
- step-3 16px
- step-4 20px
- step-5 24px
- step-6 32px
- step-7 40px
- step-8 48px
- step-9 64px
- step-10 80px
- step-11 96px
- step-12 128px
- step-13 160px
- micro
2px - sm
4px - md
8px - lg
12px - xl
16px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
name: YouTube
tagline: 'YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale.'
author: webdesignhot
source_url: https://www.youtube.com
spec: design.md/v1.5
quality: curated
featured: false
categories: [media]
tags: [video, dense, dark-default, sans, mass-market, red, material]
preview_swatch: ['#0f0f0f', '#ffffff', '#ff0000']
related: [netflix, tiktok, twitch]
description: 'YouTube is content-density at planetary scale. The default canvas is `#0f0f0f` near-black on the desktop dark theme (the user-default since 2023) with `#ffffff` ink, paired with the signature **YouTube Red** `#ff0000` reserved exclusively for the play-button glyph, the subscribe button, and the recording dot — three semantic uses, almost nothing else. Display runs in **YouTube Sans** (the brand-bespoke geometric sans designed by Saffron Brand Consultants in 2017) at 700 weight for the wordmark and large product surfaces, while body and 99% of UI live in **Roboto** at 14–16px — Google''s system sans, weights 400/500/700. The grid is famously dense: 4 thumbnail columns at 1280px desktop, 5 at 1600px wide, with 16:9 thumbnails plus 14px / 500 Roboto title and 12px / 400 muted metadata. Cards have **12px radius** (Material 3 default) and zero border at rest; the only chrome is the watch-progress red bar that fills along the thumbnail bottom edge as you finish videos. Subscribe is the brand''s anchor CTA — a `#ff0000` filled button with `9999px` pill radius that becomes `#272727` filled "Subscribed" after click. The system runs Material 3 motion (`cubic-bezier(0.4, 0, 0.2, 1)` with 200ms standard duration), supports both `#ffffff` light and `#0f0f0f` dark themes (with full token swap), and at scale serves over a billion users a day on a UI optimised for thumbnail recognition and click-density above all else.'
colors:
bg: '#0f0f0f' # canvas — dark theme default
bg-deep: '#000000' # video player bg, full-screen
bg-light: '#ffffff' # light theme canvas
surface: '#272727' # secondary panel, hover background
surface-strong: '#3f3f3f' # press, focused input
surface-soft: '#1f1f1f' # alt-row tint
surface-card: 'transparent' # cards do not have surface — they sit flat on bg
surface-overlay: 'rgba(0,0,0,0.85)' # menu, modal scrim
surface-light: '#f9f9f9' # light theme secondary panel
text: '#ffffff' # ink dark theme
text-strong: '#ffffff'
text-body: '#ffffff'
text-muted: '#aaaaaa' # secondary metadata dark theme
text-soft: '#717171' # tertiary
text-inverse: '#0f0f0f' # on light surfaces
text-disabled: '#717171'
text-light: '#0f0f0f' # light theme ink
text-light-muted: '#606060' # light theme secondary
brand: '#ff0000' # YouTube Red — signature
brand-hover: '#cc0000' # darken on hover
brand-active: '#aa0000' # press
brand-deep: '#990000'
brand-shorts: '#ff0033' # Shorts brand red — slightly more pink
on-brand: '#ffffff'
accent-link: '#3ea6ff' # link blue (dark theme)
accent-link-light: '#065fd4' # link blue (light theme)
accent-premium: '#f1c21b' # YouTube Premium amber
accent-music: '#ff0033' # YouTube Music red-pink
accent-tv: '#ff0000' # YouTube TV red
accent-kids: '#ff0000' # YouTube Kids red
border: '#3f3f3f' # default 1px on dark
border-soft: '#272727' # subtle alt-band
border-strong: '#5e5e5e' # focused input
border-light: '#e5e5e5' # light theme hairline
shadow-card: 'rgba(0,0,0,0.4)' # rare — most cards are flat
shadow-modal: 'rgba(0,0,0,0.5) 0 8px 24px'
scrim-thumb: 'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 60%)'
progress-watched: '#ff0000' # the iconic red watch-progress bar
progress-rail: 'rgba(255,255,255,0.2)'
progress-buffer: 'rgba(255,255,255,0.4)'
recording-dot: '#ff0000' # live-stream red dot
live-badge-bg: '#ff0000'
duration-badge-bg: 'rgba(0,0,0,0.6)' # bottom-right runtime chip
success: '#0db750'
warning: '#f1c21b'
danger: '#cc0000'
info: '#3ea6ff'
shorts-tab: '#ff0033' # Shorts vertical-feed accent
community-tab: '#3ea6ff'
typography:
display:
family: '"YouTube Sans", Roboto, Arial, sans-serif'
weights: [400, 500, 700, 900]
opentype-features: ['kern']
notes: 'YouTube Sans by Saffron Brand Consultants (2017) — geometric sans with rounded "g" and asymmetric "Y". Used on the wordmark, hero acquisition surfaces, and product brand pages. Not used in the watch UI.'
body:
family: 'Roboto, Arial, sans-serif'
weights: [400, 500, 700]
opentype-features: ['kern']
notes: 'Google Roboto — the workhorse for 99% of the UI. 14–16px body.'
mono:
family: '"Roboto Mono", "Courier New", Consolas, monospace'
weights: [400]
scale:
brand-display: { size: 120, weight: 700, lineHeight: 1.0, tracking: '-0.02em', family: display, notes: 'About-page hero — YouTube Sans' }
display-xl: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.015em',family: display }
display-lg: { size: 40, weight: 700, lineHeight: 1.1, tracking: '-0.01em', family: display }
display-md: { size: 32, weight: 700, lineHeight: 1.15, tracking: '0', family: display }
display-sm: { size: 24, weight: 500, lineHeight: 1.2, tracking: '0', family: body, notes: 'Watch-page video title — Roboto Medium' }
section-title: { size: 20, weight: 700, lineHeight: 1.3, tracking: '0', family: body, notes: '"Subscriptions", "Music", section row labels' }
video-title: { size: 14, weight: 500, lineHeight: 1.3, tracking: '0', family: body, notes: 'Thumbnail title — 14 / 500, max 2 lines' }
video-title-large: { size: 16, weight: 500, lineHeight: 1.3, tracking: '0', family: body, notes: 'Watch-page recommended sidebar' }
body-lg: { size: 16, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
body-md: { size: 14, weight: 400, lineHeight: 1.4, tracking: '0', family: body, notes: 'YT default body — 14px' }
body-sm: { size: 13, weight: 400, lineHeight: 1.4, tracking: '0', family: body }
metadata: { size: 12, weight: 400, lineHeight: 1.3, tracking: '0', family: body, notes: 'Channel name, view count, timestamp' }
button-md: { size: 14, weight: 500, lineHeight: 1.0, tracking: '0', family: body, notes: 'Sentence case — "Subscribe", "Join"' }
button-sm: { size: 13, weight: 500, lineHeight: 1.0, tracking: '0', family: body }
chip-label: { size: 14, weight: 500, lineHeight: 1.0, tracking: '0', family: body, notes: 'Topic chips above feed — "All", "Music", "Gaming"' }
duration-badge: { size: 12, weight: 500, lineHeight: 1.0, tracking: '0', family: body, notes: 'Bottom-right runtime chip on thumbnail' }
nav-link: { size: 14, weight: 400, lineHeight: 1.0, tracking: '0', family: body, notes: 'Side-nav links' }
badge-live: { size: 11, weight: 700, lineHeight: 1.0, tracking: '0.04em', family: body, transform: uppercase, notes: '"LIVE"' }
caption: { size: 12, weight: 400, lineHeight: 1.4, tracking: '0', family: body }
legal: { size: 11, weight: 400, lineHeight: 1.4, tracking: '0', family: body }
code: { size: 13, weight: 400, lineHeight: 1.4, tracking: '0', family: mono, notes: 'Description code blocks' }
radius:
micro: 2
sm: 4
md: 8
lg: 12 # Material 3 default — thumbnail, card
xl: 16 # mini player, modal
pill: 9999 # subscribe button, chips, avatars
spacing:
base: 4
scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160]
layout:
page-width: 'unbounded' # YT scales to viewport
side-nav-collapsed: 72 # icon-only
side-nav-expanded: 240 # full labels
header-height: 56
thumbnail-aspect: '16:9'
shorts-aspect: '9:16'
feed-cols-mobile: 1
feed-cols-tablet: 2
feed-cols-desktop: 4 # at 1280px
feed-cols-wide: 5 # at 1600px+
card-gap: 16
prose-width: 720 # description, comment thread max measure
components:
button-subscribe:
bg: '#ff0000'
color: '#ffffff'
radius: 9999
padding: '0 16px'
height: 36
font: button-md
use: 'The signature red filled pill — "Subscribe". Anchored next to creator avatar.'
button-subscribed:
bg: '#272727'
color: '#ffffff'
radius: 9999
padding: '0 16px'
height: 36
use: 'After-click "Subscribed" pill — neutral surface fill replaces red.'
button-join:
bg: 'transparent'
color: '#3ea6ff'
border: '1px solid #3ea6ff'
radius: 9999
padding: '0 16px'
height: 36
use: '"Join" channel-membership pill — outlined link-blue.'
button-primary:
bg: '#3ea6ff'
color: '#0f0f0f'
radius: 9999
padding: '0 16px'
height: 36
use: 'Sign-in CTA, "Sign in" pill — link-blue (dark theme).'
button-text:
bg: 'transparent'
color: '#3ea6ff'
radius: 9999
padding: '0 12px'
height: 36
use: '"Sort by", "Show transcript" — text-only blue button.'
button-icon:
bg: 'transparent'
color: '#ffffff'
radius: 9999
padding: 8
width: 40
height: 40
use: 'Like, Dislike, Share, Save, ⋮ — circular icon button with 8px padding.'
button-icon-active:
bg: 'rgba(255,255,255,0.1)'
color: '#ffffff'
radius: 9999
use: 'Active state for icon buttons (Liked).'
thumbnail-card:
bg: 'transparent'
radius: 12
aspect: '16:9'
use: 'Default video thumbnail — 16:9 aspect, 12px radius, no border, no shadow at rest.'
thumbnail-shorts:
bg: 'transparent'
radius: 12
aspect: '9:16'
use: 'Vertical Shorts thumbnail — same chrome but 9:16.'
thumbnail-progress-overlay:
bg: 'rgba(255,255,255,0.2)'
fill: '#ff0000'
height: 4
use: 'Watch-progress bar along thumbnail bottom edge — the iconic YT red fill.'
thumbnail-duration-chip:
bg: 'rgba(0,0,0,0.6)'
color: '#ffffff'
radius: 4
padding: '2px 4px'
font: duration-badge
use: 'Bottom-right runtime — "10:24", "1:23:45".'
thumbnail-live-badge:
bg: '#ff0000'
color: '#ffffff'
radius: 4
padding: '2px 6px'
font: badge-live
use: '"LIVE" red filled tag bottom-left on live-streams.'
thumbnail-shorts-badge:
bg: 'transparent'
color: '#ffffff'
use: 'Vertical-stacked "SHORTS" lockup with red play-arrow glyph.'
card-video-feed:
bg: 'transparent'
color: '#ffffff'
radius: 0
use: 'Feed card — thumbnail + 14 / 500 title + 12 / 400 metadata. No card chrome.'
card-video-watch-sidebar:
bg: 'transparent'
color: '#ffffff'
radius: 0
use: 'Watch-page recommended sidebar — horizontal layout: 168px thumb + 16/500 title.'
chip-topic:
bg: 'rgba(255,255,255,0.1)'
color: '#ffffff'
radius: 8
padding: '6px 12px'
font: chip-label
use: '"All", "Music", "Gaming", "Live" — topic filter chips above feed.'
chip-topic-active:
bg: '#f1f1f1'
color: '#0f0f0f'
radius: 8
use: 'Active chip — light fill on dark, inverts colour.'
avatar-channel:
bg: 'transparent'
radius: 9999
width: 24
height: 24
use: 'Channel avatar in feed metadata — 24x24 circle. Watch-page goes 40x40.'
search-bar:
bg: '#121212'
color: '#ffffff'
border: '1px solid #303030'
radius: 9999
height: 40
padding: '0 16px'
use: 'Top header search field — pill-radius, dark fill, light border.'
search-bar-focus:
bg: '#0f0f0f'
border: '1px solid #1c62b9'
use: 'Focused — link-blue border (no glow ring).'
search-button:
bg: '#272727'
color: '#ffffff'
radius: 9999
width: 64
height: 40
use: 'Magnifying glass search-submit — pill-edge appended to search bar.'
side-nav-item:
bg: 'transparent'
color: '#ffffff'
radius: 8
padding: '8px 12px'
use: 'Side-nav row — icon + label. Hover bg `rgba(255,255,255,0.1)`.'
side-nav-item-active:
bg: '#272727'
color: '#ffffff'
use: 'Selected route — surface fill.'
player-progress-bar:
bg: 'rgba(255,255,255,0.2)'
fill: '#ff0000'
buffer: 'rgba(255,255,255,0.4)'
height: 3
radius: 0
use: 'Video player scrubber — 3px tall, red fill, white-alpha buffer, no radius.'
player-progress-handle:
bg: '#ff0000'
radius: 9999
width: 12
height: 12
use: 'Playhead — 12x12 red dot. Scales to 14x14 on hover.'
player-controls:
bg: 'linear-gradient(0deg, rgba(0,0,0,0.7), transparent)'
color: '#ffffff'
use: 'Bottom-bar player controls — gradient scrim, white icons.'
modal-dialog:
bg: '#212121'
color: '#ffffff'
radius: 12
border: '1px solid #303030'
use: 'Generic modal — share, save-to-playlist, report.'
toast:
bg: '#3f3f3f'
color: '#ffffff'
radius: 4
padding: '12px 16px'
use: '"Saved to Watch later" — bottom-anchored 4px-radius toast.'
comment:
bg: 'transparent'
color: '#ffffff'
radius: 0
use: 'Comment thread — flat, no card. Avatar + 13/500 author + 13/400 body.'
description-box:
bg: '#272727'
color: '#ffffff'
radius: 12
padding: 16
use: 'Watch-page description panel — surface fill, 12px radius.'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' # Material 3 standard
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' # Material 3 emphasized
ease-decelerate: 'cubic-bezier(0, 0, 0.2, 1)'
ease-accelerate: 'cubic-bezier(0.4, 0, 1, 1)'
duration-fast: 100
duration-standard: 200
duration-slow: 300
reduced-motion: 'respects prefers-reduced-motion: reduce — thumbnail-hover preview pause, side-nav slide becomes instant, ripple becomes opacity-only.'
breakpoints:
mobile: 600
tablet: 1024
desktop: 1280
wide: 1600
ultrawide: 2200
shadows:
none: 'none'
card-hover: '0 1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.15)'
modal: '0 8px 24px rgba(0,0,0,0.5)'
player-control: '0 1px 3px rgba(0,0,0,0.4)'
thumbnail-hover: 'none' # YT thumbnails do not shadow on hover — they preview-play instead
ring: '0 0 0 2px #1c62b9'
accessibility:
contrast-text-on-bg: 19.5 # white on #0f0f0f — AAA
contrast-text-on-bg-light: 19.5 # #0f0f0f on white — AAA
contrast-muted-on-bg: 7.5 # #aaa on #0f0f0f — AAA at body
contrast-text-on-brand: 4.5 # white on #ff0000 — AA at body
focus-ring: '2px solid #1c62b9 with 2px offset'
reduced-motion-honored: true
caption-track: 'CC available on most videos with full customisation (font, edge, colour, opacity, bg, position)'
audio-description: 'AD tracks supported via creator upload'
keyboard-shortcuts: 'Space, K play/pause; J/L 10s seek; M mute; F fullscreen; T theatre; I miniplayer; C captions; arrows/scrub'
dark-mode: 'native — defaults to dark for new users since 2023; full token swap to light theme via system preference or settings.'
---
## 1. Visual Theme & Atmosphere
YouTube is content-density at planetary scale. The default canvas since 2023 has been **dark theme** — a near-black `#0f0f0f` (warmer than pure black, deliberately so for OLED kindness on long sessions) with `#ffffff` ink. The light theme remains shipped (`#ffffff` canvas, `#0f0f0f` ink) and follows system preference, but the dark surface is the brand's modern default and the canvas where every UI decision lives.
The signature **YouTube Red** `#ff0000` (sometimes documented as `#FF0033` for Shorts and Music) is reserved for three semantic uses, almost nothing else: the play-button glyph in the wordmark, the Subscribe button, and the watch-progress bar that fills along thumbnail bottoms. This restraint is deliberate — when the brand colour is everywhere it's nowhere; when it's only on the action that matters (subscribe, watch, live), it commands attention. The Shorts feed nudges to a slightly more pink `#ff0033` but the difference is barely perceptible at glance.
Display runs in **YouTube Sans** — the brand-bespoke geometric sans designed by Saffron Brand Consultants in 2017, with the rounded `g`, the asymmetric `Y`, and the slight tilt to the `r` that immediately signals YouTube without the wordmark needing to be present. It appears on the wordmark, the about-page hero, the product-marketing surfaces (YouTube Premium, YouTube Music, YouTube TV), and almost nowhere in the watch UI itself.
Body and 99% of UI run **Roboto** at 14–16px. Roboto is Google's system sans (Material 3's default), and it carries thumbnail titles, metadata, comments, descriptions, side-nav, search. The default body size is 14px — smaller than the editorial web's 16–18px norm — because YouTube optimises for *thumbnail-density*, not reading-comfort, and 14px lets four 16:9 thumbnails fit at 1280px desktop while leaving room for two-line title plus metadata.
The grid is famously dense. **4 columns at 1280px desktop, 5 at 1600px wide**, with 16:9 thumbnails plus 14/500 Roboto title (`max 2 lines, ellipsize`) and 12/400 muted metadata (`channel · views · timestamp`). Cards have **12px radius** (Material 3 default) and zero border at rest — the only chrome is the optional watch-progress red bar that fills along the thumbnail bottom edge on partially-watched videos, the bottom-right black-translucent duration chip, and the optional bottom-left red LIVE badge.
Subscribe is the brand's anchor CTA. A `#ff0000` filled pill (9999px radius, 36px height, 14/500 Roboto, "Subscribe" sentence-case) anchored next to the creator avatar. After click, the pill becomes `#272727` filled with "Subscribed" — the colour transitions out, signalling that the action is consumed. This pattern is the most-rendered conversion CTA on the open web (1.8 billion monthly visitors × multiple subscribe surfaces × 20 years).
Motion is **Material 3 standard**: `cubic-bezier(0.4, 0, 0.2, 1)` standard ease at 200ms standard duration. Ripple-on-click on icon buttons (a faded white-alpha circular wave). Side-nav slide at 200ms decelerate. Modal scale at 250ms emphasized. The system is unflashy — motion is functional, not performative.
The chrome layout is hierarchical: 56px-tall masthead with hamburger + wordmark + search bar + sign-in/avatar; 240px-wide left side-nav (collapses to 72px icon-only) with primary routes (Home, Shorts, Subscriptions) and Library/History; main feed in the right pane with 16px gutters; footer-less.
**Key Characteristics:**
- Dark-default `#0f0f0f` canvas (since 2023).
- YouTube Red `#ff0000` reserved for play glyph + Subscribe + watch-progress bar.
- YouTube Sans for wordmark + brand surfaces; Roboto everywhere else.
- 14px body default — denser than editorial.
- 4 thumbnails per row at 1280px (5 at 1600px).
- 16:9 thumbnail aspect, 12px radius, no border at rest.
- Watch-progress red bar `4px` filling along thumbnail bottom.
- Subscribe `#ff0000` 9999px-pill → `#272727` "Subscribed" after click.
- Topic chips (All / Music / Gaming) above feed at 8px radius.
- Material 3 motion (`cubic-bezier(0.4, 0, 0.2, 1)`, 200ms).
- Side-nav 240px expanded / 72px collapsed.
- Live `#ff0000` filled badge bottom-left of thumbnail.
- Light theme available — full token swap, not gimmicked.
## 2. Color Palette & Roles
### Primary
- **Dark Canvas** (`#0f0f0f`): Default desktop dark theme — warmer than pure black, OLED-kind.
- **White** (`#ffffff`): Ink in dark theme, canvas in light theme.
- **YouTube Red** (`#ff0000`): The signature — Subscribe button, play-button glyph, watch-progress fill, LIVE badge.
### Brand & Dark
- **Brand Hover** (`#cc0000`): Subscribe pill hover.
- **Brand Active** (`#aa0000`): Press state.
- **Shorts Red** (`#ff0033`): Slightly pink-shifted variant on Shorts feed and Music brand.
- **Premium Amber** (`#f1c21b`): YouTube Premium accent on the Premium product page.
### Accent
- **Link Blue Dark** (`#3ea6ff`): Hyperlink, "Join" outline button on dark theme.
- **Link Blue Light** (`#065fd4`): Hyperlink on light theme.
- **Sign-In Blue** (`#3ea6ff`): Sign-in CTA in upper-right.
### Interactive
- **Subscribe Red** (`#ff0000` bg + `#ffffff` text): Default subscribe pill.
- **Subscribed Neutral** (`#272727` bg + `#ffffff` text): Post-click subscribed pill.
- **Icon Button Active** (`rgba(255,255,255,0.1)`): Like, Dislike, Share, Save active states.
- **Topic Chip Active** (`#f1f1f1` bg + `#0f0f0f` text): Selected chip — inverts colour.
- **Topic Chip Rest** (`rgba(255,255,255,0.1)`): Unselected.
### Neutral Scale (Dark Theme)
- **Ink** (`#ffffff`): Title, primary text.
- **Muted** (`#aaaaaa`): Metadata, secondary.
- **Soft** (`#717171`): Tertiary, disabled.
- **Border** (`#3f3f3f`): Default 1px hairline.
### Neutral Scale (Light Theme)
- **Ink** (`#0f0f0f`): Title, primary text.
- **Muted** (`#606060`): Metadata, secondary.
- **Border** (`#e5e5e5`): Default 1px hairline.
- **Surface** (`#f9f9f9`): Side-nav active bg.
### Surface & Borders
- **Surface** (`#272727`): Secondary panel, hover bg.
- **Surface Strong** (`#3f3f3f`): Press, focused input.
- **Surface Soft** (`#1f1f1f`): Alt-row tint.
- **Search Field BG** (`#121212`): Top-bar search field.
- **Border Default** (`#3f3f3f`): 1px on dark.
- **Border Strong** (`#5e5e5e`): Focused input.
### Shadow Colors
- **Card Hover** (`0 1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.15)`): Rare — most cards stay flat.
- **Modal** (`0 8px 24px rgba(0,0,0,0.5)`): Modals only.
- **Thumbnail Hover** (none): YT thumbnails don't shadow on hover — they auto-play a 5-second preview clip instead.
### Semantic
- **Success** (`#0db750`): "Subscribed", "Saved to Watch later".
- **Warning** (`#f1c21b`): Premium amber, age-gate.
- **Danger** (`#cc0000`): Error, removed-content notice.
- **Info** (`#3ea6ff`): Link blue.
## 3. Typography Rules
### Font Family
- **Display**: `"YouTube Sans"` — bespoke geometric sans by Saffron Brand Consultants (2017). Weights 400 / 500 / 700 / 900. Used on wordmark, about-page hero, brand-product pages (YouTube Premium, Music, TV, Kids, Shorts). Not used in the watch UI.
- **Body / UI**: `Roboto` — Google system sans, Material 3 default. Weights 400 / 500 / 700. Used for 99% of in-product text.
- **Mono**: `"Roboto Mono"` — used in description code blocks, developer-channel embed snippets.
- **Fallback chain**: `Arial, sans-serif`. YouTube degrades to Arial gracefully on systems without Roboto.
- **OpenType Features**: `kern` always on; no stylistic alternates exposed in product UI.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|------|------|------|--------|-------------|----------------|-------------|-------|
| Brand Display | YouTube Sans | 120px | 700 | 1.0 | -0.02em | kern | About-page hero |
| Display XL | YouTube Sans | 56px | 700 | 1.05 | -0.015em | kern | Premium / TV product pages |
| Display LG | YouTube Sans | 40px | 700 | 1.1 | -0.01em | kern | Section feature heads |
| Display MD | YouTube Sans | 32px | 700 | 1.15 | 0 | kern | Sub-feature |
| Display SM (Watch) | Roboto | 24px | 500 | 1.2 | 0 | kern | Watch-page video title — Roboto Medium |
| Section Title | Roboto | 20px | 700 | 1.3 | 0 | -- | "Subscriptions", "Music" feed sections |
| Video Title | Roboto | 14px | 500 | 1.3 | 0 | -- | Thumbnail title — max 2 lines |
| Video Title Large | Roboto | 16px | 500 | 1.3 | 0 | -- | Watch-page recommended sidebar |
| Body LG | Roboto | 16px | 400 | 1.5 | 0 | -- | Description prose |
| Body MD | Roboto | 14px | 400 | 1.4 | 0 | -- | YT default body — 14 |
| Body SM | Roboto | 13px | 400 | 1.4 | 0 | -- | Comment body |
| Metadata | Roboto | 12px | 400 | 1.3 | 0 | -- | Channel · views · timestamp |
| Button MD | Roboto | 14px | 500 | 1.0 | 0 | -- | Subscribe sentence-case |
| Button SM | Roboto | 13px | 500 | 1.0 | 0 | -- | Save, Share, Sort by |
| Chip Label | Roboto | 14px | 500 | 1.0 | 0 | -- | All, Music, Gaming chips |
| Duration Badge | Roboto | 12px | 500 | 1.0 | 0 | -- | "10:24" runtime chip |
| Nav Link | Roboto | 14px | 400 | 1.0 | 0 | -- | Side-nav |
| Badge LIVE | Roboto | 11px | 700 | 1.0 | 0.04em | -- | "LIVE" uppercase |
| Caption | Roboto | 12px | 400 | 1.4 | 0 | -- | Inline note |
| Legal | Roboto | 11px | 400 | 1.4 | 0 | -- | Footer copyright |
### Principles
- **Body is 14px, not 16.** YouTube optimises for thumbnail-density, not editorial reading. 14/500 title + 12/400 metadata fits four columns at 1280px.
- **YouTube Sans is brand surface only.** The watch UI is Roboto end-to-end. Reserve YouTube Sans for the wordmark and product-marketing pages — overusing it reads as branding, not product.
- **Roboto Medium (500) is the action weight.** Titles, buttons, chips run 500. Body runs 400. Numerals run regular except in 11/700 uppercase LIVE badge.
- **Sentence case for CTAs.** "Subscribe" (not "SUBSCRIBE"), "Sign in" (not "SIGN IN"), "Save" (not "SAVE"). Material 3 default casing.
- **Uppercase only for LIVE.** The single uppercase usage in the watch UI is the LIVE badge with `0.04em` letter-spacing.
- **No italic.** YT does not use italic in product UI. Italic appears only in user-supplied description text where the user has formatted it.
- **Numerals keep proportional spacing.** YT does not use `tnum` — view counts ("1.2M views") read naturally, not as a tabular grid.
## 4. Component Stylings
### Buttons
**Subscribe (Primary)**
- Background: `#ff0000`. Color: `#ffffff`. Radius: `9999px`. Padding: `0 16px`. Height: `36px`. Font: Roboto 14 / 500.
- Hover: `#cc0000`, 100ms ease-standard. No transform, no shadow.
- Active: `#aa0000`.
- Use: The signature CTA. Anchored next to creator avatar on watch page and channel header.
**Subscribed (Post-Click)**
- Background: `#272727`. Color: `#ffffff`. Radius: `9999px`. Padding: `0 16px`. Height: `36px`.
- Hover: `#3f3f3f`.
- Use: After Subscribe click, the pill swaps to neutral surface fill — the colour leaves the action that has been consumed.
**Join (Channel Membership)**
- Background: `transparent`. Color: `#3ea6ff`. Border: `1px solid #3ea6ff`. Radius: `9999px`. Padding: `0 16px`. Height: `36px`.
- Use: Outlined link-blue pill — channel paid-membership entry.
**Sign In (Top Right)**
- Background: `transparent`. Color: `#3ea6ff`. Border: `1px solid #3ea6ff`. Radius: `9999px`. Padding: `0 16px`. Height: `36px`.
- Use: Sign-in pill on logged-out state.
**Icon Button (Like / Dislike / Share / Save)**
- Background: `transparent` rest, `rgba(255,255,255,0.1)` hover, `rgba(255,255,255,0.2)` active.
- Color: `#ffffff`. Radius: `9999px`. Width: 40px. Height: 40px. Padding: 8px.
- Use: Action row below video. Material ripple on click.
**Text Button**
- Background: `transparent`. Color: `#3ea6ff`. Radius: `9999px`. Padding: `0 12px`. Height: `36px`.
- Use: "Sort by", "Show transcript", "Show more" — text-only blue.
### Thumbnails (The Brand's Core Surface)
**Default Thumbnail**
- Aspect: 16:9. Radius: `12px`. Border: none. Background: black image-placeholder.
- Hover: 5-second auto-preview clip plays muted (replaces still). On mobile, no auto-preview — long-press triggers the same.
- Bottom-right runtime chip: `rgba(0,0,0,0.6)` bg + `#ffffff` 12/500 + `4px` radius.
- Bottom-left LIVE badge (live streams only): `#ff0000` bg + `#ffffff` 11/700 uppercase + `4px` radius.
- Watch-progress overlay (partially-watched only): 4px tall, `rgba(255,255,255,0.2)` rail, `#ff0000` fill from left.
- Below thumbnail: 14/500 title (max 2 lines, ellipsize) + 24x24 channel avatar + 12/400 muted metadata.
**Shorts Thumbnail**
- Aspect: 9:16. Radius: `12px`. Vertical-stacked grid.
- "SHORTS" lockup with red play-arrow glyph instead of duration chip.
### Topic Chips (Above Feed)
- Background: `rgba(255,255,255,0.1)` rest, `#f1f1f1` active.
- Color: `#ffffff` rest, `#0f0f0f` active.
- Radius: `8px`. Padding: `6px 12px`. Height: 32px. Font: Roboto 14 / 500.
- Use: "All", "Music", "Gaming", "Live", "Mixes", "Recently uploaded" — topic filters.
### Search Bar
- Background: `#121212`. Color: `#ffffff`. Border: `1px solid #303030`. Radius: `9999px`. Height: `40px`.
- Focus: Border `#1c62b9` link-blue, no glow ring.
- Suffix: `#272727` magnifying-glass submit pill at right.
- Voice-search mic icon: 40x40 circular icon button, gray-50.
### Side Navigation
**Side Nav Expanded (240px)**
- Background: `#0f0f0f`. Sticky left.
- Items: 8px radius row, 8px 12px padding, icon (24x24) + 14/400 label.
- Hover: `rgba(255,255,255,0.1)` bg.
- Active route: `#272727` bg + 14/500 label weight.
**Side Nav Collapsed (72px)**
- Icon-only, label tooltip on hover.
- Toggles via header hamburger.
**Mini Side Nav (Watch page)**
- 72px icon-only on watch page only — gives the player full breathing room.
### Player Controls
**Progress Bar**
- Rail: `rgba(255,255,255,0.2)`. Buffer: `rgba(255,255,255,0.4)`. Fill: `#ff0000`. Height: `3px`. Radius: 0.
- Hover: rail thickens to 5px and reveals chapter ticks.
**Playhead**
- 12x12 `#ff0000` circle. Scales to 14x14 on hover. Material 3 ripple on grab.
**Bottom Bar**
- Background: `linear-gradient(0deg, rgba(0,0,0,0.7), transparent)` 100px tall. Color: `#ffffff`.
- Controls: Play/Pause / Next / Volume / Time / Captions / Settings / Theatre / Mini / Fullscreen.
### Cards
**Feed Card**
- Background: `transparent` (no card chrome). Padding: 0. Gap: 16px between cards.
- Thumbnail (12px radius) + title 14/500 + metadata block.
- Hover: title weight stays, metadata stays — only the thumbnail auto-plays.
**Watch Recommended Sidebar Card**
- Horizontal: 168px-wide thumbnail + flex-1 column with 16/500 title + metadata.
- Background: transparent. Hover bg: `rgba(255,255,255,0.05)`.
**Description Box (Watch Page)**
- Background: `#272727`. Color: `#ffffff`. Radius: `12px`. Padding: 16px.
- Collapsed: 3 lines + "Show more". Expanded: full description + chapter list + tags.
### Comment
- Background: `transparent`. Radius: 0. Padding: `12px 0`. No card.
- Avatar 40x40 circle + author 13/500 + timestamp 12/400 muted + body 13/400.
- Action row: Like (`#3ea6ff` if liked) / Dislike / Reply.
### Modal
- Background: `#212121`. Color: `#ffffff`. Radius: `12px`. Border: `1px solid #303030`.
- Shadow: `0 8px 24px rgba(0,0,0,0.5)`. Width: clamp(400px, 50vw, 600px).
- Use: Share, Save to playlist, Report, Send feedback.
### Toast
- Background: `#3f3f3f`. Color: `#ffffff`. Radius: `4px`. Padding: `12px 16px`.
- Anchored bottom-left, 5-second auto-dismiss.
- Use: "Saved to Watch later", "Added to playlist", "Sharing link copied".
## 5. Layout Principles
### Spacing System
- Base: 4px. Scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 128 / 160.
- Card gap: 16px in feed grid. Section gap: 32–48px between feed sections.
### Grid & Container
- **Unbounded** page width — feed scales infinitely; YT does not enforce a `max-width` on the main feed pane.
- Side nav: 240 expanded / 72 collapsed.
- Header: 56px tall.
- Feed grid: 4 cols at 1280px desktop, 5 at 1600px wide, 6 at 2200px ultrawide.
- Watch page: video player flex-grow, 426px-wide right column for recommended sidebar at desktop; stacks below at <1024px.
### Whitespace Philosophy
YouTube optimises for *thumbnail-density*. The feed grid uses 16px card gaps — the smallest in the streaming category — so the eye scans rows of thumbnails like a contact-sheet rather than dwelling on individual cards. This is the deliberate opposite of Apple TV+ or Netflix (both more spacious). The brand's whitespace is "give every thumbnail equal weight, fit as many as the viewport allows".
### Section Cadence
- Topic chips bar (`All`, `Music`, `Gaming`, etc.) — sticky below header
- "Continue watching" feed row
- Subscriptions feed
- Recommended for you (the main infinite feed)
- "Shorts" horizontal carousel (mid-feed)
- Trending / Music / Live (genre rows)
- Footer-less — feed loads infinitely
## 6. Shapes & Radius Scale
- **Sharp** (`0px`): Player progress bar, side-nav active highlight stripe.
- **Micro** (`2px`): Internal tooltip arrow.
- **Standard** (`4px`): Duration chip, LIVE badge, toast.
- **Material Default** (`8px`): Topic chip, side-nav row, generic small surface.
- **Card** (`12px`): Thumbnail, modal, description box — the most-used radius.
- **Modal Large** (`16px`): Settings dialog (rare).
- **Pill** (`9999px`): Subscribe button, Join, Sign in, search bar, icon buttons, avatars, chips.
## 7. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| 0 | Flat | Default — feed cards, thumbnails, comments |
| 1 | Surface fill `#272727` | Hover row, side-nav active |
| 2 | `0 1px 2px rgba(0,0,0,0.3) + 0 2px 6px rgba(0,0,0,0.15)` | Card hover (rare — most stay flat) |
| 3 | Player gradient scrim `linear-gradient(0deg, rgba(0,0,0,0.7), transparent)` | Player controls bottom bar |
| 4 | `0 8px 24px rgba(0,0,0,0.5)` | Modal dialog |
| 5 | -- | YT does not stack higher |
### Shadow Philosophy
Most YouTube surfaces are flat. The brand uses *surface-fill colour* (`#272727`, `#3f3f3f`) as its primary elevation cue, not shadows. Cards, comments, side-nav rows, even modals favour a colour-shift over a drop-shadow. The single exception is the modal dialog, which uses Material 3's elevation-3 shadow stack. Player controls use a gradient-scrim instead of a drop-shadow because they overlay video where shadows compete with motion content.
## 8. Interaction & Motion
### Easing Curves
- **Material 3 Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for everything.
- **Material 3 Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal, side-nav slide.
- **Decelerate**: `cubic-bezier(0, 0, 0.2, 1)` — entry, fade-in.
- **Accelerate**: `cubic-bezier(0.4, 0, 1, 1)` — exit.
### Duration Buckets
- **Fast**: 100ms — colour shift, hover, ripple.
- **Standard**: 200ms — modal in, side-nav slide, chip select.
- **Slow**: 300ms — full-page transitions, miniplayer expand.
### Per-Component Recipes
- **Subscribe pill hover**: bg `#ff0000 → #cc0000`, 100ms.
- **Icon button click**: Material ripple — `rgba(255,255,255,0.2)` circle expanding from click point over 250ms ease-decelerate.
- **Thumbnail hover preview**: 800ms delay before 5-second muted clip plays. Cancels on mouse-leave.
- **Side-nav slide**: 240ms ease-emphasized.
- **Modal in**: 250ms ease-emphasized — opacity 0→1 + scale 0.96→1.0.
- **Toast in**: 200ms slide-up + opacity. Auto-dismiss after 5s.
- **Topic chip select**: 100ms colour swap.
- **Watch-progress fill**: native HTML5 `<progress>` element animation; no custom motion.
### Page Transitions
YouTube uses native page navigation with persisted player state — clicking a thumbnail loads the watch page while keeping any miniplayer alive in the bottom-right. There is no SPA cross-fade; transitions are instant content-replace with skeleton placeholders during fetch.
### Reduced Motion
- Thumbnail preview → still only, no autoplay.
- Side-nav slide → instant.
- Modal scale → opacity-only.
- Ripple → opacity-only fade, no scale.
- Topic chip select → instant.
## 9. Accessibility & A11y
### Contrast Pairs
- White on `#0f0f0f`: **19.5:1** — AAA.
- `#0f0f0f` on white: **19.5:1** — AAA.
- Muted `#aaa` on `#0f0f0f`: **7.5:1** — AAA at body, AA at small.
- White on `#ff0000`: **4.5:1** — AA at body.
- Link blue `#3ea6ff` on `#0f0f0f`: **8.0:1** — AAA.
- Link blue `#065fd4` on white: **6.5:1** — AAA.
### Focus Indicators
- 2px solid `#1c62b9` (Material focus blue) ring with 2px offset on all interactive controls.
- Player controls: dotted-white outline (legacy YT, deliberately preserved for Tab visibility over video).
### ARIA Patterns
- Feed grid: `role="feed"` with `aria-busy` during pagination.
- Thumbnail card: `role="link"` with full `aria-label="Title — Channel — duration — uploaded date"`.
- Subscribe button: `role="button" aria-pressed="true|false"` reflecting subscription state.
- Player: native `<video>` with custom controls; `aria-label` on each control button.
- Modal: `role="dialog" aria-modal="true"`, focus trap, ESC closes.
- Side nav: `<nav aria-label="Primary">`, current route `aria-current="page"`.
### Keyboard Navigation
- Tab follows logical order: side-nav → topic chips → feed → footer.
- Arrow keys do not bind in feed (preserves browser behaviour).
- Space / K play-pause; J / L 10s rewind / fwd; arrows seek 5s; M mute; F fullscreen; T theatre mode; I miniplayer; C captions; > / < playback rate.
- Esc exits fullscreen → exits miniplayer → closes modal.
### Screen Reader Hints
- Thumbnail card aria-label includes channel, duration, view count, age — full metadata read.
- Watch progress: `aria-valuenow` updates as playback progresses (audio cue every 25%).
- Captions: `<track kind="captions">` exposed to AT.
- Live indicator: `aria-live="polite"` on chat thread.
### Caption / AD
- CC available on most videos with full customisation: font (proportional / mono / casual), edge (none / drop-shadow / outline), colour, opacity, bg, position.
- Audio description uploadable as separate track per video; creator-supplied.
### Reduced Motion
Honoured per §8. Especially impactful on Shorts feed, where reduced-motion disables the auto-advance scroll behaviour.
## 10. Responsive Behavior
### Breakpoints
| Token | Min | Use |
|-------|-----|-----|
| mobile | 0px | 1 column feed, 56px header, hamburger nav, no side-nav |
| tablet | 600px | 2 column feed, side-nav collapses to icon-only |
| desktop | 1024px | 3-4 column feed, side-nav 240px expanded |
| 1280px | 1280px | 4 column feed (canonical desktop) |
| wide | 1600px | 5 column feed |
| ultrawide | 2200px | 6 column feed |
### Touch Targets
- 48×48 minimum (Material 3 standard) on all controls.
- Icon buttons 40x40 visual but 48x48 hit-target via padding.
### Collapsing Strategy
- Header search → search-icon-only at <600px (tap opens fullscreen search overlay).
- Side nav → bottom-tab nav at <600px (Home / Shorts / Subscriptions / Library / You).
- Watch recommended sidebar → stacks below player at <1024px.
- Player → fullscreen-default on mobile portrait, theatre on landscape.
### Image Behavior
- Thumbnails: srcset 120/320/480/1280w with `loading="lazy"` for non-fold cards.
- Channel avatars: srcset 48/88/176px square.
- Cover banners: srcset for channel-page banners 1920/2560w.
### Container Queries
- Feed card uses CQ to switch between vertical (mobile, 1-col) and horizontal (sidebar) layouts.
## 11. Content & Voice
### Tone
YouTube voice is **direct-friendly-mass-market**. Where Vimeo is artisanal-cinephile and Netflix is editorial-prestige, YouTube is *direct-utility-conversational*. Acquisition copy reads like product instructions: "Watch, subscribe, share." Product copy is sentence-case throughout — no advertising-tone, no aspirational marketing voice. The brand assumes the user is here for a specific video and only briefly negotiates.
### Microcopy Patterns
- **Primary CTA**: "Subscribe", "Sign in", "Try YouTube Premium".
- **Secondary**: "Save", "Share", "Sort by", "Show more", "Show transcript".
- **Acquisition headline**: "Welcome to YouTube. Sign in to like videos, comment, and subscribe."
- **Empty Watch later**: "Save videos to watch later. They'll appear here."
- **Empty Subscriptions**: "Subscribe to channels to see their latest videos here."
- **Empty Search**: "No results found. Try different keywords."
- **Error**: "Something went wrong. Please try again." (Material 3 standard error string.)
- **Network**: "You're offline. Reconnect to continue watching."
- **Comment empty**: "Be the first to comment."
- **Live**: "Live now" or "Started 3 minutes ago".
### Empty States
- Watch later: text + small "Browse" link.
- Subscriptions: "Recommended channels for you" — system suggests channels.
- Search no-results: text + "Trending now" 4-up grid.
### CTA Verb Conventions
- "Subscribe" (not "Follow", not "Sign up"). YouTube has owned "subscribe" since 2005 — the verb is the brand.
- "Save" (not "Bookmark", not "Add"). "Save to Watch later" is the canonical phrase.
- "Share" (not "Send", not "Forward"). The Share modal is universal.
- "Sign in" (not "Log in"). Material casing, sentence case.
- "Watch" (not "Play"). YouTube watches; Netflix plays.
## 12. Dark Mode & Theming
**Native dark mode — defaults to dark for new users since 2023.**
The light theme remains shipped (`#ffffff` canvas, `#0f0f0f` ink) and follows system preference for users who haven't explicitly toggled. The full light-theme token swap:
```yaml
colors-light:
bg: '#ffffff'
surface: '#f9f9f9'
surface-strong: '#e5e5e5'
text: '#0f0f0f'
text-muted: '#606060'
border: '#e5e5e5'
search-field-bg: '#ffffff'
search-field-border: '#cccccc'
brand: '#ff0000' # red unchanged — passes AA on white
link: '#065fd4' # link blue darkens for AA on white
card-hover: 'rgba(0,0,0,0.05)'
player-controls: 'unchanged — always dark scrim over video'
```
The brand red `#ff0000` is unchanged across themes — it's the conversion CTA on both. Player UI stays dark on both themes since the player overlays video content.
The theme toggle is `Appearance` setting: Use device theme / Dark theme / Light theme. There is no auto-time-of-day switch.
## 13. Lineage & Influences
YouTube inherits from three streams.
**Material Design and Material 3.** The radius scale (12px card, 9999px pill, 4px chip), the easing curves (`cubic-bezier(0.4, 0, 0.2, 1)`), the surface-fill elevation system (`#272727`/`#3f3f3f` instead of shadows), the topic-chip pattern, the icon-button-with-ripple — all of these are direct Material 3 implementations. YouTube is Google's flagship Material 3 product on the web.
**TV broadcast and cable-channel UI.** The dense thumbnail grid, the LIVE red badge, the bottom-right runtime chip, the "Subscribe" verb (cable-TV "channels"), the watch-progress bar — these inherit from broadcast television's channel-guide and now-playing chrome. YouTube treats videos as channels in the cable-TV sense.
**Roboto and the Google design system.** Roboto (Christian Robertson, 2011) is the system sans across all Google products; YouTube is the largest-scale deployment of Roboto in any product. The 14px body default, the 500-weight title pattern, the kern-on default — all Google design system inheritance.
What YouTube rejects: editorial whitespace (Apple TV+), prestige hover-scale (Netflix), franchise-tile branding (Disney+), the rounded-everything web aesthetic (the brand keeps 0-radius on player progress, 4-radius on chips, 12-radius on cards — it doesn't homogenize). The brand is *dense-utility-conversational*.
**Influences:**
- **Material Design 3** — radius, elevation-via-fill, motion curves, ripple. https://m3.material.io/
- **Saffron Brand Consultants — YouTube Sans (2017)** — bespoke geometric sans. https://www.saffron-consultants.com/work/youtube
- **Christian Robertson — Roboto (2011)** — body face. https://fonts.google.com/specimen/Roboto
- **Cable / broadcast TV UI conventions** — channel guide, LIVE indicator, runtime chip.
- **Polymer / lit-element web components** — YouTube's frontend stack defines the Material 3 web reference.
## 14. Do's and Don'ts
**Do:**
- Use `#0f0f0f` dark canvas with `#ffffff` ink as the default theme — this is the modern YT default since 2023.
- Reserve `#ff0000` brand red for Subscribe button, play-button glyph, watch-progress bar, LIVE badge — three semantic uses, almost nothing else.
- Use Roboto for 99% of UI; reserve YouTube Sans for the wordmark and brand-marketing pages.
- Default body to 14px / 500 (title) and 12px / 400 (metadata) — YT's thumbnail-density type scale.
- Use 12px radius on thumbnails and cards (Material 3 default).
- Use 9999px pill radius on Subscribe, Join, Sign in, chips, search bar, icon buttons.
- Use sentence case for CTAs ("Subscribe", "Save", "Sign in") — never uppercase except LIVE badge.
- Layout the feed as 4 columns at 1280px, 5 at 1600px wide, 6 at 2200px ultrawide.
- Render bottom-right runtime chip with `rgba(0,0,0,0.6)` bg + 12/500 white.
- Render watch-progress as 4px tall red `#ff0000` fill on `rgba(255,255,255,0.2)` rail along thumbnail bottom.
- Auto-preview thumbnails on hover after 800ms delay (5-second muted clip).
- Use Material 3 motion: `cubic-bezier(0.4, 0, 0.2, 1)` standard at 200ms.
**Don't:**
- Don't add red to ornament — it's a semantic colour for action only.
- Don't use uppercase on CTAs except LIVE badge.
- Don't render thumbnails with shadows on hover — auto-preview replaces hover-shadow.
- Don't use italic in product UI.
- Don't use display weight (700) on body or metadata — body is 400, title is 500.
- Don't use editorial whitespace (48px+ row gap) — feed gap is 16px.
- Don't bound the feed to a fixed max-width — it scales.
- Don't use multi-step gradients — flat fills + Material elevation only.
- Don't substitute Roboto with another sans — the kerning and Material harmony break.
- Don't ship the player progress bar with rounded ends — it's 0-radius.
- Don't use card-shadows on feed thumbnails — they stay flat.
- Don't use parallax or scroll-trigger animation — Material 3 does not.
## 15. Agent Prompt Guide
### Quick Color Reference
- Canvas (Dark): `#0f0f0f`
- Canvas (Light): `#ffffff`
- Ink (Dark): `#ffffff`
- Ink (Light): `#0f0f0f`
- YouTube Red: `#ff0000`
- Subscribed Neutral: `#272727`
- Surface Strong: `#3f3f3f`
- Muted: `#aaaaaa`
- Border: `#3f3f3f`
- Link Blue (Dark): `#3ea6ff`
- Link Blue (Light): `#065fd4`
### Example Component Prompts
1. "Create a YouTube feed thumbnail card — `#0f0f0f` dark canvas, transparent card background, 16:9 aspect 12px-radius thumbnail with bottom-right `rgba(0,0,0,0.6)` 4px-radius runtime chip ('10:24') and 4px tall `#ff0000` watch-progress fill on `rgba(255,255,255,0.2)` rail along bottom edge. Below: 14/500 Roboto title (max 2 lines, ellipsize) in white, 24x24 channel avatar, 12/400 muted `#aaa` metadata 'Channel · 1.2M views · 3 days ago'."
2. "Design a YouTube Subscribe button — `#ff0000` background, `#ffffff` text, 9999px pill radius, 36px height, 0/16px padding, Roboto 14/500 sentence-case 'Subscribe'. Hover darkens to `#cc0000` over 100ms `cubic-bezier(0.4, 0, 0.2, 1)` no transform. After click, swap to `#272727` background with text 'Subscribed'."
3. "Build a YouTube topic chip bar — horizontal scroll row of pills above the feed. Each chip: `rgba(255,255,255,0.1)` bg + `#ffffff` text Roboto 14/500, 8px radius, 6/12 padding. Active chip inverts to `#f1f1f1` bg + `#0f0f0f` text. Labels: 'All', 'Music', 'Gaming', 'Live', 'Mixes'."
4. "Render a YouTube watch-page header — left: 24/500 Roboto video title in white. Below: 40x40 circle channel avatar + channel name 16/500 + subscriber count 12/400 muted. Right: `#ff0000` 9999px Subscribe pill. Below all: row of 40x40 circular icon buttons (Like / Dislike / Share / Save) — `transparent` bg, `rgba(255,255,255,0.1)` hover."
5. "Create a YouTube side nav at desktop — 240px wide, `#0f0f0f` bg, sticky left. Each row: 8px radius, 8/12 padding, 24px icon + 14/400 white label. Hover `rgba(255,255,255,0.1)` bg. Active route `#272727` bg + 14/500 weight. Items: Home, Shorts (red play glyph), Subscriptions, Library, History, Watch later."
6. "Render a YouTube player progress bar — 3px tall, 0 radius, full width. Rail `rgba(255,255,255,0.2)`, buffer `rgba(255,255,255,0.4)`, fill `#ff0000`. Playhead is a 12x12 `#ff0000` circle scaling to 14x14 on hover."
### Iteration Guide
1. **Dark, not light.** The default since 2023 is `#0f0f0f` dark theme. If the design defaults to white, swap.
2. **Three reds.** Subscribe + play glyph + watch-progress. If red appears anywhere else (text colour, icon fill, divider), remove it.
3. **14, not 16.** Body title is 14/500; metadata is 12/400. The brand optimises for thumbnail-density.
4. **Pill the actions.** Subscribe, Join, Sign in, search, chips, avatars — all 9999px pill. Cards remain 12px.
5. **Roboto, not YouTube Sans.** YouTube Sans is brand-surface only; UI is Roboto.
6. **Flat cards.** Feed thumbnails do not shadow — they auto-preview on hover instead.
7. **Sentence case.** Material 3 CTA casing — "Subscribe", not "SUBSCRIBE".
8. **4 cols at 1280, 5 at 1600.** The canonical feed grid. If your design renders 3 fat columns, tighten.
1. Visual Theme & Atmosphere
YouTube is content-density at planetary scale. The default canvas since 2023 has been dark theme — a near-black #0f0f0f (warmer than pure black, deliberately so for OLED kindness on long sessions) with #ffffff ink. The light theme remains shipped (#ffffff canvas, #0f0f0f ink) and follows system preference, but the dark surface is the brand’s modern default and the canvas where every UI decision lives.
The signature YouTube Red #ff0000 (sometimes documented as #FF0033 for Shorts and Music) is reserved for three semantic uses, almost nothing else: the play-button glyph in the wordmark, the Subscribe button, and the watch-progress bar that fills along thumbnail bottoms. This restraint is deliberate — when the brand colour is everywhere it’s nowhere; when it’s only on the action that matters (subscribe, watch, live), it commands attention. The Shorts feed nudges to a slightly more pink #ff0033 but the difference is barely perceptible at glance.
Display runs in YouTube Sans — the brand-bespoke geometric sans designed by Saffron Brand Consultants in 2017, with the rounded g, the asymmetric Y, and the slight tilt to the r that immediately signals YouTube without the wordmark needing to be present. It appears on the wordmark, the about-page hero, the product-marketing surfaces (YouTube Premium, YouTube Music, YouTube TV), and almost nowhere in the watch UI itself.
Body and 99% of UI run Roboto at 14–16px. Roboto is Google’s system sans (Material 3’s default), and it carries thumbnail titles, metadata, comments, descriptions, side-nav, search. The default body size is 14px — smaller than the editorial web’s 16–18px norm — because YouTube optimises for thumbnail-density, not reading-comfort, and 14px lets four 16:9 thumbnails fit at 1280px desktop while leaving room for two-line title plus metadata.
The grid is famously dense. 4 columns at 1280px desktop, 5 at 1600px wide, with 16:9 thumbnails plus 14/500 Roboto title (max 2 lines, ellipsize) and 12/400 muted metadata (channel · views · timestamp). Cards have 12px radius (Material 3 default) and zero border at rest — the only chrome is the optional watch-progress red bar that fills along the thumbnail bottom edge on partially-watched videos, the bottom-right black-translucent duration chip, and the optional bottom-left red LIVE badge.
Subscribe is the brand’s anchor CTA. A #ff0000 filled pill (9999px radius, 36px height, 14/500 Roboto, “Subscribe” sentence-case) anchored next to the creator avatar. After click, the pill becomes #272727 filled with “Subscribed” — the colour transitions out, signalling that the action is consumed. This pattern is the most-rendered conversion CTA on the open web (1.8 billion monthly visitors × multiple subscribe surfaces × 20 years).
Motion is Material 3 standard: cubic-bezier(0.4, 0, 0.2, 1) standard ease at 200ms standard duration. Ripple-on-click on icon buttons (a faded white-alpha circular wave). Side-nav slide at 200ms decelerate. Modal scale at 250ms emphasized. The system is unflashy — motion is functional, not performative.
The chrome layout is hierarchical: 56px-tall masthead with hamburger + wordmark + search bar + sign-in/avatar; 240px-wide left side-nav (collapses to 72px icon-only) with primary routes (Home, Shorts, Subscriptions) and Library/History; main feed in the right pane with 16px gutters; footer-less.
Key Characteristics:
- Dark-default
#0f0f0fcanvas (since 2023). - YouTube Red
#ff0000reserved for play glyph + Subscribe + watch-progress bar. - YouTube Sans for wordmark + brand surfaces; Roboto everywhere else.
- 14px body default — denser than editorial.
- 4 thumbnails per row at 1280px (5 at 1600px).
- 16:9 thumbnail aspect, 12px radius, no border at rest.
- Watch-progress red bar
4pxfilling along thumbnail bottom. - Subscribe
#ff00009999px-pill →#272727“Subscribed” after click. - Topic chips (All / Music / Gaming) above feed at 8px radius.
- Material 3 motion (
cubic-bezier(0.4, 0, 0.2, 1), 200ms). - Side-nav 240px expanded / 72px collapsed.
- Live
#ff0000filled badge bottom-left of thumbnail. - Light theme available — full token swap, not gimmicked.
2. Color Palette & Roles
Primary
- Dark Canvas (
#0f0f0f): Default desktop dark theme — warmer than pure black, OLED-kind. - White (
#ffffff): Ink in dark theme, canvas in light theme. - YouTube Red (
#ff0000): The signature — Subscribe button, play-button glyph, watch-progress fill, LIVE badge.
Brand & Dark
- Brand Hover (
#cc0000): Subscribe pill hover. - Brand Active (
#aa0000): Press state. - Shorts Red (
#ff0033): Slightly pink-shifted variant on Shorts feed and Music brand. - Premium Amber (
#f1c21b): YouTube Premium accent on the Premium product page.
Accent
- Link Blue Dark (
#3ea6ff): Hyperlink, “Join” outline button on dark theme. - Link Blue Light (
#065fd4): Hyperlink on light theme. - Sign-In Blue (
#3ea6ff): Sign-in CTA in upper-right.
Interactive
- Subscribe Red (
#ff0000bg +#fffffftext): Default subscribe pill. - Subscribed Neutral (
#272727bg +#fffffftext): Post-click subscribed pill. - Icon Button Active (
rgba(255,255,255,0.1)): Like, Dislike, Share, Save active states. - Topic Chip Active (
#f1f1f1bg +#0f0f0ftext): Selected chip — inverts colour. - Topic Chip Rest (
rgba(255,255,255,0.1)): Unselected.
Neutral Scale (Dark Theme)
- Ink (
#ffffff): Title, primary text. - Muted (
#aaaaaa): Metadata, secondary. - Soft (
#717171): Tertiary, disabled. - Border (
#3f3f3f): Default 1px hairline.
Neutral Scale (Light Theme)
- Ink (
#0f0f0f): Title, primary text. - Muted (
#606060): Metadata, secondary. - Border (
#e5e5e5): Default 1px hairline. - Surface (
#f9f9f9): Side-nav active bg.
Surface & Borders
- Surface (
#272727): Secondary panel, hover bg. - Surface Strong (
#3f3f3f): Press, focused input. - Surface Soft (
#1f1f1f): Alt-row tint. - Search Field BG (
#121212): Top-bar search field. - Border Default (
#3f3f3f): 1px on dark. - Border Strong (
#5e5e5e): Focused input.
Shadow Colors
- Card Hover (
0 1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.15)): Rare — most cards stay flat. - Modal (
0 8px 24px rgba(0,0,0,0.5)): Modals only. - Thumbnail Hover (none): YT thumbnails don’t shadow on hover — they auto-play a 5-second preview clip instead.
Semantic
- Success (
#0db750): “Subscribed”, “Saved to Watch later”. - Warning (
#f1c21b): Premium amber, age-gate. - Danger (
#cc0000): Error, removed-content notice. - Info (
#3ea6ff): Link blue.
3. Typography Rules
Font Family
- Display:
"YouTube Sans"— bespoke geometric sans by Saffron Brand Consultants (2017). Weights 400 / 500 / 700 / 900. Used on wordmark, about-page hero, brand-product pages (YouTube Premium, Music, TV, Kids, Shorts). Not used in the watch UI. - Body / UI:
Roboto— Google system sans, Material 3 default. Weights 400 / 500 / 700. Used for 99% of in-product text. - Mono:
"Roboto Mono"— used in description code blocks, developer-channel embed snippets. - Fallback chain:
Arial, sans-serif. YouTube degrades to Arial gracefully on systems without Roboto. - OpenType Features:
kernalways on; no stylistic alternates exposed in product UI.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| Brand Display | YouTube Sans | 120px | 700 | 1.0 | -0.02em | kern | About-page hero |
| Display XL | YouTube Sans | 56px | 700 | 1.05 | -0.015em | kern | Premium / TV product pages |
| Display LG | YouTube Sans | 40px | 700 | 1.1 | -0.01em | kern | Section feature heads |
| Display MD | YouTube Sans | 32px | 700 | 1.15 | 0 | kern | Sub-feature |
| Display SM (Watch) | Roboto | 24px | 500 | 1.2 | 0 | kern | Watch-page video title — Roboto Medium |
| Section Title | Roboto | 20px | 700 | 1.3 | 0 | — | “Subscriptions”, “Music” feed sections |
| Video Title | Roboto | 14px | 500 | 1.3 | 0 | — | Thumbnail title — max 2 lines |
| Video Title Large | Roboto | 16px | 500 | 1.3 | 0 | — | Watch-page recommended sidebar |
| Body LG | Roboto | 16px | 400 | 1.5 | 0 | — | Description prose |
| Body MD | Roboto | 14px | 400 | 1.4 | 0 | — | YT default body — 14 |
| Body SM | Roboto | 13px | 400 | 1.4 | 0 | — | Comment body |
| Metadata | Roboto | 12px | 400 | 1.3 | 0 | — | Channel · views · timestamp |
| Button MD | Roboto | 14px | 500 | 1.0 | 0 | — | Subscribe sentence-case |
| Button SM | Roboto | 13px | 500 | 1.0 | 0 | — | Save, Share, Sort by |
| Chip Label | Roboto | 14px | 500 | 1.0 | 0 | — | All, Music, Gaming chips |
| Duration Badge | Roboto | 12px | 500 | 1.0 | 0 | — | “10:24” runtime chip |
| Nav Link | Roboto | 14px | 400 | 1.0 | 0 | — | Side-nav |
| Badge LIVE | Roboto | 11px | 700 | 1.0 | 0.04em | — | “LIVE” uppercase |
| Caption | Roboto | 12px | 400 | 1.4 | 0 | — | Inline note |
| Legal | Roboto | 11px | 400 | 1.4 | 0 | — | Footer copyright |
Principles
- Body is 14px, not 16. YouTube optimises for thumbnail-density, not editorial reading. 14/500 title + 12/400 metadata fits four columns at 1280px.
- YouTube Sans is brand surface only. The watch UI is Roboto end-to-end. Reserve YouTube Sans for the wordmark and product-marketing pages — overusing it reads as branding, not product.
- Roboto Medium (500) is the action weight. Titles, buttons, chips run 500. Body runs 400. Numerals run regular except in 11/700 uppercase LIVE badge.
- Sentence case for CTAs. “Subscribe” (not “SUBSCRIBE”), “Sign in” (not “SIGN IN”), “Save” (not “SAVE”). Material 3 default casing.
- Uppercase only for LIVE. The single uppercase usage in the watch UI is the LIVE badge with
0.04emletter-spacing. - No italic. YT does not use italic in product UI. Italic appears only in user-supplied description text where the user has formatted it.
- Numerals keep proportional spacing. YT does not use
tnum— view counts (“1.2M views”) read naturally, not as a tabular grid.
4. Component Stylings
Buttons
Subscribe (Primary)
- Background:
#ff0000. Color:#ffffff. Radius:9999px. Padding:0 16px. Height:36px. Font: Roboto 14 / 500. - Hover:
#cc0000, 100ms ease-standard. No transform, no shadow. - Active:
#aa0000. - Use: The signature CTA. Anchored next to creator avatar on watch page and channel header.
Subscribed (Post-Click)
- Background:
#272727. Color:#ffffff. Radius:9999px. Padding:0 16px. Height:36px. - Hover:
#3f3f3f. - Use: After Subscribe click, the pill swaps to neutral surface fill — the colour leaves the action that has been consumed.
Join (Channel Membership)
- Background:
transparent. Color:#3ea6ff. Border:1px solid #3ea6ff. Radius:9999px. Padding:0 16px. Height:36px. - Use: Outlined link-blue pill — channel paid-membership entry.
Sign In (Top Right)
- Background:
transparent. Color:#3ea6ff. Border:1px solid #3ea6ff. Radius:9999px. Padding:0 16px. Height:36px. - Use: Sign-in pill on logged-out state.
Icon Button (Like / Dislike / Share / Save)
- Background:
transparentrest,rgba(255,255,255,0.1)hover,rgba(255,255,255,0.2)active. - Color:
#ffffff. Radius:9999px. Width: 40px. Height: 40px. Padding: 8px. - Use: Action row below video. Material ripple on click.
Text Button
- Background:
transparent. Color:#3ea6ff. Radius:9999px. Padding:0 12px. Height:36px. - Use: “Sort by”, “Show transcript”, “Show more” — text-only blue.
Thumbnails (The Brand’s Core Surface)
Default Thumbnail
- Aspect: 16:9. Radius:
12px. Border: none. Background: black image-placeholder. - Hover: 5-second auto-preview clip plays muted (replaces still). On mobile, no auto-preview — long-press triggers the same.
- Bottom-right runtime chip:
rgba(0,0,0,0.6)bg +#ffffff12/500 +4pxradius. - Bottom-left LIVE badge (live streams only):
#ff0000bg +#ffffff11/700 uppercase +4pxradius. - Watch-progress overlay (partially-watched only): 4px tall,
rgba(255,255,255,0.2)rail,#ff0000fill from left. - Below thumbnail: 14/500 title (max 2 lines, ellipsize) + 24x24 channel avatar + 12/400 muted metadata.
Shorts Thumbnail
- Aspect: 9:16. Radius:
12px. Vertical-stacked grid. - “SHORTS” lockup with red play-arrow glyph instead of duration chip.
Topic Chips (Above Feed)
- Background:
rgba(255,255,255,0.1)rest,#f1f1f1active. - Color:
#ffffffrest,#0f0f0factive. - Radius:
8px. Padding:6px 12px. Height: 32px. Font: Roboto 14 / 500. - Use: “All”, “Music”, “Gaming”, “Live”, “Mixes”, “Recently uploaded” — topic filters.
Search Bar
- Background:
#121212. Color:#ffffff. Border:1px solid #303030. Radius:9999px. Height:40px. - Focus: Border
#1c62b9link-blue, no glow ring. - Suffix:
#272727magnifying-glass submit pill at right. - Voice-search mic icon: 40x40 circular icon button, gray-50.
Side Navigation
Side Nav Expanded (240px)
- Background:
#0f0f0f. Sticky left. - Items: 8px radius row, 8px 12px padding, icon (24x24) + 14/400 label.
- Hover:
rgba(255,255,255,0.1)bg. - Active route:
#272727bg + 14/500 label weight.
Side Nav Collapsed (72px)
- Icon-only, label tooltip on hover.
- Toggles via header hamburger.
Mini Side Nav (Watch page)
- 72px icon-only on watch page only — gives the player full breathing room.
Player Controls
Progress Bar
- Rail:
rgba(255,255,255,0.2). Buffer:rgba(255,255,255,0.4). Fill:#ff0000. Height:3px. Radius: 0. - Hover: rail thickens to 5px and reveals chapter ticks.
Playhead
- 12x12
#ff0000circle. Scales to 14x14 on hover. Material 3 ripple on grab.
Bottom Bar
- Background:
linear-gradient(0deg, rgba(0,0,0,0.7), transparent)100px tall. Color:#ffffff. - Controls: Play/Pause / Next / Volume / Time / Captions / Settings / Theatre / Mini / Fullscreen.
Cards
Feed Card
- Background:
transparent(no card chrome). Padding: 0. Gap: 16px between cards. - Thumbnail (12px radius) + title 14/500 + metadata block.
- Hover: title weight stays, metadata stays — only the thumbnail auto-plays.
Watch Recommended Sidebar Card
- Horizontal: 168px-wide thumbnail + flex-1 column with 16/500 title + metadata.
- Background: transparent. Hover bg:
rgba(255,255,255,0.05).
Description Box (Watch Page)
- Background:
#272727. Color:#ffffff. Radius:12px. Padding: 16px. - Collapsed: 3 lines + “Show more”. Expanded: full description + chapter list + tags.
Comment
- Background:
transparent. Radius: 0. Padding:12px 0. No card. - Avatar 40x40 circle + author 13/500 + timestamp 12/400 muted + body 13/400.
- Action row: Like (
#3ea6ffif liked) / Dislike / Reply.
Modal
- Background:
#212121. Color:#ffffff. Radius:12px. Border:1px solid #303030. - Shadow:
0 8px 24px rgba(0,0,0,0.5). Width: clamp(400px, 50vw, 600px). - Use: Share, Save to playlist, Report, Send feedback.
Toast
- Background:
#3f3f3f. Color:#ffffff. Radius:4px. Padding:12px 16px. - Anchored bottom-left, 5-second auto-dismiss.
- Use: “Saved to Watch later”, “Added to playlist”, “Sharing link copied”.
5. Layout Principles
Spacing System
- Base: 4px. Scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 128 / 160.
- Card gap: 16px in feed grid. Section gap: 32–48px between feed sections.
Grid & Container
- Unbounded page width — feed scales infinitely; YT does not enforce a
max-widthon the main feed pane. - Side nav: 240 expanded / 72 collapsed.
- Header: 56px tall.
- Feed grid: 4 cols at 1280px desktop, 5 at 1600px wide, 6 at 2200px ultrawide.
- Watch page: video player flex-grow, 426px-wide right column for recommended sidebar at desktop; stacks below at <1024px.
Whitespace Philosophy
YouTube optimises for thumbnail-density. The feed grid uses 16px card gaps — the smallest in the streaming category — so the eye scans rows of thumbnails like a contact-sheet rather than dwelling on individual cards. This is the deliberate opposite of Apple TV+ or Netflix (both more spacious). The brand’s whitespace is “give every thumbnail equal weight, fit as many as the viewport allows”.
Section Cadence
- Topic chips bar (
All,Music,Gaming, etc.) — sticky below header - “Continue watching” feed row
- Subscriptions feed
- Recommended for you (the main infinite feed)
- “Shorts” horizontal carousel (mid-feed)
- Trending / Music / Live (genre rows)
- Footer-less — feed loads infinitely
6. Shapes & Radius Scale
- Sharp (
0px): Player progress bar, side-nav active highlight stripe. - Micro (
2px): Internal tooltip arrow. - Standard (
4px): Duration chip, LIVE badge, toast. - Material Default (
8px): Topic chip, side-nav row, generic small surface. - Card (
12px): Thumbnail, modal, description box — the most-used radius. - Modal Large (
16px): Settings dialog (rare). - Pill (
9999px): Subscribe button, Join, Sign in, search bar, icon buttons, avatars, chips.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat | Default — feed cards, thumbnails, comments |
| 1 | Surface fill #272727 | Hover row, side-nav active |
| 2 | 0 1px 2px rgba(0,0,0,0.3) + 0 2px 6px rgba(0,0,0,0.15) | Card hover (rare — most stay flat) |
| 3 | Player gradient scrim linear-gradient(0deg, rgba(0,0,0,0.7), transparent) | Player controls bottom bar |
| 4 | 0 8px 24px rgba(0,0,0,0.5) | Modal dialog |
| 5 | — | YT does not stack higher |
Shadow Philosophy
Most YouTube surfaces are flat. The brand uses surface-fill colour (#272727, #3f3f3f) as its primary elevation cue, not shadows. Cards, comments, side-nav rows, even modals favour a colour-shift over a drop-shadow. The single exception is the modal dialog, which uses Material 3’s elevation-3 shadow stack. Player controls use a gradient-scrim instead of a drop-shadow because they overlay video where shadows compete with motion content.
8. Interaction & Motion
Easing Curves
- Material 3 Standard:
cubic-bezier(0.4, 0, 0.2, 1)— default for everything. - Material 3 Emphasized:
cubic-bezier(0.2, 0, 0, 1)— modal, side-nav slide. - Decelerate:
cubic-bezier(0, 0, 0.2, 1)— entry, fade-in. - Accelerate:
cubic-bezier(0.4, 0, 1, 1)— exit.
Duration Buckets
- Fast: 100ms — colour shift, hover, ripple.
- Standard: 200ms — modal in, side-nav slide, chip select.
- Slow: 300ms — full-page transitions, miniplayer expand.
Per-Component Recipes
- Subscribe pill hover: bg
#ff0000 → #cc0000, 100ms. - Icon button click: Material ripple —
rgba(255,255,255,0.2)circle expanding from click point over 250ms ease-decelerate. - Thumbnail hover preview: 800ms delay before 5-second muted clip plays. Cancels on mouse-leave.
- Side-nav slide: 240ms ease-emphasized.
- Modal in: 250ms ease-emphasized — opacity 0→1 + scale 0.96→1.0.
- Toast in: 200ms slide-up + opacity. Auto-dismiss after 5s.
- Topic chip select: 100ms colour swap.
- Watch-progress fill: native HTML5
<progress>element animation; no custom motion.
Page Transitions
YouTube uses native page navigation with persisted player state — clicking a thumbnail loads the watch page while keeping any miniplayer alive in the bottom-right. There is no SPA cross-fade; transitions are instant content-replace with skeleton placeholders during fetch.
Reduced Motion
- Thumbnail preview → still only, no autoplay.
- Side-nav slide → instant.
- Modal scale → opacity-only.
- Ripple → opacity-only fade, no scale.
- Topic chip select → instant.
9. Accessibility & A11y
Contrast Pairs
- White on
#0f0f0f: 19.5:1 — AAA. #0f0f0fon white: 19.5:1 — AAA.- Muted
#aaaon#0f0f0f: 7.5:1 — AAA at body, AA at small. - White on
#ff0000: 4.5:1 — AA at body. - Link blue
#3ea6ffon#0f0f0f: 8.0:1 — AAA. - Link blue
#065fd4on white: 6.5:1 — AAA.
Focus Indicators
- 2px solid
#1c62b9(Material focus blue) ring with 2px offset on all interactive controls. - Player controls: dotted-white outline (legacy YT, deliberately preserved for Tab visibility over video).
ARIA Patterns
- Feed grid:
role="feed"witharia-busyduring pagination. - Thumbnail card:
role="link"with fullaria-label="Title — Channel — duration — uploaded date". - Subscribe button:
role="button" aria-pressed="true|false"reflecting subscription state. - Player: native
<video>with custom controls;aria-labelon each control button. - Modal:
role="dialog" aria-modal="true", focus trap, ESC closes. - Side nav:
<nav aria-label="Primary">, current routearia-current="page".
Keyboard Navigation
- Tab follows logical order: side-nav → topic chips → feed → footer.
- Arrow keys do not bind in feed (preserves browser behaviour).
- Space / K play-pause; J / L 10s rewind / fwd; arrows seek 5s; M mute; F fullscreen; T theatre mode; I miniplayer; C captions; > / < playback rate.
- Esc exits fullscreen → exits miniplayer → closes modal.
Screen Reader Hints
- Thumbnail card aria-label includes channel, duration, view count, age — full metadata read.
- Watch progress:
aria-valuenowupdates as playback progresses (audio cue every 25%). - Captions:
<track kind="captions">exposed to AT. - Live indicator:
aria-live="polite"on chat thread.
Caption / AD
- CC available on most videos with full customisation: font (proportional / mono / casual), edge (none / drop-shadow / outline), colour, opacity, bg, position.
- Audio description uploadable as separate track per video; creator-supplied.
Reduced Motion
Honoured per §8. Especially impactful on Shorts feed, where reduced-motion disables the auto-advance scroll behaviour.
10. Responsive Behavior
Breakpoints
| Token | Min | Use |
|---|---|---|
| mobile | 0px | 1 column feed, 56px header, hamburger nav, no side-nav |
| tablet | 600px | 2 column feed, side-nav collapses to icon-only |
| desktop | 1024px | 3-4 column feed, side-nav 240px expanded |
| 1280px | 1280px | 4 column feed (canonical desktop) |
| wide | 1600px | 5 column feed |
| ultrawide | 2200px | 6 column feed |
Touch Targets
- 48×48 minimum (Material 3 standard) on all controls.
- Icon buttons 40x40 visual but 48x48 hit-target via padding.
Collapsing Strategy
- Header search → search-icon-only at <600px (tap opens fullscreen search overlay).
- Side nav → bottom-tab nav at <600px (Home / Shorts / Subscriptions / Library / You).
- Watch recommended sidebar → stacks below player at <1024px.
- Player → fullscreen-default on mobile portrait, theatre on landscape.
Image Behavior
- Thumbnails: srcset 120/320/480/1280w with
loading="lazy"for non-fold cards. - Channel avatars: srcset 48/88/176px square.
- Cover banners: srcset for channel-page banners 1920/2560w.
Container Queries
- Feed card uses CQ to switch between vertical (mobile, 1-col) and horizontal (sidebar) layouts.
11. Content & Voice
Tone
YouTube voice is direct-friendly-mass-market. Where Vimeo is artisanal-cinephile and Netflix is editorial-prestige, YouTube is direct-utility-conversational. Acquisition copy reads like product instructions: “Watch, subscribe, share.” Product copy is sentence-case throughout — no advertising-tone, no aspirational marketing voice. The brand assumes the user is here for a specific video and only briefly negotiates.
Microcopy Patterns
- Primary CTA: “Subscribe”, “Sign in”, “Try YouTube Premium”.
- Secondary: “Save”, “Share”, “Sort by”, “Show more”, “Show transcript”.
- Acquisition headline: “Welcome to YouTube. Sign in to like videos, comment, and subscribe.”
- Empty Watch later: “Save videos to watch later. They’ll appear here.”
- Empty Subscriptions: “Subscribe to channels to see their latest videos here.”
- Empty Search: “No results found. Try different keywords.”
- Error: “Something went wrong. Please try again.” (Material 3 standard error string.)
- Network: “You’re offline. Reconnect to continue watching.”
- Comment empty: “Be the first to comment.”
- Live: “Live now” or “Started 3 minutes ago”.
Empty States
- Watch later: text + small “Browse” link.
- Subscriptions: “Recommended channels for you” — system suggests channels.
- Search no-results: text + “Trending now” 4-up grid.
CTA Verb Conventions
- “Subscribe” (not “Follow”, not “Sign up”). YouTube has owned “subscribe” since 2005 — the verb is the brand.
- “Save” (not “Bookmark”, not “Add”). “Save to Watch later” is the canonical phrase.
- “Share” (not “Send”, not “Forward”). The Share modal is universal.
- “Sign in” (not “Log in”). Material casing, sentence case.
- “Watch” (not “Play”). YouTube watches; Netflix plays.
12. Dark Mode & Theming
Native dark mode — defaults to dark for new users since 2023.
The light theme remains shipped (#ffffff canvas, #0f0f0f ink) and follows system preference for users who haven’t explicitly toggled. The full light-theme token swap:
colors-light:
bg: '#ffffff'
surface: '#f9f9f9'
surface-strong: '#e5e5e5'
text: '#0f0f0f'
text-muted: '#606060'
border: '#e5e5e5'
search-field-bg: '#ffffff'
search-field-border: '#cccccc'
brand: '#ff0000' # red unchanged — passes AA on white
link: '#065fd4' # link blue darkens for AA on white
card-hover: 'rgba(0,0,0,0.05)'
player-controls: 'unchanged — always dark scrim over video'The brand red #ff0000 is unchanged across themes — it’s the conversion CTA on both. Player UI stays dark on both themes since the player overlays video content.
The theme toggle is Appearance setting: Use device theme / Dark theme / Light theme. There is no auto-time-of-day switch.
13. Lineage & Influences
YouTube inherits from three streams.
Material Design and Material 3. The radius scale (12px card, 9999px pill, 4px chip), the easing curves (cubic-bezier(0.4, 0, 0.2, 1)), the surface-fill elevation system (#272727/#3f3f3f instead of shadows), the topic-chip pattern, the icon-button-with-ripple — all of these are direct Material 3 implementations. YouTube is Google’s flagship Material 3 product on the web.
TV broadcast and cable-channel UI. The dense thumbnail grid, the LIVE red badge, the bottom-right runtime chip, the “Subscribe” verb (cable-TV “channels”), the watch-progress bar — these inherit from broadcast television’s channel-guide and now-playing chrome. YouTube treats videos as channels in the cable-TV sense.
Roboto and the Google design system. Roboto (Christian Robertson, 2011) is the system sans across all Google products; YouTube is the largest-scale deployment of Roboto in any product. The 14px body default, the 500-weight title pattern, the kern-on default — all Google design system inheritance.
What YouTube rejects: editorial whitespace (Apple TV+), prestige hover-scale (Netflix), franchise-tile branding (Disney+), the rounded-everything web aesthetic (the brand keeps 0-radius on player progress, 4-radius on chips, 12-radius on cards — it doesn’t homogenize). The brand is dense-utility-conversational.
Influences:
- Material Design 3 — radius, elevation-via-fill, motion curves, ripple. https://m3.material.io/
- Saffron Brand Consultants — YouTube Sans (2017) — bespoke geometric sans. https://www.saffron-consultants.com/work/youtube
- Christian Robertson — Roboto (2011) — body face. https://fonts.google.com/specimen/Roboto
- Cable / broadcast TV UI conventions — channel guide, LIVE indicator, runtime chip.
- Polymer / lit-element web components — YouTube’s frontend stack defines the Material 3 web reference.
14. Do’s and Don’ts
Do:
- Use
#0f0f0fdark canvas with#ffffffink as the default theme — this is the modern YT default since 2023. - Reserve
#ff0000brand red for Subscribe button, play-button glyph, watch-progress bar, LIVE badge — three semantic uses, almost nothing else. - Use Roboto for 99% of UI; reserve YouTube Sans for the wordmark and brand-marketing pages.
- Default body to 14px / 500 (title) and 12px / 400 (metadata) — YT’s thumbnail-density type scale.
- Use 12px radius on thumbnails and cards (Material 3 default).
- Use 9999px pill radius on Subscribe, Join, Sign in, chips, search bar, icon buttons.
- Use sentence case for CTAs (“Subscribe”, “Save”, “Sign in”) — never uppercase except LIVE badge.
- Layout the feed as 4 columns at 1280px, 5 at 1600px wide, 6 at 2200px ultrawide.
- Render bottom-right runtime chip with
rgba(0,0,0,0.6)bg + 12/500 white. - Render watch-progress as 4px tall red
#ff0000fill onrgba(255,255,255,0.2)rail along thumbnail bottom. - Auto-preview thumbnails on hover after 800ms delay (5-second muted clip).
- Use Material 3 motion:
cubic-bezier(0.4, 0, 0.2, 1)standard at 200ms.
Don’t:
- Don’t add red to ornament — it’s a semantic colour for action only.
- Don’t use uppercase on CTAs except LIVE badge.
- Don’t render thumbnails with shadows on hover — auto-preview replaces hover-shadow.
- Don’t use italic in product UI.
- Don’t use display weight (700) on body or metadata — body is 400, title is 500.
- Don’t use editorial whitespace (48px+ row gap) — feed gap is 16px.
- Don’t bound the feed to a fixed max-width — it scales.
- Don’t use multi-step gradients — flat fills + Material elevation only.
- Don’t substitute Roboto with another sans — the kerning and Material harmony break.
- Don’t ship the player progress bar with rounded ends — it’s 0-radius.
- Don’t use card-shadows on feed thumbnails — they stay flat.
- Don’t use parallax or scroll-trigger animation — Material 3 does not.
15. Agent Prompt Guide
Quick Color Reference
- Canvas (Dark):
#0f0f0f - Canvas (Light):
#ffffff - Ink (Dark):
#ffffff - Ink (Light):
#0f0f0f - YouTube Red:
#ff0000 - Subscribed Neutral:
#272727 - Surface Strong:
#3f3f3f - Muted:
#aaaaaa - Border:
#3f3f3f - Link Blue (Dark):
#3ea6ff - Link Blue (Light):
#065fd4
Example Component Prompts
- “Create a YouTube feed thumbnail card —
#0f0f0fdark canvas, transparent card background, 16:9 aspect 12px-radius thumbnail with bottom-rightrgba(0,0,0,0.6)4px-radius runtime chip (‘10:24’) and 4px tall#ff0000watch-progress fill onrgba(255,255,255,0.2)rail along bottom edge. Below: 14/500 Roboto title (max 2 lines, ellipsize) in white, 24x24 channel avatar, 12/400 muted#aaametadata ‘Channel · 1.2M views · 3 days ago’.” - “Design a YouTube Subscribe button —
#ff0000background,#fffffftext, 9999px pill radius, 36px height, 0/16px padding, Roboto 14/500 sentence-case ‘Subscribe’. Hover darkens to#cc0000over 100mscubic-bezier(0.4, 0, 0.2, 1)no transform. After click, swap to#272727background with text ‘Subscribed’.” - “Build a YouTube topic chip bar — horizontal scroll row of pills above the feed. Each chip:
rgba(255,255,255,0.1)bg +#fffffftext Roboto 14/500, 8px radius, 6/12 padding. Active chip inverts to#f1f1f1bg +#0f0f0ftext. Labels: ‘All’, ‘Music’, ‘Gaming’, ‘Live’, ‘Mixes’.” - “Render a YouTube watch-page header — left: 24/500 Roboto video title in white. Below: 40x40 circle channel avatar + channel name 16/500 + subscriber count 12/400 muted. Right:
#ff00009999px Subscribe pill. Below all: row of 40x40 circular icon buttons (Like / Dislike / Share / Save) —transparentbg,rgba(255,255,255,0.1)hover.” - “Create a YouTube side nav at desktop — 240px wide,
#0f0f0fbg, sticky left. Each row: 8px radius, 8/12 padding, 24px icon + 14/400 white label. Hoverrgba(255,255,255,0.1)bg. Active route#272727bg + 14/500 weight. Items: Home, Shorts (red play glyph), Subscriptions, Library, History, Watch later.” - “Render a YouTube player progress bar — 3px tall, 0 radius, full width. Rail
rgba(255,255,255,0.2), bufferrgba(255,255,255,0.4), fill#ff0000. Playhead is a 12x12#ff0000circle scaling to 14x14 on hover.”
Iteration Guide
- Dark, not light. The default since 2023 is
#0f0f0fdark theme. If the design defaults to white, swap. - Three reds. Subscribe + play glyph + watch-progress. If red appears anywhere else (text colour, icon fill, divider), remove it.
- 14, not 16. Body title is 14/500; metadata is 12/400. The brand optimises for thumbnail-density.
- Pill the actions. Subscribe, Join, Sign in, search, chips, avatars — all 9999px pill. Cards remain 12px.
- Roboto, not YouTube Sans. YouTube Sans is brand-surface only; UI is Roboto.
- Flat cards. Feed thumbnails do not shadow — they auto-preview on hover instead.
- Sentence case. Material 3 CTA casing — “Subscribe”, not “SUBSCRIBE”.
- 4 cols at 1280, 5 at 1600. The canonical feed grid. If your design renders 3 fat columns, tighten.
Drop youtube into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add youtube 2 · ship landing page
npx agentkit init --design youtube dark bold
Netflix
Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonic…
Docs
Install
Netflix
webdesignhot
dark neon
TikTok
Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova di…
Docs
Install
TikTok
webdesignhot
dark bold
Twitch
Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around cha…
Docs
Install
Twitch
webdesignhot