Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
X (formerly Twitter) presents a stark, monolithic aesthetic built around an imposing black 'X' logo that dominates the left side with sculptural weight. The design uses dramatic negative space and minimal typography to create an atmosphere of digital rebellion and uncompromising directness.
Design Identity
Signature Color
X Black
#000000
Absolute authority and unfiltered communication - the void where all conversations begin
Visual Identity
The massive, angular X logomark positioned with aggressive asymmetry - taking up nearly half the screen real estate with bold, unapologetic presence that feels more like a monument than a social media brand.
Component Style
Buttons are pill-shaped with generous padding and crisp contrast - the primary CTA uses deep black with white text, while secondary options maintain clean outlines. Everything feels substantial yet refined, with rounded corners that soften the X's sharp geometry.
Spacing Philosophy
Extreme asymmetrical layout with the logo consuming massive left-side real estate, while right-side elements breathe with generous vertical gaps. The imbalance creates visual tension that demands attention.
Design Principles
- Logo takes 40% of horizontal space minimum
- Text uses only black, white, and blue accent colors
- Button radius approximately 24px for pill effect
- Vertical spacing follows 16-24px rhythm
- Typography stays under 32px for maximum readability
Target Audience
Digital natives who value unfiltered discourse and real-time cultural participation over polished social 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 | 15px | 400 | normal | |
| a | 15px | 400 | normal | |
| button | 15px | 400 | normal | |
| nav | 15px | 400 | normal | |
| main | 15px | 400 | normal | |
| body | 15px | 400 | normal | |
| a | 15px | 400 | normal | |
| button | 15px | 400 | normal | |
| nav | 15px | 400 | normal | |
| main | 15px | 400 | normal |
Color Palette
No colors extracted
