{
  "id": "twitch",
  "version": "1.0.0",
  "name": "Twitch",
  "description": "Twitch is the global live-streaming platform for gaming, esports, and creator-driven live content, owned by Amazon since 2014. The brand identity, refreshed in 2019 by Collins, is anchored on a single saturated Twitch Purple (#9146FF) and the geometric Glitch mark on a dark canvas. The brand is dark-first and unmistakably gamer-facing: the consumer product, the chat panel, and the player chrome all live on near-black surfaces with the purple reading as the high-energy interactive signature.\n",
  "provenance": {
    "source": "https://brand.twitch.tv/",
    "license": "Proprietary — All Rights Reserved",
    "attribution": "Twitch Interactive, Inc. (an Amazon company) — Twitch, the Twitch wordmark, and the Glitch mark are registered trademarks of Twitch Interactive, Inc. The signature Twitch Purple (#9146FF) and the canvas (#0E0E10) are documented across Twitch's public brand site at brand.twitch.tv. Inter is referenced for both heading and body roles — Twitch does not use a proprietary brand face and runs Roobert / Inter family sans across product surfaces.\n",
    "importedDate": "2026-05-18",
    "notes": "Twitch's brand site (brand.twitch.tv) is one of the more accessible streaming brand kits. Twitch does not commission a full proprietary corporate face the way Netflix Sans or Spotify Circular were commissioned; the product runs an Inter-family sans. Inter is the canonical reference for this atom.\n"
  },
  "tags": [
    "streaming",
    "gaming",
    "twitch",
    "amazon",
    "dark-first",
    "live",
    "creator"
  ],
  "palette": {
    "ref": "twitch@1.0.0",
    "swatches": [
      {
        "id": "twitch-purple",
        "name": "Twitch Purple",
        "value": "#9146FF",
        "description": "Primary signature purple — the Twitch wordmark, the Glitch mark, and primary CTAs.",
        "aliases": []
      },
      {
        "id": "twitch-purple-hover",
        "name": "Twitch Purple Hover",
        "value": "#772CE8",
        "description": "Darker purple used for hover/pressed states on the primary action.",
        "aliases": []
      },
      {
        "id": "twitch-purple-light",
        "name": "Twitch Purple Light",
        "value": "#BF94FF",
        "description": "Lighter purple used for emphasis on dark canvases and in marketing accents.",
        "aliases": []
      },
      {
        "id": "twitch-black",
        "name": "Twitch Black",
        "value": "#0E0E10",
        "description": "Canonical canvas — the Twitch consumer surface and chrome background.",
        "aliases": []
      },
      {
        "id": "twitch-near-black",
        "name": "Twitch Near-Black",
        "value": "#18181B",
        "description": "Elevated surface — chat panels, player chrome, and modal backgrounds.",
        "aliases": []
      },
      {
        "id": "twitch-charcoal",
        "name": "Twitch Charcoal",
        "value": "#1F1F23",
        "description": "Hovered surface, sidebar background, and elevated tiles in the Twitch consumer app.",
        "aliases": []
      },
      {
        "id": "twitch-white",
        "name": "Twitch White",
        "value": "#FFFFFF",
        "description": "Primary text on the dark canvas; reversed wordmark fill on light backgrounds.",
        "aliases": []
      },
      {
        "id": "twitch-off-white",
        "name": "Twitch Off-White",
        "value": "#EFEFF1",
        "description": "Authored light-mode canvas; secondary surface on dark mode.",
        "aliases": []
      },
      {
        "id": "twitch-graphite",
        "name": "Twitch Graphite",
        "value": "#53535F",
        "description": "Secondary text and divider color on the dark canvas.",
        "aliases": []
      },
      {
        "id": "twitch-gray-light",
        "name": "Twitch Gray Light",
        "value": "#ADADB8",
        "description": "Tertiary text and metadata in the consumer product.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "twitch-off-white",
          "surface": "twitch-white",
          "surface-elevated": "twitch-white",
          "text-primary": "twitch-black",
          "text-secondary": "twitch-graphite",
          "text-tertiary": "twitch-gray-light",
          "primary": "twitch-purple",
          "primary-hover": "twitch-purple-hover",
          "accent": "twitch-purple",
          "accent-hover": "twitch-purple-hover",
          "warning": "twitch-purple-light",
          "warning-hover": "twitch-purple",
          "error": "twitch-purple-hover",
          "success": "twitch-purple"
        }
      },
      "dark": {
        "roles": {
          "background": "twitch-black",
          "surface": "twitch-near-black",
          "surface-elevated": "twitch-charcoal",
          "text-primary": "twitch-white",
          "text-secondary": "twitch-gray-light",
          "text-tertiary": "twitch-graphite",
          "primary": "twitch-purple",
          "primary-hover": "twitch-purple-light",
          "accent": "twitch-purple",
          "accent-hover": "twitch-purple-light",
          "warning": "twitch-purple-light",
          "warning-hover": "twitch-purple",
          "error": "twitch-purple-light",
          "success": "twitch-purple"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "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"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "body",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "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"
        },
        {
          "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": "twitch-black",
      "on-identity": "twitch-purple",
      "background": "twitch-black",
      "surface": "twitch-near-black",
      "surface-elevated": "twitch-charcoal",
      "text-primary": "twitch-white",
      "text-secondary": "twitch-gray-light",
      "text-tertiary": "twitch-graphite",
      "primary": "twitch-purple",
      "primary-hover": "twitch-purple-light",
      "accent": "twitch-purple",
      "accent-hover": "twitch-purple-light",
      "mark": "twitch-purple",
      "text-emphasis": "twitch-white"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "wordmark": "heading",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "colorChoice",
      "target": "logo.mark.fill",
      "severity": "error",
      "rationale": "The Twitch Glitch mark renders only in Twitch Purple, reversed white on dark cinematic surfaces, or in monochrome black on light. The hover and lighter purples are interactive-state values; gray tones are chrome — none are acceptable mark fills.\n",
      "allowed": [
        "twitch-purple",
        "twitch-white",
        "twitch-black"
      ],
      "forbidden": [
        "twitch-purple-hover",
        "twitch-purple-light",
        "twitch-graphite",
        "twitch-gray-light"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "Twitch's 2019 brand refresh established a flat, geometric identity. Gradients, drop-shadows, and recoloring conflict with the documented brand system; apply only Twitch-approved variants with respected clearspace.\n",
      "treatments": [
        "stretched",
        "rotated",
        "recolored",
        "drop-shadow",
        "gradient-fill",
        "on-busy-photo",
        "inverted-without-variant"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "Twitch White on Twitch Black (#0E0E10) gives ~19:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on Twitch surfaces.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "Twitch Purple (#9146FF) on Twitch Black gives ~5:1 — clears AA-large and approaches AA-normal. Buttons using the purple fill with white text exceed 6:1; this rule guards the interactive affordance of the primary CTA.\n",
      "against": "background",
      "minRatio": 3,
      "standard": "WCAG-AA-large"
    },
    {
      "type": "enumMembership",
      "target": "typography.heading.fontWeight",
      "severity": "warning",
      "rationale": "Twitch's marketing and product chrome use Medium (500), Bold (700), and Heavy (800) for hero and section headers. Lighter cuts read as chat body and compromise the energetic, gamer- facing voice.\n",
      "allowed": [
        "500",
        "700",
        "800"
      ]
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "Twitch Purple is reserved for the brand mark, the wordmark, and primary actions (\"Follow,\" \"Subscribe,\" \"Go Live\"). Using it inside body copy or for error/failure states breaks the interactive signal the purple carries throughout the product.\n",
      "forbiddenContexts": [
        "body-text",
        "secondary-link",
        "validation-failure"
      ]
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "error",
      "rationale": "WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast checks the default verification on any new role pairing.\n",
      "standard": "WCAG-AA",
      "criterion": "1.4.3"
    },
    {
      "type": "fontPairing",
      "target": "typography.heading",
      "severity": "warning",
      "rationale": "Twitch's marketing headers and section heads run materially larger than the chat-and-metadata body 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
    }
  ]
}