Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Twitch
VideoTwitch embraces a nocturnal gaming aesthetic with its signature violet-purple (#9147ff) creating an electric, after-dark energy that speaks to streamers and viewers who live for the night grind. The brand balances playful gaming culture with professional streaming tools through generous whitespace and minimal typography that lets the colorful content take center stage.
Design Identity
Signature Color
Twitch Purple
#9147ff
electric gaming energy and late-night streaming culture
Visual Identity
Massive amounts of breathing room around centered error states with ghost-like illustrations, creating an almost zen-like emptiness that makes the vibrant purple interactions feel more impactful when they appear.
Component Style
Soft rounded corners with pill-shaped buttons (high border radius), clean focus states using purple glows rather than sharp outlines, and minimal borders that favor background fills over strokes.
Spacing Philosophy
Extremely generous vertical spacing creates cathedral-like emptiness, with tight 8px incremental spacing system that keeps interactive elements compact while giving content massive breathing room.
Design Principles
- Purple focus glows replace traditional border outlines
- Generous 40px+ spacing between major sections
- 14px base font size with 600 weight for all buttons
- Pill-shaped buttons with high border radius
- Error states use ghostly illustrations centered in whitespace
Target Audience
Gen Z and millennial gamers, streamers, and digital natives who live in online communities and value authentic, unpolished content over corporate presentation
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 14px | 400 | 19.6px | |
| p | 18px | 500 | 19.8px | |
| a | 14px | 400 | 19.6px | |
| button | 14px | 600 | 19.6px | |
| input | 14px | 400 | 21px | |
| nav | 14px | 400 | 19.6px | |
| header | 14px | 400 | 19.6px | |
| footer | 14px | 400 | 19.6px | |
| main | 14px | 400 | 19.6px | |
| body | 14px | 400 | 19.6px |
Color Palette
#f7262d#ff6905#fa1ed2#8205b3#f7f7f8#bd0078#00991a#f195f9#00fa04#56bde6#bfff00#ea7179
