{
  "schema": "brand-kit@2",
  "palette": {
    "paper": "#FFFFFF",
    "surface": "#F0F0FF",
    "ink": "#000000",
    "ink_muted": "#868695",
    "accent": "#9146FF",
    "on_accent": "#FFFFFF",
    "accent_secondary": "#000000",
    "night": "#000000",
    "on_night": "#F0F0FF",
    "extras": [
      {
        "name": "Twitch Purple",
        "hex": "#9146FF",
        "role": "Core. The brand color: hero and first half of the homepage ground, every display headline on white and black, purple text links and CTAs on white and black.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)",
        "site_use": "Ground of the header and the whole first section (y 0-3268 at 1440); 192px headlines and text CTAs on the white and black sections (observed https://www.twitch.tv/p/en/about/ (2026-10-31))"
      },
      {
        "name": "Black",
        "hex": "#000000",
        "role": "Core. Second core color: body copy on purple and white, the last section and the footer ground, the active category, CTAs on purple.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)",
        "site_use": "Reach our crowd section and footer ground; lead copy on white panels; \"Find your thing\" headline on purple (observed https://www.twitch.tv/p/en/about/ (2026-10-31))"
      },
      {
        "name": "Ice",
        "hex": "#F0F0FF",
        "role": "Core. The light core color (a violet-tinted white): text on black, nav links on purple.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)",
        "site_use": "Nav links on purple, footer headings, links and legal line on black (observed https://www.twitch.tv/p/en/about/ (2026-10-31))"
      },
      {
        "name": "White",
        "hex": "#FFFFFF",
        "role": "Homepage ground for the middle section, the hero lead panel, 192px headlines on purple and lead copy on purple and black.",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "name": "Caption gray",
        "hex": "#868695",
        "role": "Vertical photo captions (the streamer handle, e.g. \"/name\"), 14px.",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "name": "Jiggle",
        "hex": "#FAB4FF",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Worm",
        "hex": "#FACDCD",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Isabelle",
        "hex": "#FEEE85",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Droid",
        "hex": "#BEFAE1",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Wipe-Out",
        "hex": "#00C8AF",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Smoke",
        "hex": "#D2D2E6",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Widow",
        "hex": "#BEAAFF",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Peach",
        "hex": "#FC6675",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Pac",
        "hex": "#FFCA5F",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Mudkip",
        "hex": "#57BEE6",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Sonic",
        "hex": "#0014A5",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Dragon",
        "hex": "#8205B4",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Cuddle",
        "hex": "#FA1ED2",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Bandit",
        "hex": "#FF6905",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Lightning",
        "hex": "#FAFA19",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "K.O.",
        "hex": "#BEFF00",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Mega",
        "hex": "#00FAFA",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Nights",
        "hex": "#41145F",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Osu",
        "hex": "#BE0078",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Red Alert",
        "hex": "#FA2828",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Egg",
        "hex": "#00FA05",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Legend",
        "hex": "#69FFC3",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "name": "Zero",
        "hex": "#1E69FF",
        "role": "Expanded palette: accents, gradients with Twitch Purple, illustration and campaign color. Not used on the About homepage.",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      }
    ]
  },
  "typography": {
    "display": {
      "family": "Figtree",
      "steal_family": "Figtree",
      "weight": 500,
      "tracking": -0.04,
      "line_height": 0.92,
      "fallback_stack": "Figtree, \"Helvetica Neue\", Arial, sans-serif",
      "real": "Roobert (Displaay Type Foundry; Twitch serves a custom cut, \"RoobertTW\"). Commercial licence.",
      "stand_in": true,
      "prov": "published",
      "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)",
      "site": {
        "weight": 400,
        "size_px": "192 desktop (13.33vw) / 58.5 phone (15vw)",
        "line_height": "0.92 desktop (176.64px at 192), 1.0 phone",
        "tracking": "-0.04em (-7.68px at 192, -2.34px at 58.5)",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      }
    },
    "body": {
      "family": "Figtree",
      "steal_family": "Figtree",
      "weight": 600,
      "tracking": -0.046,
      "line_height": 1,
      "fallback_stack": "Figtree, \"Helvetica Neue\", Arial, sans-serif",
      "real": "Roobert SemiBold 600",
      "stand_in": true,
      "prov": "published",
      "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)",
      "site": {
        "weight": 600,
        "size_px": "48 desktop (3.33vw) / 19.5 phone (5vw) for lead copy and text CTAs; 18 nav; 24 footer links",
        "line_height": "1.0 desktop (48px), 1.06 phone",
        "tracking": "-0.04em on lead copy (-1.92px at 48); normal on nav and footer",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      }
    },
    "calibration": "Rendered on 2026-10-31 with canvas measureText against the real Roobert loaded on twitch.tv/p/en/about. Display line \"We saved you a\" at 192px, -7.68px tracking: Roobert 400 = 1225px wide, x-height 0.504em, cap 0.700em, ink 47. Figtree 400 = 1232px, ink 40 (too light); Figtree 500 = 1240px (+1.2%), ink 46, x-height 0.500, cap 0.700: chosen. Body line \"Twitch is where millions of people come together live every day\" at 48px 600: Roobert = 1247px; Figtree 600 at -1.92px = 1265px (+1.4%), at -2.2px = 1248px: use -2.2px (-0.046em). Other candidates were further off on width or x-height: Outfit (x-height 0.475), Hanken Grotesk (ink 39), Manrope (x-height 0.54), Inter (1326px, +8%), Urbanist (ink 38)."
  },
  "style": {
    "button_shape": "none",
    "button_note": "The About homepage has no boxed buttons: every CTA is a 48px SemiBold text link with a small north-east arrow, in black on purple and Twitch Purple on white or black.",
    "corners": "square: 0 radius on photos, video and panels",
    "linework": "none; flat color blocks and photography",
    "motion": "Headline words and emotes jump in (450ms), CTA arrows slide out north-east on hover (100ms out, 200ms in), category rows underline on hover (300ms ease-in-out)",
    "prov": "observed",
    "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
  },
  "voice": {
    "tone": [
      "Playful",
      "Community-first",
      "Irreverent",
      "Direct"
    ],
    "notes": [
      "Talks like the community talks: gaming references, emotes and in-jokes, with a wink at itself (\"our (beloved) madness\").",
      "Short declarative lines and fragments for emphasis: \"There is no Twitch without purple. Period.\"",
      "Credits the community for the brand: creators and chat come first, Twitch second.",
      "Homepage voice is plainer than the guide: one invitation per section, a two-to-three-word headline and a one-sentence pitch to a named audience (fans, streamers, developers, advertisers).",
      "Homepage leads open with a short punchy fragment aimed at the reader (\"Unabashed fans, welcome home.\", \"Come be their hero.\"), then one plain sentence. Keep that cheek; don't explain."
    ],
    "rules": [
      {
        "id": "headline-case",
        "kind": "headline_case",
        "value": "sentence",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "id": "person",
        "kind": "person",
        "value": "we_you",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "id": "exclamations",
        "kind": "exclamations",
        "value": "never",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)",
        "why": "No exclamation marks anywhere on the About homepage or the guide copy."
      },
      {
        "id": "spelling",
        "kind": "spelling",
        "value": "en-US",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "id": "headline-length",
        "kind": "guidance",
        "text": "Section headlines are two to four words and set on two or three lines at 192px (\"Find your thing\", \"Reach our crowd\")",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "id": "no-period-headline",
        "kind": "guidance",
        "text": "No period at the end of a headline",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "id": "contractions",
        "kind": "guidance",
        "text": "Use contractions (we've, we'll, it's, you're)",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "id": "emote-inline",
        "kind": "guidance",
        "text": "Emotes are part of the lexicon: set one inline at the end of a headline or a lead sentence, at the text size, never as decoration in a corner",
        "prov": "published",
        "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)"
      },
      {
        "id": "cta-arrow",
        "kind": "guidance",
        "text": "CTAs are a short verb phrase with a north-east arrow (\"See our lineup\", \"Build with us\"), never a boxed button",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "id": "adjective",
        "kind": "guidance",
        "text": "Use the TWITCH mark as an adjective, never a noun or verb, when writing about the brand from outside",
        "prov": "published",
        "source": "https://legal.twitch.com/en/legal/trademark/"
      },
      {
        "id": "max-words",
        "kind": "max_sentence_words",
        "value": 25,
        "prov": "inferred",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)",
        "why": "Longest homepage sentence is 21 words; guide sentences run 10-25."
      }
    ],
    "approved": {
      "phrases": [
        "community",
        "streamers",
        "creators",
        "chat",
        "live",
        "together"
      ],
      "words": [
        "community",
        "creators",
        "streamers",
        "chat",
        "live",
        "together",
        "emotes"
      ]
    },
    "banned": [
      "users (say viewers, fans, streamers or creators)",
      "content consumers",
      "exclamation marks"
    ],
    "is_not": [
      [
        "Playful",
        "Childish"
      ],
      [
        "Irreverent",
        "Mean"
      ],
      [
        "Community-first",
        "Corporate"
      ],
      [
        "Direct",
        "Hard-sell"
      ]
    ],
    "prov": "inferred",
    "source": "brand.twitch.tv guideline site (Twitch, archived 2024-05-01)",
    "why": "Twitch publishes no named voice principles; tone words are our reading of the guide copy and the homepage. Rules marked observed are counted on the homepage."
  },
  "spec": {
    "source": "https://www.twitch.tv/p/en/about/",
    "how": "computed styles and bounding boxes with Playwright at 1440x900 and 390x844 after scrolling the page once, plus the full-page screenshots, 2026-10-31",
    "provenance": "observed",
    "motion": [
      {
        "name": "text-jump",
        "duration_ms": 450,
        "use": "Headline words and inline emotes jump up into place once (translateY 5.2vw to 0)",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/company-assets/css/about.css"
      },
      {
        "name": "label-rise",
        "easing": "cubic-bezier(0.87, 0, 0.04, 1)",
        "duration_ms": 300,
        "use": "Labels and captions rising into view",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/company-assets/css/about.css"
      },
      {
        "name": "cta-color",
        "easing": "ease-in-out",
        "duration_ms": 150,
        "use": "Text CTA and category color change on hover",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/company-assets/css/about.css"
      },
      {
        "name": "underline-grow",
        "easing": "ease-in-out",
        "duration_ms": 300,
        "use": "Category underline grows to full width on hover",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/company-assets/css/about.css"
      },
      {
        "name": "arrow-swap",
        "easing": "ease-in",
        "duration_ms": 200,
        "use": "CTA arrow exits north-east in 100ms, a new one enters in 200ms",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/company-assets/css/about.css"
      }
    ],
    "icons": {
      "grid": "not published",
      "sizes": [
        {
          "name": "cta-arrow",
          "px": 24,
          "use": "north-east arrow after a 48px text CTA (0.5em)"
        }
      ],
      "stroke": "solid block arrow: two 5.3-unit bars and a 7.1-unit diagonal on a 35-unit box",
      "color": "currentColor: black on purple, purple on white and black",
      "prov": "observed",
      "source": "https://www.twitch.tv/p/company-assets/css/about.css"
    },
    "signature": [
      {
        "id": "purple-flood",
        "name": "Purple flood",
        "where": "the top of every brand surface: the homepage is Twitch Purple from the header through the first three bands",
        "spec": "a full-bleed #9146FF ground under the header and hero, with white display type and black body copy on it; then hand over to white and finally black",
        "once": "one purple stretch per page, at the top",
        "example": {
          "ground": "accent",
          "text": "We saved you a seat in chat",
          "ink": "#FFFFFF"
        },
        "dont": "tint the purple, lighten it to lavender, or set it as a small accent only",
        "prov": "published",
        "source": "https://web.archive.org/web/20240501000000/https://brand.twitch.tv/"
      },
      {
        "id": "giant-roobert",
        "name": "Giant two-line headline",
        "where": "every section opener",
        "spec": "192px Roobert Regular (stand-in Figtree 500) at -0.04em and 0.92 line height, two or three lines, left on the 120px margin or at the page center line (x 720)",
        "example": {
          "ground": "paper",
          "text": "Share your dream",
          "ink": "#9146FF"
        },
        "dont": "bold the display type or set it below 128px at 1440",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "id": "inline-emote",
        "name": "Emotes as punctuation",
        "where": "end of the hero headline (154px) and inside lead sentences (38px)",
        "spec": "a real Twitch emote set inline at the text size, as a word",
        "once": "one emote per headline or paragraph",
        "example": {
          "ground": "accent",
          "text": "Come be their hero."
        },
        "dont": "scatter emotes as stickers or use them as icons",
        "prov": "published",
        "source": "https://web.archive.org/web/20240501000000/https://brand.twitch.tv/"
      },
      {
        "id": "edge-figures",
        "name": "Edge-flush stream figures with vertical handles",
        "where": "photo and video slots",
        "spec": "square-cornered stream stills flush to the page edge, overlapping headlines or section boundaries, each with a 14px gray \"/handle\" caption rotated along its edge",
        "dont": "round the corners, frame the images in cards, or caption them with a title",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "id": "extruded-wordmark",
        "name": "Extruded wordmark and the Glitch",
        "where": "header (wordmark) and footer (Glitch)",
        "spec": "blocky wordmark with a game-style extrusion; the Glitch speech-bubble mark as the short form",
        "dont": "redraw, recolor or restyle either mark",
        "prov": "published",
        "source": "https://web.archive.org/web/20240501000000/https://brand.twitch.tv/"
      }
    ],
    "page": {
      "source": "https://www.twitch.tv/p/en/about/",
      "date": "2026-10-31",
      "prov": "observed",
      "voices": "The homepage voice is the plain one: a two-to-four-word headline and one sentence per audience. The guide's campaign voice (gaming jokes, fragments) is for brand moments. A landing page follows the homepage voice.",
      "grid": "12 columns of 120px across 1440 with no gutter; content runs from column 2 (x 120) to column 11 (x 1320). Lead copy blocks are 4 columns (480px) starting at x 720 or x 840. At 390 the same 12 columns are 32.5px; margin 33px, copy 10 columns (325px).",
      "nav": {
        "summary": "No bar: the header sits on the Twitch Purple ground of the hero. Wordmark left, five centred text links, \"twitch.tv\" with an arrow right.",
        "ground": "#9146FF (same as the hero; no border, no shadow)",
        "height": "204px band to the headline top at 1440 (logo y 56-91, links y 63-85); 135px at 390",
        "border": "none",
        "logo": "the extruded Twitch wordmark, white letters with black extrusion (twitch-wordmark-white-black-extrusion.svg), 105x35 at x 140, y 56",
        "links": "5 links \"About\", \"Stream\", \"Watch\", \"Company\", \"Blog\": 18px/20.9px Roobert 600, tracking normal, #F0F0FF; current page (\"About\") #000000. Left edges x 496, 592, 696, 795, 919 (45px gaps); text top y 63",
        "actions": "\"twitch.tv\" plus a 9px north-east arrow in the link color #F0F0FF (same shape as the CTA arrows, drawn inline in currentColor), right-aligned ending at x 1300, same 18px/600 #F0F0FF. No button, no search, no sign-in.",
        "container": "x 140-1300 (1160px); the rest of the page uses x 120",
        "sticky": "not sticky; scrolls away",
        "phone": "logo 105x35 at x 38, y 40; a two-bar hamburger (24px wide, white) at right, vertically centred on the logo; header 135px tall; menu opens full-screen purple with 50px/600 links, current one black; closed state only matters for the build (the menu is not shown at rest)"
      },
      "hero": {
        "summary": "Purple ground. A giant two-line white headline (192px Roobert Regular) ending in an inline emote, then a 16:9 stream video flush to the left edge with a white text panel laid over its top right.",
        "desktop": {
          "headline": "x 120, top y 204, 192px/176.64px display face (Figtree 500; Roobert 400 on the live page), -7.68px tracking, #FFFFFF, 2 lines: \"We saved you a\" / \"seat in chat\" + emote. Line 1 runs to x ~1365 (nearly the right edge); no max width, it breaks by words",
          "emote": "hi.png 154x154 inline after the last word of line 2, x 1082, y 391 (its bottom sits on the baseline, ~43px gap after the word)",
          "gap": "72px padding below the headline block (block ends y 629); panel top at y 738",
          "media": "video-poster.jpg (stream with overlay) at x 0, y 748, 1320x743 (16:9), no radius, flush to the page left edge; right 120px is purple",
          "panel": "white #FFFFFF panel x 720-1440 (720 wide, flush to the right edge), y 738-1264 (526 tall), on top of the video (covers the video from x 720 to 1320 for its top 516px)",
          "panel_text": "lead 48px/48px weight 600, -1.92px tracking (-2.2px with Figtree), #000000, x 840, top y 861, max width 480px, 6 lines breaking after \"millions\", \"come\", \"day\", \"and\", \"own\" (the live lead opens \"Twitch is where millions of people come together live every day\"; messaging.boilerplate paraphrases the rest)",
          "below": "purple gap from y 1488 (video bottom) to the category list at y 1613",
          "optical": "Figtree caps sit ~8px higher than Roobert in the same 176.64px line box: add 8px top offset to every 192px headline (so the hero headline block starts at y 212); 3px at 58.5px",
          "z_order": "panel above video"
        },
        "phone": {
          "order": "header, headline (3 lines + emote), white panel, video",
          "alignment": "left, margin 33px",
          "sizes": "headline 58.5px/58.5px -2.34px white, x 33, y 135-311, 3 lines \"We saved / you a seat in / chat\" + 47px emote; white panel x 33-390 (flush right), y 348-494, text box x 65-358 (32px left padding, 293px measure), 19.5px/20.7px 600 black, 4 lines breaking after \"people\", \"to\", \"own\"; video poster x 0, y 478, 358x201, overlapping the panel bottom by 16px",
          "z_order": "the white panel sits ABOVE the video (panel z 2 over video z 1): the video top 16px hides under the panel"
        },
        "at_rest": {
          "headline": "all words visible (they jump in once on load, 450ms: animation only)",
          "emote": "resting at its baseline position",
          "video": "show the poster still (video-poster.jpg); it autoplays muted on the live page"
        },
        "type": "display-xl for the headline; lead for the panel copy",
        "cta": "none in the hero",
        "proof": "none in the hero"
      },
      "sections": [
        {
          "name": "Category list (browse)",
          "summary": "Eight category names stacked as a 96px list on purple. Each row continues sideways as a faint marquee of the other names in 13% black.",
          "ground": "#9146FF",
          "desktop": {
            "band": "y 1613-2381 (8 rows x 96px), no padding",
            "rows": "\"Games\", \"Music\", \"Talk Shows\", \"Sports\", \"Travel & Outdoors\", \"Just Chatting\", \"Food & Drink\", \"Special Events\": 96px/96px weight 600, -3.84px tracking, left edge x 120, row pitch 96px",
            "colors": "row 1 \"Games\" #000000 with a 9px #000000 underline bar (0.625vw) directly under it, full word width; rows 2-8 #FFFFFF, no underline",
            "ghost_marquee": "after each row's word, 24px gap, then the following category names in order, same size, color rgba(0,0,0,0.13), running off the right edge; the same ghost text also continues to the left of x 120 (cut by the page edge). Each row's ghost sequence starts with the next category, so the words do not line up vertically",
            "media": "no visible image at rest (a 800x450 preview video appears only on hover: animation only)"
          },
          "phone": {
            "band": "y 713-1019",
            "rows": "same 8 names, 37px/38.5px pitch weight 600, -1.48px tracking, x 33, all #FFFFFF with a white 3px underline under every row",
            "ghost_marquee": "same 13% black continuation both sides"
          },
          "anatomy": [
            "The list is links; no heading, no intro copy",
            "Ghost words are aria-hidden decoration: rgba(0,0,0,0.13) on #9146FF"
          ],
          "components": [
            "category_row"
          ]
        },
        {
          "name": "Watch: Find your thing",
          "summary": "Still on purple. A 192px black headline at left, a white lead and black text CTA in the right third, and a tall portrait photo that overlaps the headline's second line and the purple-to-white boundary.",
          "ground": "#9146FF to y 3268, then the white section starts under the photo",
          "desktop": {
            "band": "y 2381-3268, padding-top 84px",
            "headline": "\"Find your\" / \"thing\": 192px/176.64px display (Figtree 500), #000000, x 120, top y 2465, 2 lines",
            "photo": "purpleToWhiteSection.jpg 480x683 at x 130, y 2613 (covers most of the headline's second line \"thing\"; the line shows only a sliver at its left), bottom y 3296 overhangs the white section by 28px",
            "caption": "\"/djarii\" rotated -90deg (reads bottom to top), 14px 600 #868695, 1em left of the photo (x ~109), its start at the photo bottom-left corner",
            "lead": "48px/48px 600 #FFFFFF, x 840, top y 2764, width 480, 6 lines, ending with an inline 38px thumbsup.png emote",
            "cta": "\"See our lineup\" + arrow, 48px 600 #000000, x 840, y 3100; one word space plus 0.1em between the last letter and the arrow (≈17px), arrow bottom on the baseline",
            "lead_copy": "Opens \"Unabashed fans, welcome home.\" then invites fans to watch what they love, connect with streamers and chat with communities; ends with the thumbs-up emote. 6 lines at 1440 breaking after \"fans,\", \"Watch\", \"connect\", \"and\", \"of\""
          },
          "phone": {
            "headline": "58.5px #000000 x 33, y 1052, 2 lines",
            "lead": "19.5px/20.7px 600 #FFFFFF y 1189, 4 lines + emote",
            "cta": "19.5px 600 #000000 y 1291",
            "photo": "purpleToWhiteSection.jpg 260x370 at x 130 (flush right), y 1521, straddling the purple-to-white boundary at y 1578",
            "caption": "8px #868695 vertical"
          },
          "anatomy": [
            "Text column is the 4-column block x 840-1320 (480px)",
            "The photo sits above the headline in z-order"
          ],
          "components": [
            "text_cta_on_purple",
            "figure_caption"
          ]
        },
        {
          "name": "Stream: Share your dream",
          "summary": "White section. The headline sits in the right half; three stream images are scattered at the left and right edges, each with a vertical handle caption.",
          "ground": "#FFFFFF (section y 3268-5860 holds this and the next section)",
          "desktop": {
            "headline": "\"Share\" / \"your\" / \"dream\": 192px/176.64px display (Figtree 500) #9146FF, x 720, top y 3352, 3 lines",
            "image_1": "twoItemLockup-img.jpg (streamer at desk) 427x240 at x 0, y 3755, flush left; caption \"/FemSteph\" rotated +90deg (reads top to bottom), 1em right of the image (x ~432), starting at its top-right corner",
            "lead": "48px 600 #000000, x 720, top y 3954, width 480, 5 lines",
            "cta": "\"How to start\" + arrow, 48px 600 #9146FF, x 720, y 4242; one word space plus 0.1em between the last letter and the arrow (≈17px), arrow bottom on the baseline",
            "image_2": "offset-single-image.jpg 360x202 at x 1080, y 4120, flush right, overlapping the end of the lead copy; caption \"/myth\" rotated -90deg (reads bottom to top), 1em left of it (x ~1059), ending at its top-left corner",
            "image_3": "twoItemLockup-vid-poster.jpg (gameplay with facecam) 747x420 at x 0, y 4264, flush left; caption \"/Fitzyhere\" rotated +90deg (reads top to bottom), 1em right of it (x ~754), starting at its top-right corner",
            "space": "empty white from y 4684 to the next headline at y 5080",
            "lead_copy": "Opens \"Your creative content thrives here.\" then \"Bring your passions; we'll help you build a community around them.\" 5 lines at 1440 breaking after \"content\", \"your\", \"you\", \"community\""
          },
          "phone": {
            "headline": "58.5px #9146FF x 33, y 1757, 2 lines \"Share your\" / \"dream\"",
            "image_1": "twoItemLockup-img.jpg 195x110 at x 0, y 1816 (over the headline's second line)",
            "lead": "19.5px 600 #000000 y 1893, 3 lines",
            "cta": "19.5px #9146FF y 1975",
            "image_3": "twoItemLockup-vid-poster.jpg 359x202 at x 0, y 2052",
            "image_2": "hidden on phone"
          },
          "anatomy": [
            "Images are flush to the page edges, never inside the 120px margin",
            "Captions are the streamer's channel handle with a leading slash"
          ],
          "components": [
            "text_cta_on_light",
            "figure_caption"
          ]
        },
        {
          "name": "Develop: Build new stuff",
          "summary": "White. A 192px purple headline at left, a large screenshot below it flush left with a small UI inset overhanging into the black section, lead and purple CTA at right.",
          "ground": "#FFFFFF",
          "desktop": {
            "headline": "\"Build new\" / \"stuff\": 192px display (Figtree 500) #9146FF, x 120, top y 5080, 2 lines (the second line is partly covered by the image)",
            "image": "pokemon.jpg 720x482 at x 0, y 5317, flush left",
            "inset": "pokemon-inset.png (leaderboard UI) 240x278 at x 115, y 5555, on top of the image; its bottom (y 5833) stops 27px above the black section. No overhang",
            "caption": "\"Pokemon Badge Collector\" rotated +90deg (reads top to bottom), 14px #868695, 1em right of the image (x ~727), starting at its top-right corner",
            "lead": "48px 600 #000000, x 840, top y 5356, width 480, 6 lines with an inline 38px vohiyo.png emote mid-sentence",
            "cta": "\"Build with us\" + arrow, 48px 600 #9146FF, x 840, y 5692; one word space plus 0.1em between the last letter and the arrow (≈17px), arrow bottom on the baseline",
            "lead_copy": "Opens \"Twitch is a developer's dreamland.\" then says countless communities need custom tools built just for them, emote, \"Come be their hero.\" 6 lines at 1440 breaking after \"Countless\", \"need\", \"just\", \"Come be\""
          },
          "phone": {
            "headline": "58.5px #9146FF x 33, y 2408, 2 lines",
            "lead": "19.5px 600 #000000 y 2545, 4 lines",
            "cta": "19.5px #9146FF y 2645",
            "image": "pokemon.jpg 361x242 at x 29, y 2973 with the inset 128x148 at x 66, y 3127"
          },
          "anatomy": [
            "Same text column as Watch: x 840-1320"
          ],
          "components": [
            "text_cta_on_light",
            "figure_caption"
          ]
        },
        {
          "name": "Advertise: Reach our crowd",
          "summary": "Black section: a 192px purple headline at left, white lead and a purple CTA under it. The right half is empty black at rest.",
          "ground": "#000000",
          "desktop": {
            "band": "y 5860-7281 (1421 tall): the headline top is 372px below the band top; CTA bottom y 7042, then 239px of black to the footer",
            "headline": "\"Reach our\" / \"crowd\": 192px display (Figtree 500) #9146FF, x 120, top y 6232, 2 lines",
            "lead": "48px 600 #FFFFFF, x 120, top y 6658, width 480, 6 lines",
            "cta": "\"Advertise with us\" + arrow, 48px 600 #9146FF, x 120, y 6994; one word space plus 0.1em between the last letter and the arrow (≈17px), arrow bottom on the baseline",
            "right_half": "empty black at rest in our capture (crowd.jpg reveals on scroll at x 677, y 6915, 767x511: animation only; leave it out)",
            "lead_copy": "Opens \"Ready to build real connections with a huge, engaged audience?\" then \"We've got a few million friends we'd like you to meet.\" 6 lines at 1440 breaking after \"real\", \"a\", \"huge, engaged\", \"got a\", \"we'd\""
          },
          "phone": {
            "band": "y 2895-3668: headline top 218px below the band top",
            "headline": "58.5px #9146FF y 3113",
            "lead": "19.5px #FFFFFF y 3249",
            "cta": "19.5px #9146FF y 3352"
          },
          "anatomy": [
            "Text column moves to the left (x 120-600) in this section"
          ],
          "components": [
            "text_cta_on_dark"
          ]
        }
      ],
      "footer": {
        "summary": "Black, continuous with the section above (no rule between). Glitch logo at left, six link columns, a legal row and the copyright at the bottom.",
        "ground": "#000000",
        "anatomy": [
          "Band y 7281-8070 (789 tall): the Glitch and the column headings start 105px below the band top; legal row 649px below; 135px of black under it",
          "Glitch logomark (glitch-white.svg) 48x53 at x 120, y 7386",
          "Six columns at x 360, 524, 688, 852, 1016, 1180 (164px pitch, 140px wide); headings at y 7386 in 14px/20px 600 #F0F0FF",
          "Links 24px/36px 600 #F0F0FF, first at y 7424, 48px pitch; \"Creator Camp\" wraps to 2 lines",
          "Communities: Stream, Watch, Develop, Advertise, twitch.tv (with a north-east arrow)",
          "Company: Jobs, Merch, Brand, TwitchCon, Meetups",
          "Newsroom: News, Press",
          "Products: Bits, Subs, Turbo, Prime, Extensions, Gift Card",
          "Resources: Creator Camp, Legal, Help Center, Security",
          "Connect: Twitter, Facebook, Instagram",
          "Legal row at y 7921: Terms of Service, Privacy Policy, Ad Choices, Cookie Policy, Partners, Affiliates: 12px/17px 600 #F0F0FF, 24px gaps, starting x 120",
          "Copyright \"© 2024 Twitch Interactive, Inc.\" 12px 600 #F0F0FF right-aligned to x 1320 on the legal row (the live page still prints 2024)"
        ],
        "phone": "glitch 48x53 at x 33; columns in a 3-up grid (x 33, 157, 281): Communities, Company, Newsroom, then Products, Resources, Connect; headings 12.4px, links 16.7px/25px; legal links in 2 columns (12px); copyright last line"
      },
      "dark_ground": {
        "secondary_button": "none (text CTAs only)",
        "link": "#9146FF text CTA + arrow on black",
        "muted_text": "#F0F0FF (Ice) for footer text; lead copy is #FFFFFF",
        "hairline": "none",
        "logo_variant": "white Glitch (footer); on purple the wordmark has white letters and a black extrusion"
      },
      "z_order": "Everywhere: photos and video stills sit above headlines and lead copy they overlap (the overlaps are the design and are visible at rest); the white hero panel sits above the hero video.",
      "phone_overlaps": "The phone overlaps in the coordinates are real at rest and should be reproduced: the Find portrait (y 1521-1891) covers the right half of the \"Share your\" headline; the Share image 1 (y 1816-1926) covers the start of the Share lead. Do not move them to avoid the text."
    },
    "bands": [
      {
        "label": "Header on purple",
        "ground": "#9146FF",
        "content": "wordmark, 5 links, twitch.tv link",
        "desktop": "0-204",
        "phone": "0-135, hamburger",
        "anatomy": [
          "No bar, no border"
        ]
      },
      {
        "label": "Hero headline",
        "ground": "#9146FF",
        "content": "2-line 192px white headline + 154px emote",
        "desktop": "y 204-629",
        "phone": "y 135-311, 3 lines",
        "anatomy": [
          "Starts right under the header"
        ]
      },
      {
        "label": "Hero video + white lead panel",
        "ground": "#9146FF",
        "content": "video poster flush left 1320x743; white 720x526 panel over its top right with 6-line 48px black lead",
        "desktop": "y 738-1488",
        "phone": "panel y 348-494 then video y 478-679",
        "anatomy": [
          "Panel is flush to the right edge"
        ]
      },
      {
        "label": "Category list",
        "ground": "#9146FF",
        "content": "8 rows of 96px category names, ghost marquee",
        "desktop": "y 1613-2381",
        "phone": "y 713-1019",
        "anatomy": [
          "Row 1 black with 9px underline"
        ]
      },
      {
        "label": "Find your thing",
        "ground": "#9146FF",
        "content": "black 192px headline, portrait photo overlapping, white lead, black CTA",
        "desktop": "y 2381-3268",
        "phone": "y 1020-1578",
        "anatomy": [
          "Photo crosses into the white section"
        ]
      },
      {
        "label": "Share your dream",
        "ground": "paper",
        "content": "purple headline at x 720, 3 edge images with vertical captions, black lead, purple CTA",
        "desktop": "y 3268-4684",
        "phone": "y 1578-2260",
        "anatomy": [
          "Images flush to page edges"
        ]
      },
      {
        "label": "Build new stuff",
        "ground": "paper",
        "content": "purple headline left, screenshot flush left with inset, lead + purple CTA right",
        "desktop": "y 5080-5860",
        "phone": "y 2408-2895",
        "anatomy": [
          "Inset ends 27px above the black section"
        ]
      },
      {
        "label": "Reach our crowd",
        "ground": "night",
        "content": "purple headline, white lead, purple CTA, all left",
        "desktop": "y 5860-7281",
        "phone": "y 2895-3668",
        "anatomy": [
          "Right half empty at rest"
        ]
      },
      {
        "label": "Footer",
        "ground": "night",
        "content": "Glitch, 6 link columns, legal row, copyright",
        "desktop": "y 7281-8070",
        "phone": "y 3699-4401",
        "anatomy": [
          "Ice text"
        ]
      }
    ],
    "layout": {
      "page_margin": {
        "desktop": 120,
        "phone": 33
      },
      "section_padding": {
        "desktop": 84,
        "phone": 33
      },
      "container_max": 1200,
      "hero_text_max": 1320,
      "columns": 12,
      "columns_phone": 12,
      "gutter": 0,
      "gutter_phone": 0,
      "nav_height": 204,
      "note": "Measured on the About homepage at 1440 and 390. Sizes are viewport-relative on the live page (display 13.33vw at 1440, 15vw at 390; lead 3.33vw / 5vw): build fixed px at 1440 and the phone values below 750px. Section padding varies by section; use the absolute y positions in the page anatomy, not a padding token. Nav height is 204px at 1440 and 135px at 390.",
      "prov": "observed",
      "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
    },
    "type": [
      {
        "role": "Display headline (every section)",
        "id": "display-xl",
        "face": "display",
        "size": {
          "desktop": 192,
          "phone": 58.5
        },
        "line_height": 0.92,
        "tracking_px": -7.68,
        "tracking_phone_px": -2.34,
        "weight": 500,
        "note": "real Roobert 400; phone line-height 1.0",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "role": "Category list row",
        "id": "list-xl",
        "face": "body",
        "size": {
          "desktop": 96,
          "phone": 37
        },
        "line_height": 1,
        "tracking_px": -3.84,
        "tracking_phone_px": -1.48,
        "weight": 600,
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "role": "Lead copy and text CTA",
        "id": "lead",
        "face": "body",
        "size": {
          "desktop": 48,
          "phone": 19.5
        },
        "line_height": 1,
        "tracking_px": -2.2,
        "tracking_phone_px": -0.45,
        "weight": 600,
        "note": "real Roobert 600 at -1.92px; -2.2px matches its width in Figtree; phone line-height 1.06",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "role": "Footer link",
        "id": "footer-link",
        "face": "body",
        "size": {
          "desktop": 24,
          "phone": 16.7
        },
        "line_height": 1.5,
        "tracking_px": 0,
        "weight": 600,
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "role": "Nav link",
        "id": "nav",
        "face": "body",
        "size": {
          "desktop": 18,
          "phone": 18
        },
        "line_height": 1.16,
        "tracking_px": 0,
        "weight": 600,
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "role": "Footer heading",
        "id": "footer-head",
        "face": "body",
        "size": {
          "desktop": 14,
          "phone": 12.4
        },
        "line_height": 1.42,
        "tracking_px": 0,
        "weight": 600,
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "role": "Photo caption (vertical)",
        "id": "caption",
        "face": "body",
        "size": {
          "desktop": 14,
          "phone": 8
        },
        "line_height": 1,
        "tracking_px": 0,
        "weight": 600,
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      },
      {
        "role": "Legal and copyright",
        "id": "legal",
        "face": "body",
        "size": {
          "desktop": 12,
          "phone": 12
        },
        "line_height": 1.42,
        "tracking_px": 0,
        "weight": 600,
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      }
    ],
    "components": {
      "text_cta_on_purple": {
        "text": "#000000",
        "fill": "none",
        "radius": 0,
        "font_size": 48,
        "weight": 600,
        "face": "body",
        "arrow": "north-east arrow 0.5em square (24px at 48px), margin-left 0.1em, bottom-aligned to the baseline (arrow-ne-black.svg)",
        "example": "\"See our lineup\" + arrow",
        "note": "No box, no underline. Sits 1em below the lead (48px)",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)",
        "states": {
          "hover": {
            "measured": {
              "color": "the lead text color (white on purple)",
              "arrow": "slides out to the north-east (100ms ease-in) and a fresh arrow slides in from the south-west (200ms ease-in)"
            },
            "css": {
              "color": "#FFFFFF",
              "transition": "color 150ms ease-in-out"
            },
            "prov": "observed",
            "source": "https://www.twitch.tv/p/company-assets/css/about.css"
          }
        },
        "gap": "a word space + 0.1em (≈17px at 48px) before the arrow"
      },
      "text_cta_on_light": {
        "text": "#9146FF",
        "fill": "none",
        "radius": 0,
        "font_size": 48,
        "weight": 600,
        "face": "body",
        "arrow": "arrow-ne-purple.svg, 24px",
        "example": "\"How to start\" + arrow",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)",
        "states": {
          "hover": {
            "measured": {
              "color": "#000000 (the lead text color)"
            },
            "css": {
              "color": "#000000",
              "transition": "color 150ms ease-in-out"
            },
            "prov": "observed",
            "source": "https://www.twitch.tv/p/company-assets/css/about.css"
          }
        }
      },
      "text_cta_on_dark": {
        "text": "#9146FF",
        "fill": "none",
        "radius": 0,
        "font_size": 48,
        "weight": 600,
        "face": "body",
        "arrow": "arrow-ne-purple.svg, 24px",
        "example": "\"Advertise with us\" + arrow",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)",
        "states": {
          "hover": {
            "measured": {
              "color": "#FFFFFF"
            },
            "css": {
              "color": "#FFFFFF",
              "transition": "color 150ms ease-in-out"
            },
            "prov": "observed",
            "source": "https://www.twitch.tv/p/company-assets/css/about.css"
          }
        }
      },
      "category_row": {
        "text": "#FFFFFF",
        "font_size": 96,
        "weight": 600,
        "face": "body",
        "underline": "9px bar (0.625vw) in the text color under the active row, full word width",
        "ghost": "rgba(0,0,0,0.13) continuation text, 0.25em from the word",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)",
        "states": {
          "hover": {
            "measured": {
              "color": "#000000",
              "underline": "black bar grows from 0 to 100% width, 300ms ease-in-out"
            },
            "css": {
              "color": "#000000"
            },
            "prov": "observed",
            "source": "https://www.twitch.tv/p/company-assets/css/about.css"
          }
        }
      },
      "figure_caption": {
        "text": "#868695",
        "font_size": 14,
        "weight": 600,
        "face": "body",
        "note": "the streamer handle \"/name\", 14px #868695 (8px at 390), set 1em outside the image edge. Right-edge captions rotate +90deg and read top to bottom from the top-right corner; left-edge captions rotate -90deg and read bottom to top. Phone: same sides as desktop, 8px",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/company-assets/css/about.css"
      },
      "lead_panel": {
        "fill": "#FFFFFF",
        "text": "#000000",
        "radius": 0,
        "padding": "120px left and top at 1440; 32px at 390",
        "prov": "observed",
        "source": "https://www.twitch.tv/p/en/about/ (2026-10-31)"
      }
    },
    "breakpoints": {
      "phone_max": 750,
      "all": [
        500,
        750,
        950,
        1150,
        1440,
        1920
      ],
      "prov": "observed",
      "source": "https://www.twitch.tv/p/company-assets/css/about.css"
    }
  },
  "system": {
    "fixed": [
      "Twitch Purple #9146FF",
      "Roobert (one family)",
      "The extruded wordmark and the Glitch, unaltered",
      "Emotes as part of the language"
    ],
    "flex": "How much of the expanded palette and gradient appears: none on the About homepage (purple, white, black only), full on campaigns and creator moments.",
    "traits": [
      {
        "is": "Playful",
        "not": "Childish",
        "text": "Gaming references and jokes, always with a point (paraphrase).",
        "source": "https://web.archive.org/web/20240501000000/https://brand.twitch.tv/",
        "prov": "inferred"
      },
      {
        "is": "Community-first",
        "not": "Corporate",
        "text": "The rebrand celebrates the community, not Twitch (paraphrase).",
        "source": "https://web.archive.org/web/20240501000000/https://brand.twitch.tv/",
        "prov": "published"
      },
      {
        "is": "Irreverent",
        "not": "Mean",
        "text": "Laughs at itself: \"beautiful mess\", \"(beloved) madness\".",
        "source": "https://web.archive.org/web/20240501000000/https://brand.twitch.tv/",
        "prov": "published"
      },
      {
        "is": "Direct",
        "not": "Hard-sell",
        "text": "One plain sentence per audience on the homepage (observed).",
        "source": "https://www.twitch.tv/p/en/about/",
        "prov": "observed"
      }
    ]
  },
  "formats": [
    {
      "format": "Landing page",
      "level": 3,
      "must": "Build it the way twitch.tv/p/en/about is built (kit.spec.page, homepage voice): a purple header and hero with a 192px white headline and an inline emote, a white lead panel over an edge-flush video still, purple then white then black sections, 192px section headlines, 48px SemiBold lead in a 480px column, text CTAs with a north-east arrow, a black footer with the Glitch",
      "flex": "which audiences get a section; the images (always real streams, credited by handle)"
    },
    {
      "format": "Deck",
      "level": 3,
      "must": "Twitch Purple title slide, Roobert (Figtree) headlines, emotes inline",
      "flex": "expanded palette gradients for section breaks"
    },
    {
      "format": "Social post",
      "level": 4,
      "must": "purple or a purple gradient, one giant line, one emote",
      "flex": "expanded palette colors"
    }
  ],
  "checks": [
    {
      "name": "Logo hidden",
      "text": "Cover the wordmark. Purple ground, giant Roobert-style type and an emote should still say Twitch."
    },
    {
      "name": "Swap test",
      "text": "Swap in another streaming brand's logo. If it still fits, the purple, the emotes or the creator credits are missing."
    },
    {
      "name": "Real creators",
      "text": "Every image is a real stream or streamer, credited \"/handle\"."
    }
  ],
  "examples": [
    {
      "chapter": "color",
      "do": {
        "ground": "#9146FF",
        "text": "We saved you a seat in chat",
        "ink": "#FFFFFF"
      },
      "do_caption": "White display type on Twitch Purple, as the homepage hero.",
      "dont": {
        "ground": "#BEAAFF",
        "text": "We saved you a seat in chat",
        "ink": "#FFFFFF"
      },
      "dont_caption": "A lavender tint in place of Twitch Purple."
    }
  ],
  "make_it_yours": {
    "note": "Everything above transfers. These are Twitch's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.",
    "replace": [
      "identity",
      "purpose",
      "positioning",
      "messaging.pillars",
      "messaging.proof_points",
      "messaging.taglines",
      "messaging.boilerplate"
    ],
    "reference": {
      "purpose": {
        "mission": {
          "text": "To create belonging by enabling streamers to build community.",
          "prov": "published",
          "source": "https://www.twitch.tv/p/en/company/"
        },
        "story": {
          "text": "Twitch rebranded in 2019 to lift up and celebrate every member of its community rather than rebuild: a bolder purple, the Roobert typeface, an extruded wordmark built from its predecessor, the Glitch, emotes used everywhere, and an expanded palette named after video games.",
          "prov": "published",
          "source": "https://web.archive.org/web/20240501000000/https://brand.twitch.tv/",
          "paraphrase": true
        },
        "values": [
          {
            "name": "Community first",
            "means": "The rebrand was about celebrating the community, not Twitch (paraphrase).",
            "prov": "published",
            "source": "https://web.archive.org/web/20240501000000/https://brand.twitch.tv/"
          },
          {
            "name": "Stay different",
            "means": "The will to be different never changes; signature elements carry it (paraphrase).",
            "prov": "published",
            "source": "https://web.archive.org/web/20240501000000/https://brand.twitch.tv/"
          },
          {
            "name": "Method in the madness",
            "means": "A structured system that focuses the community's creativity (paraphrase).",
            "prov": "published",
            "source": "https://web.archive.org/web/20240501000000/https://brand.twitch.tv/"
          }
        ]
      },
      "positioning": {
        "statement": {
          "text": "Twitch is building the future of live, interactive entertainment, one community at a time.",
          "prov": "published",
          "source": "https://www.twitch.tv/p/en/company/"
        },
        "category": {
          "text": "Live, interactive entertainment: live streaming with chat.",
          "prov": "published",
          "source": "https://www.twitch.tv/p/en/company/"
        },
        "audience": {
          "text": "Four audiences, one per homepage section: fans who watch, streamers who create, developers who build tools, advertisers who want the audience.",
          "prov": "observed",
          "source": "https://www.twitch.tv/p/en/about/"
        },
        "problem": {
          "text": "Entertainment you only watch, alone: Twitch makes it something people make together, live.",
          "prov": "inferred",
          "why": "Reading of the boilerplate (\"make their own entertainment together\") and the mission (belonging).",
          "source": "https://www.twitch.tv/p/en/about/"
        },
        "promise": {
          "text": "A seat in chat: belonging in a live community around what you love.",
          "prov": "inferred",
          "why": "Hero line plus mission.",
          "source": "https://www.twitch.tv/p/en/about/"
        },
        "differentiators": [
          {
            "text": "Live chat and emotes: the audience is part of the show.",
            "prov": "published",
            "source": "https://web.archive.org/web/20240501000000/https://brand.twitch.tv/"
          },
          {
            "text": "Creators across categories beyond games (music, talk shows, sports, travel, just chatting, food, events).",
            "prov": "observed",
            "source": "https://www.twitch.tv/p/en/about/"
          },
          {
            "text": "Community tools built by developers (Extensions).",
            "prov": "observed",
            "source": "https://www.twitch.tv/p/en/about/"
          },
          {
            "text": "Ways for fans to support creators (Bits, Subs, Prime, Turbo in the footer product list).",
            "prov": "observed",
            "source": "https://www.twitch.tv/p/en/about/"
          }
        ],
        "alternatives": [
          {
            "text": "Not named by Twitch. Our reading: on-demand video platforms and other live-streaming services.",
            "prov": "inferred",
            "why": "Twitch publishes no competitor framing.",
            "source": "https://www.twitch.tv/p/en/about/"
          }
        ]
      },
      "messaging": {
        "taglines": [
          {
            "text": "We saved you a seat in chat",
            "prov": "observed",
            "source": "https://www.twitch.tv/p/en/about/",
            "source_note": "2026-10-31",
            "where": "About homepage hero headline"
          },
          {
            "text": "Meet your new Twitch",
            "prov": "published",
            "source": "https://web.archive.org/web/20240501000000/https://brand.twitch.tv/",
            "where": "Opening line of the 2019 rebrand guideline site"
          },
          {
            "text": "There is no Twitch without purple. Period.",
            "prov": "published",
            "source": "https://web.archive.org/web/20240501000000/https://brand.twitch.tv/",
            "where": "Core palette chapter of the guideline site"
          }
        ],
        "attributes": [
          "playful",
          "community-first",
          "irreverent",
          "direct"
        ],
        "key_messages": [],
        "boilerplate": {
          "text": "Twitch is where millions of people meet live every day to chat, interact and make their own entertainment together.",
          "prov": "observed",
          "source": "https://www.twitch.tv/p/en/about/",
          "source_note": "2026-10-31",
          "paraphrase": true,
          "note": "Paraphrase of the About page hero lead (21 words on the live page)"
        },
        "pillars": [
          {
            "name": "Watch: find your thing",
            "claim": "Fans find what they love, connect with streamers and chat with communities.",
            "prov": "observed",
            "source": "https://www.twitch.tv/p/en/about/",
            "proof": [
              "p-daily",
              "p-categories"
            ]
          },
          {
            "name": "Stream: share your dream",
            "claim": "Creators bring their passions and Twitch helps them build a community around them.",
            "prov": "observed",
            "source": "https://www.twitch.tv/p/en/about/",
            "proof": [
              "p-mission"
            ]
          },
          {
            "name": "Develop: build new stuff",
            "claim": "Communities need custom tools; developers build them (Extensions).",
            "prov": "observed",
            "source": "https://www.twitch.tv/p/en/about/",
            "proof": [
              "p-extensions"
            ]
          },
          {
            "name": "Advertise: reach our crowd",
            "claim": "Brands meet a large, engaged audience through real connections.",
            "prov": "observed",
            "source": "https://www.twitch.tv/p/en/about/",
            "proof": [
              "p-friends"
            ]
          }
        ],
        "proof_points": [
          {
            "id": "p-daily",
            "kind": "claim",
            "text": "Millions of people come together live every day (homepage wording; no exact figure on the page).",
            "source": "https://www.twitch.tv/p/en/about/",
            "prov": "observed"
          },
          {
            "id": "p-categories",
            "kind": "fact",
            "text": "Eight homepage categories: Games, Music, Talk Shows, Sports, Travel & Outdoors, Just Chatting, Food & Drink, Special Events.",
            "source": "https://www.twitch.tv/p/en/about/",
            "prov": "observed"
          },
          {
            "id": "p-mission",
            "kind": "fact",
            "text": "Mission: create belonging by enabling streamers to build community.",
            "source": "https://www.twitch.tv/p/en/company/",
            "prov": "published"
          },
          {
            "id": "p-extensions",
            "kind": "fact",
            "text": "Extensions and a developer platform (dev.twitch.tv) for custom community tools.",
            "source": "https://www.twitch.tv/p/en/about/",
            "prov": "observed"
          },
          {
            "id": "p-friends",
            "kind": "claim",
            "text": "\"A few million friends we'd like you to meet\" (homepage wording; no exact figure).",
            "source": "https://www.twitch.tv/p/en/about/",
            "prov": "observed"
          }
        ],
        "claim_boundaries": [
          "No audience or streamer counts beyond \"millions\": the homepage publishes none.",
          "No rankings (\"biggest\", \"number one\"): none appear on the homepage or guide.",
          "Never suggests a partnership, sponsorship or endorsement by Twitch (trademark guidelines)."
        ]
      }
    }
  }
}