Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Warby Parker
FashionWarby Parker's identity balances sophisticated academic heritage with approachable warmth through its deep navy 'ink' foundation and editorial-inspired typography. The brand evokes a literary confidence—like browsing a well-curated bookstore—while maintaining the accessibility of a friendly neighborhood optometrist.
Design Identity
Signature Color
Warby Ink
#072369
intellectual authority with approachable sophistication—premium eyewear expertise without pretension
Visual Identity
The distinctive combination of serif headlines (fontIvoryLl) paired with sans-serif UI elements creates an editorial magazine aesthetic that immediately signals thoughtful curation over clinical sterility.
Component Style
Softly rounded corners with subtle shadows create friendly approachability. Buttons feel substantial but never heavy, with gentle 4-8px border radius and layered shadow treatments that suggest quality without ostentation.
Spacing Philosophy
Generous breathing room with 4px incremental spacing system creates a gallery-like browsing experience. Large hero sections (40px+ gaps) invite contemplation while tight component spacing (12-16px) maintains readability focus.
Design Principles
- Serif headlines at 55px create editorial authority while sans-serif UI maintains clarity
- Border radius stays between 4-8px for approachable but not playful feeling
- Shadows use subtle transparency (#1212121f) to suggest depth without drama
- Color palette anchored in blues (#072369 to #00a2e1) with warm neutral support
- Spacing follows 4px increments from 4px to 40px for systematic consistency
Target Audience
Design-conscious millennials and Gen-X professionals who value craft, heritage, and thoughtful curation over flashy trends or clinical efficiency
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 | normal | |
| h1 | 55px | 400 | 61px | |
| h2 | 55px | 400 | 61px | |
| a | 16px | 600 | normal | |
| button | 16px | 400 | normal | |
| nav | 16px | 400 | normal | |
| header | 16px | 400 | normal | |
| main | 16px | 400 | normal | |
| body | 16px | 400 | normal | |
| h1 | 55px | 400 | 61px |
Color Palette
#1050d0#1144a9#8aa9e8#072369#021a57#8593b5#00a2e1#caeaf5#000000#121212#3a434c#72777c
