{
  "id": "youtube",
  "version": "1.0.0",
  "name": "YouTube",
  "description": "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.\n",
  "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.\n",
    "importedDate": "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.\n"
  },
  "tags": [
    "streaming",
    "video",
    "youtube",
    "google",
    "bimodal",
    "consumer-tech"
  ],
  "palette": {
    "ref": "youtube@1.0.0",
    "swatches": [
      {
        "id": "youtube-red",
        "name": "YouTube Red",
        "value": "#FF0000",
        "description": "Pure signature red — the play-button mark fill, the wordmark accent, and primary CTAs.",
        "aliases": []
      },
      {
        "id": "youtube-red-dark",
        "name": "YouTube Red Dark",
        "value": "#CC0000",
        "description": "Darker red used for hover/pressed states on the primary red.",
        "aliases": []
      },
      {
        "id": "youtube-red-light",
        "name": "YouTube Red Light",
        "value": "#FF4444",
        "description": "Lighter red used in marketing gradient surfaces and for emphasis on dark canvases.",
        "aliases": []
      },
      {
        "id": "youtube-black",
        "name": "YouTube Black",
        "value": "#0F0F0F",
        "description": "Canonical dark-mode canvas — the deployed youtube.com dark theme background.",
        "aliases": []
      },
      {
        "id": "youtube-near-black",
        "name": "YouTube Near-Black",
        "value": "#181818",
        "description": "Elevated surface on dark mode — rows, cards, and modal headers.",
        "aliases": []
      },
      {
        "id": "youtube-charcoal",
        "name": "YouTube Charcoal",
        "value": "#272727",
        "description": "Hovered surface and disabled-button background on dark mode.",
        "aliases": []
      },
      {
        "id": "youtube-white",
        "name": "YouTube White",
        "value": "#FFFFFF",
        "description": "Canonical light-mode canvas — the classic YouTube surface.",
        "aliases": []
      },
      {
        "id": "youtube-fog",
        "name": "YouTube Fog",
        "value": "#F2F2F2",
        "description": "Authored elevated surface on light mode.",
        "aliases": []
      },
      {
        "id": "youtube-ink",
        "name": "YouTube Ink",
        "value": "#030303",
        "description": "Body text on the light canvas.",
        "aliases": []
      },
      {
        "id": "youtube-graphite",
        "name": "YouTube Graphite",
        "value": "#606060",
        "description": "Secondary text and metadata across both modes.",
        "aliases": []
      },
      {
        "id": "youtube-gray",
        "name": "YouTube Gray",
        "value": "#AAAAAA",
        "description": "Tertiary text and inactive icons on the dark canvas.",
        "aliases": []
      },
      {
        "id": "youtube-divider",
        "name": "YouTube Divider",
        "value": "#E5E5E5",
        "description": "Authored hairline divider on light mode.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "youtube-white",
          "surface": "youtube-fog",
          "surface-elevated": "youtube-white",
          "text-primary": "youtube-ink",
          "text-secondary": "youtube-graphite",
          "text-tertiary": "youtube-gray",
          "primary": "youtube-red",
          "primary-hover": "youtube-red-dark",
          "accent": "youtube-red",
          "accent-hover": "youtube-red-dark",
          "warning": "youtube-red-light",
          "warning-hover": "youtube-red",
          "error": "youtube-red-dark",
          "success": "youtube-graphite"
        }
      },
      "dark": {
        "roles": {
          "background": "youtube-black",
          "surface": "youtube-near-black",
          "surface-elevated": "youtube-charcoal",
          "text-primary": "youtube-white",
          "text-secondary": "youtube-gray",
          "text-tertiary": "youtube-graphite",
          "primary": "youtube-red",
          "primary-hover": "youtube-red-light",
          "accent": "youtube-red",
          "accent-hover": "youtube-red-light",
          "warning": "youtube-red-light",
          "warning-hover": "youtube-red",
          "error": "youtube-red-light",
          "success": "youtube-white"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "roboto@1.0.0",
      "family": "Roboto",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Roboto",
        "url": "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "body",
      "ref": "roboto@1.0.0",
      "family": "Roboto",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Roboto",
        "url": "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "mono",
      "ref": "jetbrainsmono-nerdfont@1.0.0",
      "family": "JetBrainsMono Nerd Font",
      "classification": "monospace",
      "source": {
        "kind": "external",
        "family": "JetBrainsMono Nerd Font",
        "notes": "Nerd-Font-patched build of JetBrains Mono. Not available via Google Fonts. Download woff2/ttf files from the Nerd Fonts GitHub release and self-host, or install system-wide for terminal/IDE use.\n"
      },
      "fallbackStack": [
        "JetBrains Mono",
        "Fira Code",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "monospace"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "youtube-red",
      "on-identity": "youtube-white",
      "primary": "youtube-red",
      "primary-hover": "youtube-red-dark",
      "accent": "youtube-red",
      "accent-hover": "youtube-red-dark",
      "mark": "youtube-red",
      "text-primary-light": "youtube-ink",
      "text-primary-dark": "youtube-white",
      "text-secondary-light": "youtube-graphite",
      "text-secondary-dark": "youtube-gray",
      "background-light": "youtube-white",
      "background-dark": "youtube-black",
      "surface-light": "youtube-fog",
      "surface-dark": "youtube-near-black",
      "divider": "youtube-divider"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "colorChoice",
      "target": "logo.mark.fill",
      "severity": "error",
      "rationale": "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.\n",
      "allowed": [
        "youtube-red",
        "youtube-white",
        "youtube-ink"
      ],
      "forbidden": [
        "youtube-red-dark",
        "youtube-red-light",
        "youtube-gray",
        "youtube-graphite"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "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.\n",
      "treatments": [
        "stretched",
        "rotated",
        "recolored",
        "drop-shadow",
        "gradient-fill",
        "on-busy-photo",
        "inverted-without-variant"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "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.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "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.\n",
      "against": "background",
      "minRatio": 3,
      "standard": "WCAG-AA-large"
    },
    {
      "type": "enumMembership",
      "target": "typography.heading.fontWeight",
      "severity": "warning",
      "rationale": "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.\n",
      "allowed": [
        "400",
        "500",
        "700"
      ]
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "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.\n",
      "forbiddenContexts": [
        "body-text",
        "secondary-link"
      ]
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "error",
      "rationale": "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.\n",
      "standard": "WCAG-AA",
      "criterion": "1.4.3"
    },
    {
      "type": "variantSelection",
      "target": "logo",
      "severity": "error",
      "rationale": "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.\n",
      "when": {
        "backgroundColorScheme": "dark"
      },
      "use": "youtube-light"
    },
    {
      "type": "variantSelection",
      "target": "logo",
      "severity": "error",
      "rationale": "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.\n",
      "when": {
        "backgroundColorScheme": "light"
      },
      "use": "youtube-dark"
    },
    {
      "type": "fontPairing",
      "target": "typography.heading",
      "severity": "warning",
      "rationale": "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.\n",
      "requires": "body",
      "minSizeRatio": 1.4
    }
  ]
}