# YouTube

> `youtube@1.0.0`

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** · `youtube@1.0.0` · 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** `(roboto@1.0.0)` | Apache-2.0 | sans-serif |
| `body` | **Roboto** `(roboto@1.0.0)` | Apache-2.0 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | 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: `youtube@1.0.0` from the encyclopedia.*