Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
LearnUpon
EdTechLearnUpon creates a vibrant, approachable learning ecosystem through bold geometric shapes and energetic color blocking. The brand balances professional sophistication with playful optimism, using rounded corners and organic illustrations to make enterprise learning feel human and engaging.
Design Identity
Signature Color
LearnUpon Blue
#0693e3
trustworthy innovation in enterprise learning - professional yet approachable
Visual Identity
Bold geometric shape compositions with vibrant teal/mint green color blocks creating depth and visual interest, paired with diverse human imagery showing real engagement with learning technology
Component Style
Generously rounded buttons (24px+ radius) with solid fills and confident typography. Cards use soft shadows and rounded corners (12-16px) creating friendly, touchable interfaces that feel more approachable than typical B2B software
Spacing Philosophy
Asymmetrical layout with large hero sections balanced by tight component groupings. Generous whitespace around key messaging (64px+) while keeping related elements closely clustered for cognitive grouping
Design Principles
- Border radius consistently 24px+ for primary elements, 12px for cards
- Color blocking uses high contrast geometric shapes for visual hierarchy
- Typography mixing: Poppins Bold for headlines, Inter for body and UI
- Illustrations always include diverse human representation
- Shadows are subtle (natural 6px 6px 9px) never sharp or dramatic
Target Audience
L&D directors and training managers at mid-to-large enterprises who want learning technology that employees actually want to use
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 | 28.8px | |
| h1 | 48.0006px | 400 | 55.2007px | |
| h2 | 20px | 400 | 24px | |
| h3 | 23.9994px | 400 | 31.9984px | |
| p | 18px | 400 | 43.2px | |
| a | 14px | 400 | 18.6662px | |
| button | 15px | 400 | 17.25px | |
| input | 10px | 400 | 11.5px | |
| nav | 15px | 400 | 24px | |
| header | 15px | 400 | 24px |
Color Palette
#000000#abb8c3#ffffff#f78da7#cf2e2e#ff6900#fcb900#7bdcb5#00d084#8ed1fc#0693e3#9b51e0
