Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Frontify
DesignFrontify embodies sophisticated editorial restraint through its warm, off-white canvas and distinctive dual-typeface system—pairing the humanist precision of ABC Diatype with the elegant flourishes of Cranny serif. The brand communicates thoughtful craft over flashy innovation, creating an atmosphere of professional intimacy where design decisions feel deliberate rather than trendy.
Design Identity
Signature Color
Frontify Parchment
#f0f0eb
sophisticated neutrality that positions the brand as a refined foundation for creative work
Visual Identity
The distinctive warm off-white background (#f0f0eb) paired with the sophisticated Cranny serif headlines creates an unmistakable editorial sensibility that feels more like a design publication than typical SaaS software.
Component Style
Minimal geometric forms with subtle 5px radius corners—components feel understated and professional with clean borders rather than heavy shadows, emphasizing content over interface decoration.
Spacing Philosophy
Generous 20px horizontal gaps between pagination elements suggest breathing room is valued, with an overall rhythm that prioritizes legibility and contemplation over density.
Design Principles
- Border radius stays minimal at 5px maximum
- Typography uses only two font families: ABC Diatype for UI, Cranny for headlines
- Warm neutral palette dominates with occasional accent colors (#ff3b00, #b60ae3)
- Transitions are deliberately slow (1.2s max) for thoughtful interactions
- 18px base font size prioritizes readability over space efficiency
Target Audience
Creative directors and brand managers at design-conscious companies who value sophisticated tools that match their aesthetic standards
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 | 18px | 400 | 23.4px | |
| h1 | 80px | 300 | 80px | |
| h2 | 60.8px | 400 | 66.88px | |
| p | 15px | 400 | 19.5px | |
| a | 15px | 400 | 24px | |
| button | 15px | 700 | 22.5px | |
| input | 15px | 400 | normal | |
| nav | 18px | 400 | 23.4px | |
| footer | 18px | 400 | 23.4px | |
| main | 18px | 400 | 23.4px |
Color Palette
#f0f0eb#111110#575753#e1e1db#b60ae3#bfbfb8#777772#cbcbc5#242422#464643#a4a49e#d7d7d0
