{
  "$description": "Twitch brand tokens from unfairly.ai/brand-guidelines/twitch, checked 2026-10-31. Design Tokens Community Group format 2025.10.",
  "color": {
    "paper": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "surface": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.941,
          0.941,
          1
        ],
        "hex": "#f0f0ff"
      }
    },
    "ink": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "ink-muted": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.525,
          0.525,
          0.584
        ],
        "hex": "#868695"
      }
    },
    "accent": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.569,
          0.275,
          1
        ],
        "hex": "#9146ff"
      }
    },
    "on-accent": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "accent-secondary": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "night": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "on-night": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.941,
          0.941,
          1
        ],
        "hex": "#f0f0ff"
      }
    },
    "twitch-purple": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.569,
          0.275,
          1
        ],
        "hex": "#9146ff"
      }
    },
    "black": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "ice": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.941,
          0.941,
          1
        ],
        "hex": "#f0f0ff"
      }
    },
    "white": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "caption-gray": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.525,
          0.525,
          0.584
        ],
        "hex": "#868695"
      }
    },
    "jiggle": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.706,
          1
        ],
        "hex": "#fab4ff"
      }
    },
    "worm": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.804,
          0.804
        ],
        "hex": "#facdcd"
      }
    },
    "isabelle": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.996,
          0.933,
          0.522
        ],
        "hex": "#feee85"
      }
    },
    "droid": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.745,
          0.98,
          0.882
        ],
        "hex": "#befae1"
      }
    },
    "wipe-out": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.784,
          0.686
        ],
        "hex": "#00c8af"
      }
    },
    "smoke": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.824,
          0.824,
          0.902
        ],
        "hex": "#d2d2e6"
      }
    },
    "widow": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.745,
          0.667,
          1
        ],
        "hex": "#beaaff"
      }
    },
    "peach": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.988,
          0.4,
          0.459
        ],
        "hex": "#fc6675"
      }
    },
    "pac": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.792,
          0.373
        ],
        "hex": "#ffca5f"
      }
    },
    "mudkip": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.341,
          0.745,
          0.902
        ],
        "hex": "#57bee6"
      }
    },
    "sonic": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.078,
          0.647
        ],
        "hex": "#0014a5"
      }
    },
    "dragon": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.51,
          0.02,
          0.706
        ],
        "hex": "#8205b4"
      }
    },
    "cuddle": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.118,
          0.824
        ],
        "hex": "#fa1ed2"
      }
    },
    "bandit": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.412,
          0.02
        ],
        "hex": "#ff6905"
      }
    },
    "lightning": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.98,
          0.098
        ],
        "hex": "#fafa19"
      }
    },
    "k-o": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.745,
          1,
          0
        ],
        "hex": "#beff00"
      }
    },
    "mega": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.98,
          0.98
        ],
        "hex": "#00fafa"
      }
    },
    "nights": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.255,
          0.078,
          0.373
        ],
        "hex": "#41145f"
      }
    },
    "osu": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.745,
          0,
          0.471
        ],
        "hex": "#be0078"
      }
    },
    "red-alert": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.157,
          0.157
        ],
        "hex": "#fa2828"
      }
    },
    "egg": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.98,
          0.02
        ],
        "hex": "#00fa05"
      }
    },
    "legend": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.412,
          1,
          0.765
        ],
        "hex": "#69ffc3"
      }
    },
    "zero": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.118,
          0.412,
          1
        ],
        "hex": "#1e69ff"
      }
    },
    "text-cta-on-purple-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "text-cta-on-light-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.569,
          0.275,
          1
        ],
        "hex": "#9146ff"
      }
    },
    "text-cta-on-dark-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.569,
          0.275,
          1
        ],
        "hex": "#9146ff"
      }
    },
    "category-row-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "figure-caption-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.525,
          0.525,
          0.584
        ],
        "hex": "#868695"
      }
    },
    "lead-panel-fill": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "lead-panel-text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    }
  },
  "font": {
    "display": {
      "$type": "fontFamily",
      "$value": [
        "Figtree",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ]
    },
    "display-original": {
      "$type": "fontFamily",
      "$value": [
        "Roobert"
      ],
      "$description": "Twitch's own face (Commercial (Displaay Type Foundry); Twitch serves its own cut, RoobertTW). The stand-in above is the open alternative."
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Figtree",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ]
    },
    "body-original": {
      "$type": "fontFamily",
      "$value": [
        "Roobert"
      ],
      "$description": "Twitch's own face (Commercial (Displaay)). The stand-in above is the open alternative."
    }
  },
  "typography": {
    "display-xl": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.display}",
        "fontSize": {
          "value": 192,
          "unit": "px"
        },
        "fontWeight": 500,
        "lineHeight": 0.92,
        "letterSpacing": {
          "value": -7.68,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 58.5,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "list-xl": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 96,
          "unit": "px"
        },
        "fontWeight": 600,
        "lineHeight": 1,
        "letterSpacing": {
          "value": -3.84,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 37,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "lead": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 48,
          "unit": "px"
        },
        "fontWeight": 600,
        "lineHeight": 1,
        "letterSpacing": {
          "value": -2.2,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 19.5,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "footer-link": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 24,
          "unit": "px"
        },
        "fontWeight": 600,
        "lineHeight": 1.5,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 16.7,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "nav": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 600,
        "lineHeight": 1.16,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 18,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "footer-head": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 14,
          "unit": "px"
        },
        "fontWeight": 600,
        "lineHeight": 1.42,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 12.4,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "caption": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 14,
          "unit": "px"
        },
        "fontWeight": 600,
        "lineHeight": 1,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 8,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    },
    "legal": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.body}",
        "fontSize": {
          "value": 12,
          "unit": "px"
        },
        "fontWeight": 600,
        "lineHeight": 1.42,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$extensions": {
        "ai.unfairly": {
          "phone_size_px": 12,
          "family": "Figtree",
          "provenance": "observed"
        }
      }
    }
  },
  "space": {
    "page-margin": {
      "$type": "dimension",
      "$value": {
        "value": 120,
        "unit": "px"
      }
    },
    "page-margin-phone": {
      "$type": "dimension",
      "$value": {
        "value": 33,
        "unit": "px"
      }
    },
    "section-padding": {
      "$type": "dimension",
      "$value": {
        "value": 84,
        "unit": "px"
      }
    },
    "section-padding-phone": {
      "$type": "dimension",
      "$value": {
        "value": 33,
        "unit": "px"
      }
    },
    "container-max": {
      "$type": "dimension",
      "$value": {
        "value": 1200,
        "unit": "px"
      }
    },
    "hero-text-max": {
      "$type": "dimension",
      "$value": {
        "value": 1320,
        "unit": "px"
      }
    },
    "nav-height": {
      "$type": "dimension",
      "$value": {
        "value": 204,
        "unit": "px"
      }
    },
    "gutter": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    }
  },
  "radius": {
    "text-cta-on-purple": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "text-cta-on-light": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "text-cta-on-dark": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "lead-panel": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    }
  },
  "motion": {
    "text-jump-duration": {
      "$type": "duration",
      "$value": {
        "value": 450,
        "unit": "ms"
      }
    },
    "label-rise-easing": {
      "$type": "cubicBezier",
      "$value": [
        0.87,
        0,
        0.04,
        1
      ]
    },
    "label-rise-duration": {
      "$type": "duration",
      "$value": {
        "value": 300,
        "unit": "ms"
      }
    },
    "cta-color-duration": {
      "$type": "duration",
      "$value": {
        "value": 150,
        "unit": "ms"
      }
    },
    "underline-grow-duration": {
      "$type": "duration",
      "$value": {
        "value": 300,
        "unit": "ms"
      }
    },
    "arrow-swap-duration": {
      "$type": "duration",
      "$value": {
        "value": 200,
        "unit": "ms"
      }
    }
  }
}