Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
UI Patterns
DesignUI Patterns embraces academic authority through bold Roboto Slab headlines that command attention like textbook chapter headers, while Lato body text maintains approachable readability. The brand's aesthetic feels like a design professor's curated collection - serious about craft but not intimidating, with generous whitespace creating a gallery-like presentation of knowledge.
Design Identity
Signature Color
Academic Orange
#FF5722
Educational energy and design expertise - vibrant enough to stand out in crowded design resources while maintaining professional credibility
Visual Identity
The distinctive typography pairing of ultra-bold Roboto Slab headlines (900 weight) with light Lato body text (300 weight) creates an unmistakable academic-meets-modern aesthetic, reinforced by the floating card deck presentation style.
Component Style
Clean floating cards with subtle shadows hover above the white background, creating depth without heavy borders. The colorful card decks use rounded corners and gradient overlays, feeling more like physical products than digital interfaces - tactile and collectible.
Spacing Philosophy
Museum-gallery spacing with abundant whitespace between major sections, allowing each element to breathe. The layout follows a generous vertical rhythm that prioritizes readability and creates a sense of premium educational content.
Design Principles
- Typography contrast: 900-weight headlines paired with 300-weight body text
- Line height is generous: 36px for 24px body text (1.5x ratio)
- Header font sizes jump dramatically: 40px to 28px to 20px
- Cards float with subtle shadows rather than using borders
- Color is reserved for the logo accent and product imagery
Target Audience
Senior UX designers and design team leads who value systematic approaches to design and need authoritative references to build design systems and educate their teams
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 | 40px | 900 | 44px | |
| h2 | 40px | 700 | 44px | |
| h3 | 28px | 500 | 30.8px | |
| h5 | 20px | 500 | 22px | |
| p | 24px | 300 | 36px | |
| a | 20px | 400 | 30px | |
| button | 20px | 400 | 20px | |
| input | 16px | 400 | 24px | |
| nav | 16px | 400 | 24px |
Color Palette
#212529#ffffff#e9e9eb
