W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Twitch
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.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/twitch/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/twitch/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Twitch
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.
Tags: streaming, gaming, twitch, amazon, dark-first, live, creator
Atoms
Palette
Twitch · [email protected] · Proprietary — All Rights Reserved
Twitch (an Amazon company) corporate palette. Twitch's identity is anchored on a single saturated purple — Twitch Purple (#9146FF) — paired with a dark canvas. The brand is dark-first: the consumer product, marketing surfaces, and the Glitch mark all live on near-black surfaces with the purple reading as the high-energy signature. The 2019 brand refresh by Collins simplified the identity to one purple, one mark, and a deliberately gamer-facing voice that distinguishes Twitch from streaming-video conventions.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
twitch-purple |
Twitch Purple | #9146FF |
twitch-purple-hover |
Twitch Purple Hover | #772CE8 |
twitch-purple-light |
Twitch Purple Light | #BF94FF |
twitch-black |
Twitch Black | #0E0E10 |
twitch-near-black |
Twitch Near-Black | #18181B |
twitch-charcoal |
Twitch Charcoal | #1F1F23 |
twitch-white |
Twitch White | #FFFFFF |
twitch-off-white |
Twitch Off-White | #EFEFF1 |
twitch-graphite |
Twitch Graphite | #53535F |
twitch-gray-light |
Twitch Gray Light | #ADADB8 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
twitch-off-white |
#EFEFF1 |
surface |
twitch-white |
#FFFFFF |
surface-elevated |
twitch-white |
#FFFFFF |
text-primary |
twitch-black |
#0E0E10 |
text-secondary |
twitch-graphite |
#53535F |
text-tertiary |
twitch-gray-light |
#ADADB8 |
primary |
twitch-purple |
#9146FF |
primary-hover |
twitch-purple-hover |
#772CE8 |
accent |
twitch-purple |
#9146FF |
accent-hover |
twitch-purple-hover |
#772CE8 |
warning |
twitch-purple-light |
#BF94FF |
warning-hover |
twitch-purple |
#9146FF |
error |
twitch-purple-hover |
#772CE8 |
success |
twitch-purple |
#9146FF |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
twitch-black |
#0E0E10 |
surface |
twitch-near-black |
#18181B |
surface-elevated |
twitch-charcoal |
#1F1F23 |
text-primary |
twitch-white |
#FFFFFF |
text-secondary |
twitch-gray-light |
#ADADB8 |
text-tertiary |
twitch-graphite |
#53535F |
primary |
twitch-purple |
#9146FF |
primary-hover |
twitch-purple-light |
#BF94FF |
accent |
twitch-purple |
#9146FF |
accent-hover |
twitch-purple-light |
#BF94FF |
warning |
twitch-purple-light |
#BF94FF |
warning-hover |
twitch-purple |
#9146FF |
error |
twitch-purple-light |
#BF94FF |
success |
twitch-purple |
#9146FF |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
twitch-black |
#0E0E10 |
on-identity |
twitch-purple |
#9146FF |
background |
twitch-black |
#0E0E10 |
surface |
twitch-near-black |
#18181B |
surface-elevated |
twitch-charcoal |
#1F1F23 |
text-primary |
twitch-white |
#FFFFFF |
text-secondary |
twitch-gray-light |
#ADADB8 |
text-tertiary |
twitch-graphite |
#53535F |
primary |
twitch-purple |
#9146FF |
primary-hover |
twitch-purple-light |
#BF94FF |
accent |
twitch-purple |
#9146FF |
accent-hover |
twitch-purple-light |
#BF94FF |
mark |
twitch-purple |
#9146FF |
text-emphasis |
twitch-white |
#FFFFFF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.mark.fill
- allowed: twitch-purple, twitch-white, twitch-black
- forbidden: twitch-purple-hover, twitch-purple-light, twitch-graphite, twitch-gray-light
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.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, inverted-without-variant
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.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
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.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
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.
contextRestriction → roles.colors.primary
- forbiddenContexts: body-text, secondary-link, validation-failure
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.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
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.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 500, 700, 800
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.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.4
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.
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.
- Imported:
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.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Twitch
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Twitch
A clear hierarchy in Twitch's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ twitch-purple #9146FF accent-hover
→ twitch-purple-light #BF94FF background
→ twitch-black #0E0E10 identity
→ twitch-black #0E0E10 mark
→ twitch-purple #9146FF on-identity
→ twitch-purple #9146FF primary
→ twitch-purple #9146FF primary-hover
→ twitch-purple-light #BF94FF surface
→ twitch-near-black #18181B surface-elevated
→ twitch-charcoal #1F1F23 text-emphasis
→ twitch-white #FFFFFF text-primary
→ twitch-white #FFFFFF text-secondary
→ twitch-gray-light #ADADB8 text-tertiary
→ twitch-graphite #53535F Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter wordmark
→ heading Inter Palette mode mappings (from twitch)
Light mode (14 roles)
accent
→ twitch-purple accent-hover
→ twitch-purple-hover background
→ twitch-off-white error
→ twitch-purple-hover primary
→ twitch-purple primary-hover
→ twitch-purple-hover success
→ twitch-purple surface
→ twitch-white surface-elevated
→ twitch-white text-primary
→ twitch-black text-secondary
→ twitch-graphite text-tertiary
→ twitch-gray-light warning
→ twitch-purple-light warning-hover
→ twitch-purple Dark mode (14 roles)
accent
→ twitch-purple accent-hover
→ twitch-purple-light background
→ twitch-black error
→ twitch-purple-light primary
→ twitch-purple primary-hover
→ twitch-purple-light success
→ twitch-purple surface
→ twitch-near-black surface-elevated
→ twitch-charcoal text-primary
→ twitch-white text-secondary
→ twitch-gray-light text-tertiary
→ twitch-graphite warning
→ twitch-purple-light warning-hover
→ twitch-purple Rules (8 typed constraints)
error · 6 rules
colorChoice logo.mark.fill allowed twitch-purple, twitch-white, twitch-black forbidden twitch-purple-hover, twitch-purple-light, twitch-graphite, twitch-gray-light 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.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, inverted-without-variant 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.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA 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.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large 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.
contextRestriction roles.colors.primary forbiddenContexts body-text, secondary-link, validation-failure 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.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 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.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 500, 700, 800 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.
fontPairing typography.heading requires body minSizeRatio 1.4 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.
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.
- Imported
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.