Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
YouTube
VideoYouTube's signature aesthetic blends industrial functionality with warm accessibility, using a predominantly neutral palette punctuated by their iconic red accent. The typography hierarchy relies heavily on Roboto and YouTube Sans, creating a systematic yet approachable reading experience that scales from mobile thumbnails to desktop browsing.
Design Identity
Signature Color
YouTube Red
#ff0000
Passionate content discovery and creative expression - the red signals excitement, urgency, and the pulse of global video culture
Visual Identity
Spacious left navigation with generous whitespace, combined with a clean search-centric header and empty state messaging that guides users toward content discovery rather than overwhelming them with options.
Component Style
Minimal buttons with subtle 2px border radius, clean typography-focused navigation items without heavy borders or shadows, and generous touch targets optimized for both desktop and mobile interaction patterns.
Spacing Philosophy
Systematic 4px base unit scaling (4px, 8px, 16px, 24px, 32px) creates consistent rhythm throughout the interface, with generous sidebar padding and focused content areas that never feel cramped or cluttered.
Design Principles
- Border radius stays minimal at 2px for subtle softening
- Typography hierarchy uses only Roboto and YouTube Sans families
- Spacing follows strict 4px incremental system up to 36px
- Navigation prioritizes text over icons for clarity
- Empty states focus on search encouragement over feature promotion
Target Audience
Global content creators and consumers across all demographics who value intuitive navigation over feature complexity, from casual viewers to professional YouTubers managing channels
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 | 10px | 400 | normal | |
| h1 | 14px | 500 | 20px | |
| h2 | 20px | 600 | 28px | |
| h3 | 11.7px | 700 | normal | |
| a | 10px | 400 | normal | |
| button | 13.3333px | 400 | 0px | |
| input | 16px | 400 | 22px | |
| body | 10px | 400 | normal | |
| h1 | 14px | 500 | 20px | |
| h2 | 20px | 600 | 28px |
Color Palette
#212121#ff80ab#0f0f0f#000000#ff5722#ffffff#666666#f2f5f8#333333#aaaaaa#065fd4#111111
