W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
YouTube
YouTube is the global video-sharing platform owned by Google LLC, founded in 2005 and acquired by Google in 2006. The brand identity, refreshed in 2017, is anchored on a single saturated red and the geometric play-button rectangle — among the most recognized marks in consumer software. YouTube treats both light and dark modes as canonical product surfaces, with the dark canvas at #0F0F0F carrying the modern consumer experience. The voice is creator- facing and casual, built around the content rather than around the platform chrome.
1 palette 3 fonts 0 assets 10 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/youtube/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/youtube/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
YouTube
YouTube is the global video-sharing platform owned by Google LLC, founded in 2005 and acquired by Google in 2006. The brand identity, refreshed in 2017, is anchored on a single saturated red and the geometric play-button rectangle — among the most recognized marks in consumer software. YouTube treats both light and dark modes as canonical product surfaces, with the dark canvas at #0F0F0F carrying the modern consumer experience. The voice is creator- facing and casual, built around the content rather than around the platform chrome.
Tags: streaming, video, youtube, google, bimodal, consumer-tech
Atoms
Palette
YouTube · [email protected] · Proprietary — All Rights Reserved
YouTube corporate brand palette. YouTube (a Google LLC service) is anchored on a single saturated red — YouTube Red (#FF0000) — used on the play-button mark, the wordmark accent, and the highest- priority interactive elements. The 2017 brand refresh reduced the identity to this one red and the geometric play-button rectangle. The consumer surface is bimodal: a clean white canvas for the classic light mode and a near-black (#0F0F0F) canvas for the dark-mode product, with both treated as canonical.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Roboto ([email protected]) |
Apache-2.0 | sans-serif |
body |
Roboto ([email protected]) |
Apache-2.0 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
youtube-red |
YouTube Red | #FF0000 |
youtube-red-dark |
YouTube Red Dark | #CC0000 |
youtube-red-light |
YouTube Red Light | #FF4444 |
youtube-black |
YouTube Black | #0F0F0F |
youtube-near-black |
YouTube Near-Black | #181818 |
youtube-charcoal |
YouTube Charcoal | #272727 |
youtube-white |
YouTube White | #FFFFFF |
youtube-fog |
YouTube Fog | #F2F2F2 |
youtube-ink |
YouTube Ink | #030303 |
youtube-graphite |
YouTube Graphite | #606060 |
youtube-gray |
YouTube Gray | #AAAAAA |
youtube-divider |
YouTube Divider | #E5E5E5 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
youtube-white |
#FFFFFF |
surface |
youtube-fog |
#F2F2F2 |
surface-elevated |
youtube-white |
#FFFFFF |
text-primary |
youtube-ink |
#030303 |
text-secondary |
youtube-graphite |
#606060 |
text-tertiary |
youtube-gray |
#AAAAAA |
primary |
youtube-red |
#FF0000 |
primary-hover |
youtube-red-dark |
#CC0000 |
accent |
youtube-red |
#FF0000 |
accent-hover |
youtube-red-dark |
#CC0000 |
warning |
youtube-red-light |
#FF4444 |
warning-hover |
youtube-red |
#FF0000 |
error |
youtube-red-dark |
#CC0000 |
success |
youtube-graphite |
#606060 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
youtube-black |
#0F0F0F |
surface |
youtube-near-black |
#181818 |
surface-elevated |
youtube-charcoal |
#272727 |
text-primary |
youtube-white |
#FFFFFF |
text-secondary |
youtube-gray |
#AAAAAA |
text-tertiary |
youtube-graphite |
#606060 |
primary |
youtube-red |
#FF0000 |
primary-hover |
youtube-red-light |
#FF4444 |
accent |
youtube-red |
#FF0000 |
accent-hover |
youtube-red-light |
#FF4444 |
warning |
youtube-red-light |
#FF4444 |
warning-hover |
youtube-red |
#FF0000 |
error |
youtube-red-light |
#FF4444 |
success |
youtube-white |
#FFFFFF |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
youtube-red |
#FF0000 |
on-identity |
youtube-white |
#FFFFFF |
primary |
youtube-red |
#FF0000 |
primary-hover |
youtube-red-dark |
#CC0000 |
accent |
youtube-red |
#FF0000 |
accent-hover |
youtube-red-dark |
#CC0000 |
mark |
youtube-red |
#FF0000 |
text-primary-light |
youtube-ink |
#030303 |
text-primary-dark |
youtube-white |
#FFFFFF |
text-secondary-light |
youtube-graphite |
#606060 |
text-secondary-dark |
youtube-gray |
#AAAAAA |
background-light |
youtube-white |
#FFFFFF |
background-dark |
youtube-black |
#0F0F0F |
surface-light |
youtube-fog |
#F2F2F2 |
surface-dark |
youtube-near-black |
#181818 |
divider |
youtube-divider |
#E5E5E5 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (8)
colorChoice → logo.mark.fill
- allowed: youtube-red, youtube-white, youtube-ink
- forbidden: youtube-red-dark, youtube-red-light, youtube-gray, youtube-graphite
The YouTube play-button mark renders in pure red, reversed white on dark surfaces, or monochrome black for print. Hover and lighter reds are interactive-state values; gray tones are chrome — none are acceptable mark fills.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, inverted-without-variant
YouTube's brand-resources program is strict about the play-button mark. The 2017 refresh removed the prior red-rectangle-with-white-wordmark composition in favor of a separated play-button mark + monochrome wordmark — consumers MUST NOT reintroduce gradient or drop-shadow treatments.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
YouTube Ink (#030303) on YouTube White gives ~21:1 and YouTube White on YouTube Black (#0F0F0F) gives ~19:1 — both directions clear WCAG 2.1 Level AA with substantial margin.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
YouTube Red on white reaches ~4:1 — AA for large text. On the dark canvas the same red against #0F0F0F gives ~5:1 — AA for normal text. This rule guards interactive use at button size.
contextRestriction → roles.colors.primary
- forbiddenContexts: body-text, secondary-link
YouTube Red is reserved for the play-button mark, the subscribe-button affordance, and primary alerts. Using it inside body copy or for secondary links dilutes the signature accent and weakens the affordance the red carries throughout the product.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The bimodal canvas makes contrast checks the default verification on any new role pairing.
variantSelection → logo
- use:
youtube-light - when:
backgroundColorScheme="dark"
On the dark YouTube canvas, the wordmark renders in white with the play-button mark in red. Do not invert the white wordmark to black on the dark canvas.
variantSelection → logo
- use:
youtube-dark - when:
backgroundColorScheme="light"
On the light YouTube canvas, the wordmark renders in YouTube Ink with the play-button mark in red. Do not render the wordmark in white on a light surface.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 700
YouTube Sans and the Roboto system chrome use Regular (400), Medium (500), and Bold (700) on UI surfaces. Lighter cuts read as content metadata; heavier cuts are outside the documented product kit.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.4
YouTube's marketing headlines and surface section heads run materially larger than body and metadata text. A 1.4× minimum ratio preserves the display-to-prose hierarchy the product and marketing both depend on.
Provenance
- Source: https://www.youtube.com/about/brand-resources/
- License:
Proprietary — All Rights Reserved - Attribution: Google LLC — YouTube, the YouTube wordmark, and the play-button mark are registered trademarks of Google LLC. The signature YouTube Red (#FF0000) is documented across YouTube's brand- resources page. YouTube Sans is the proprietary corporate typeface; this atom references Roboto (Google's open-source Apache-licensed corporate sans) as the documented fallback, matching the YouTube product surface which has historically used Roboto for system chrome.
- Imported:
2026-05-18 - Notes: YouTube Sans (proprietary) is reserved for the wordmark and select marketing surfaces. Roboto (already in this catalog as roboto@1) is the documented public fallback and the long-standing chrome font for YouTube product surfaces. This atom references Roboto for both heading and body roles and notes YouTube Sans as the proprietary primary in provenance.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by YouTube
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
YouTube
A clear hierarchy in YouTube's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ youtube-red #FF0000 accent-hover
→ youtube-red-dark #CC0000 background-dark
→ youtube-black #0F0F0F background-light
→ youtube-white #FFFFFF divider
→ youtube-divider #E5E5E5 identity
→ youtube-red #FF0000 mark
→ youtube-red #FF0000 on-identity
→ youtube-white #FFFFFF primary
→ youtube-red #FF0000 primary-hover
→ youtube-red-dark #CC0000 surface-dark
→ youtube-near-black #181818 surface-light
→ youtube-fog #F2F2F2 text-primary-dark
→ youtube-white #FFFFFF text-primary-light
→ youtube-ink #030303 text-secondary-dark
→ youtube-gray #AAAAAA text-secondary-light
→ youtube-graphite #606060 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Roboto prose
→ body Roboto Palette mode mappings (from youtube)
Light mode (14 roles)
accent
→ youtube-red accent-hover
→ youtube-red-dark background
→ youtube-white error
→ youtube-red-dark primary
→ youtube-red primary-hover
→ youtube-red-dark success
→ youtube-graphite surface
→ youtube-fog surface-elevated
→ youtube-white text-primary
→ youtube-ink text-secondary
→ youtube-graphite text-tertiary
→ youtube-gray warning
→ youtube-red-light warning-hover
→ youtube-red Dark mode (14 roles)
accent
→ youtube-red accent-hover
→ youtube-red-light background
→ youtube-black error
→ youtube-red-light primary
→ youtube-red primary-hover
→ youtube-red-light success
→ youtube-white surface
→ youtube-near-black surface-elevated
→ youtube-charcoal text-primary
→ youtube-white text-secondary
→ youtube-gray text-tertiary
→ youtube-graphite warning
→ youtube-red-light warning-hover
→ youtube-red Rules (10 typed constraints)
error · 8 rules
colorChoice logo.mark.fill allowed youtube-red, youtube-white, youtube-ink forbidden youtube-red-dark, youtube-red-light, youtube-gray, youtube-graphite The YouTube play-button mark renders in pure red, reversed white on dark surfaces, or monochrome black for print. Hover and lighter reds are interactive-state values; gray tones are chrome — none are acceptable mark fills.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, inverted-without-variant YouTube's brand-resources program is strict about the play-button mark. The 2017 refresh removed the prior red-rectangle-with-white-wordmark composition in favor of a separated play-button mark + monochrome wordmark — consumers MUST NOT reintroduce gradient or drop-shadow treatments.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA YouTube Ink (#030303) on YouTube White gives ~21:1 and YouTube White on YouTube Black (#0F0F0F) gives ~19:1 — both directions clear WCAG 2.1 Level AA with substantial margin.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large YouTube Red on white reaches ~4:1 — AA for large text. On the dark canvas the same red against #0F0F0F gives ~5:1 — AA for normal text. This rule guards interactive use at button size.
contextRestriction roles.colors.primary forbiddenContexts body-text, secondary-link YouTube Red is reserved for the play-button mark, the subscribe-button affordance, and primary alerts. Using it inside body copy or for secondary links dilutes the signature accent and weakens the affordance the red carries throughout the product.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The bimodal canvas makes contrast checks the default verification on any new role pairing.
variantSelection logo use youtube-light when backgroundColorScheme="dark" On the dark YouTube canvas, the wordmark renders in white with the play-button mark in red. Do not invert the white wordmark to black on the dark canvas.
variantSelection logo use youtube-dark when backgroundColorScheme="light" On the light YouTube canvas, the wordmark renders in YouTube Ink with the play-button mark in red. Do not render the wordmark in white on a light surface.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 700 YouTube Sans and the Roboto system chrome use Regular (400), Medium (500), and Bold (700) on UI surfaces. Lighter cuts read as content metadata; heavier cuts are outside the documented product kit.
fontPairing typography.heading requires body minSizeRatio 1.4 YouTube's marketing headlines and surface section heads run materially larger than body and metadata text. A 1.4× minimum ratio preserves the display-to-prose hierarchy the product and marketing both depend on.
Provenance
- Source
- https://www.youtube.com/about/brand-resources/
- License
Proprietary — All Rights Reserved- Attribution
- Google LLC — YouTube, the YouTube wordmark, and the play-button mark are registered trademarks of Google LLC. The signature YouTube Red (#FF0000) is documented across YouTube's brand- resources page. YouTube Sans is the proprietary corporate typeface; this atom references Roboto (Google's open-source Apache-licensed corporate sans) as the documented fallback, matching the YouTube product surface which has historically used Roboto for system chrome.
- Imported
2026-05-18- Notes
- YouTube Sans (proprietary) is reserved for the wordmark and select marketing surfaces. Roboto (already in this catalog as roboto@1) is the documented public fallback and the long-standing chrome font for YouTube product surfaces. This atom references Roboto for both heading and body roles and notes YouTube Sans as the proprietary primary in provenance.