{
  "$description": "Brand: Twitch (twitch@1.0.0)",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette twitch@1.0.0",
      "twitch-purple": {
        "$value": "#9146FF",
        "$type": "color",
        "$description": "Primary signature purple — the Twitch wordmark, the Glitch mark, and primary CTAs."
      },
      "twitch-purple-hover": {
        "$value": "#772CE8",
        "$type": "color",
        "$description": "Darker purple used for hover/pressed states on the primary action."
      },
      "twitch-purple-light": {
        "$value": "#BF94FF",
        "$type": "color",
        "$description": "Lighter purple used for emphasis on dark canvases and in marketing accents."
      },
      "twitch-black": {
        "$value": "#0E0E10",
        "$type": "color",
        "$description": "Canonical canvas — the Twitch consumer surface and chrome background."
      },
      "twitch-near-black": {
        "$value": "#18181B",
        "$type": "color",
        "$description": "Elevated surface — chat panels, player chrome, and modal backgrounds."
      },
      "twitch-charcoal": {
        "$value": "#1F1F23",
        "$type": "color",
        "$description": "Hovered surface, sidebar background, and elevated tiles in the Twitch consumer app."
      },
      "twitch-white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Primary text on the dark canvas; reversed wordmark fill on light backgrounds."
      },
      "twitch-off-white": {
        "$value": "#EFEFF1",
        "$type": "color",
        "$description": "Authored light-mode canvas; secondary surface on dark mode."
      },
      "twitch-graphite": {
        "$value": "#53535F",
        "$type": "color",
        "$description": "Secondary text and divider color on the dark canvas."
      },
      "twitch-gray-light": {
        "$value": "#ADADB8",
        "$type": "color",
        "$description": "Tertiary text and metadata in the consumer product."
      }
    }
  },
  "font": {
    "$description": "Typography roles mapped to font atoms",
    "heading": {
      "family": {
        "$value": [
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "heading role → Inter (inter@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "900": {
          "$value": 900,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "body": {
      "family": {
        "$value": [
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "body role → Inter (inter@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "900": {
          "$value": 900,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "mono": {
      "family": {
        "$value": [
          "JetBrainsMono Nerd Font",
          "JetBrains Mono",
          "Fira Code",
          "Menlo",
          "Monaco",
          "Consolas",
          "Liberation Mono",
          "monospace"
        ],
        "$type": "fontFamily",
        "$description": "mono role → JetBrainsMono Nerd Font (jetbrainsmono-nerdfont@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    }
  },
  "$extensions": {
    "com.brand-atoms.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
      }
    ],
    "com.brand-atoms.assets": [],
    "com.brand-atoms.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"
    },
    "com.brand-atoms.references": {
      "palette": "twitch@1.0.0",
      "fonts": {
        "heading": "inter@1.0.0",
        "body": "inter@1.0.0",
        "mono": "jetbrainsmono-nerdfont@1.0.0"
      }
    }
  }
}