Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Beehiiv
MediaBeehiiv embodies a nocturnal, premium-tech aesthetic with stark white typography floating against deep navy darkness, creating an atmosphere of sophisticated exclusivity. The brand tells a story of editorial craft meets Silicon Valley precision, where ClashGrotesk headlines command attention while SatoshiFont body text whispers professional confidence.
Design Identity
Signature Color
Midnight Navy
#1a1b2e
editorial sophistication and premium newsletter publishing - the darkness that makes content shine
Visual Identity
The dramatic contrast between stark white text and deep navy backgrounds, combined with the distinctive ClashGrotesk typography for headlines - creating a newspaper-meets-startup aesthetic that's instantly recognizable.
Component Style
Clean, geometric components with minimal borders and subtle shadows. Buttons appear soft-cornered with gentle padding, while the overall treatment feels weightless against the dark canvas - premium but approachable, like high-end publishing software.
Spacing Philosophy
Generous vertical breathing room that mimics editorial layouts, with tight component padding that keeps the interface feeling dense with information yet never cramped - space is used to create reading rhythm rather than just visual separation.
Design Principles
- Headlines use ClashGrotesk at 60px/48px weights for maximum impact
- Body text never exceeds SatoshiFont 16px to maintain readability hierarchy
- Dark backgrounds dominate with strategic white text for drama
- Border radius stays minimal - likely 6-8px maximum for subtle softness
- Typography weights stick to 400, 500, and 700 - no in-between variations
Target Audience
Newsletter creators and content entrepreneurs who see themselves as digital publishers rather than just marketers - people who value editorial craft and premium positioning over flashy features.
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 | 16px | 400 | 24px | |
| h1 | 60px | 700 | 60px | |
| h2 | 48px | 700 | 48px | |
| h3 | 18px | 700 | 28px | |
| p | 14px | 500 | 20px | |
| a | 16px | 400 | 24px | |
| button | 16px | 400 | 24px | |
| input | 16px | 400 | 24px | |
| nav | 16px | 400 | 24px | |
| header | 16px | 400 | 24px |
Color Palette
#03b2cb#000000#ffffff#222222#8dc572#be6464#f0ad4e#337ab7#3b82f6
