# About YouTube design system

> About YouTube design system measured from about.youtube: YouTube Display font, 7 color hex codes, type scale, spacing and a free DESIGN.md. Free.

Canonical page: https://sitepeel.dev/design-md/about.youtube/

About YouTube’s website (about.youtube) uses the YouTube Display font on a white background. Measured by Sitepeel on November 7, 2026.

## What font does About YouTube use?

About YouTube uses YouTube Display (weight 800) and Google Sans Text (weights 300 and 400) on about.youtube. Page titles are 140px at weight 800 (80px on phones) and body text is 16px. Measured on November 7, 2026.

- YouTube Display (weights 800)
- Google Sans Text (weights 300, 400)
- Roboto (weights 500)

## About YouTube colors: palette and hex codes

About YouTube’s main colors are #FFFFFF (white) for the background and #5F6368 (cool slate) for text. Measured on November 7, 2026.

- #FFFFFF: white
- #5F6368: cool slate
- #212121: charcoal
- #202124: charcoal
- #F2F2F2: mist

## What is About YouTube built with?

About YouTube’s website (about.youtube) is built with Lit and Google Fonts. Measured on November 7, 2026.

- JavaScript framework: Lit 4.0.5
- Analytics: Google Tag Manager
- Fonts & icons: Google Fonts

## Questions and answers

### What font does About YouTube use?

About YouTube’s website uses YouTube Display (weight 800) and Google Sans Text (weights 300 and 400). Page titles are 140px at weight 800 (80px on phones) and body text is 16px. Measured on November 7, 2026.

### What are the About YouTube colors and hex codes?

On about.youtube: #FFFFFF (white) for the background and #5F6368 (cool slate) for text. The color palette above lists all 7 colors with their hex codes and where each one is used.

### What is the About YouTube design system?

The design system on this page is about.youtube’s, as measured on November 7, 2026: YouTube Display type and 4px corners, written down as a DESIGN.md. It is not About YouTube’s own documentation.

### What is About YouTube built with?

About YouTube’s website (about.youtube) is built with Lit and Google Fonts. The full tech stack Sitepeel found: Lit, Google Tag Manager and Google Fonts. Measured on November 7, 2026.

### What is the About YouTube DESIGN.md?

A plain-text file with About YouTube’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this About YouTube’s official design system?

No. Sitepeel measured it from about.youtube’s public page on November 7, 2026. It is an independent analysis, not made or approved by About YouTube.

### Can I use About YouTube’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy About YouTube’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/about.youtube/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with About YouTube.

## The DESIGN.md file

```markdown
---
version: alpha
name: About YouTube
description: "Light monochrome interface measured from about.youtube: YouTube Display type with Google Sans Text, tonal surfaces and 4px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#5F6368"
  on-background: "#5F6368"
  on-surface-strong: "#212121"
  on-surface-variant: "#202124"
  surface-container-low: "#F2F2F2"
  primary: "#5F6368"
  on-primary: "#FFFFFF"
typography:
  headline-display:
    fontFamily: YouTube Display
    fontSize: 140px
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -0.009em
  body-md:
    fontFamily: Google Sans Text
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.006em
  body-lg:
    fontFamily: Google Sans Text
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0.006em
  label-md:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
  headline-display-mobile:
    fontFamily: YouTube Display
    fontSize: 80px
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -0.009em
rounded:
  sm: 4px
  md: 8px
  full: 9999px
spacing:
  xs: 2px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  gutter: 8px
  container: 1296px
components:
  link:
    textColor: "{colors.primary}"
---

# About YouTube Design System

## Overview

About YouTube describes itself as: “YouTube's mission is to give everyone a voice and show them the world. Learn about our brand, community, careers and more.” The interface is light, built on **White (#FFFFFF)** with **Cool Slate (#5F6368)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **YouTube Display** and **Google Sans Text**. Headlines run large with tight negative tracking; body text is 16px. The surface language is flat. Corners are mostly 4px.

Measured from [about.youtube](https://about.youtube/) on November 7, 2026 at 1440×900 and 390×844 from 113 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 7 roles.

- **White (#FFFFFF):** Page background, seen 2 times. Token `background`.
- **Cool Slate (#5F6368):** Primary text and headings, seen 32 times. Token `on-surface`.
- **Charcoal (#212121):** Headings and emphasis, seen 7 times. Token `on-surface-strong`.
- **Charcoal (#202124):** Secondary text, seen 5 times. Token `on-surface-variant`, CSS `--lb-primitive-color_gray-900`.
- **Mist (#F2F2F2):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Cool Slate (#5F6368):** Primary actions (the main text color; the palette is monochrome), seen 32 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.

## Typography

**YouTube Display**, **Google Sans Text** and **Roboto** share the interface. Fallback stack: `YouTube Display, Roboto, sans-serif`.

- **headline-display:** YouTube Display 140px at weight 800, line height 0.9, tracking -0.009em (80px on mobile). Page title (h1).
- **body-md:** Google Sans Text 16px at weight 400, line height 1.5, tracking 0.006em. Body text.
- **body-lg:** Google Sans Text 18px at weight 300, line height 1.5, tracking 0.006em. Lead paragraphs.
- **label-md:** Roboto 16px at weight 500, line height 1.5. Buttons, navigation and labels.

## Layout

Spacing is mostly on a 4px grid (87% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 2px, sm 8px, md 16px, lg 24px, xl 40px.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1296px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from tonal surface steps (#F2F2F2).

## Shapes

Most elements use 4px corners. Measured radii, most used first:

- **sm (4px):** 136 elements.
- **md (8px):** 16 elements.
- **full (9999px):** 12 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **link:** transparent fill, #5F6368 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page and lift surfaces in small steps: #F2F2F2.
- Do keep text in 3 levels: #5F6368, #212121, #202124.
- Do let contrast carry emphasis; primary actions use #5F6368 on #FFFFFF.
- Do set headlines in YouTube Display with tight tracking (-0.009em).
- Do reuse the measured spacing steps (8px, 16px, 24px).
- Do use 4px corners on most elements; larger surfaces also use 8px.
- Don't add drop shadows for depth; use tonal surfaces.
- Don't introduce new font families beyond YouTube Display, Google Sans Text and Roboto.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.2s, 0.3s.

- **Easing:** `ease`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/about.youtube/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```