Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Brainly
EdTechBrainly projects academic trust through bold, ultra-heavy condensed headlines that command attention, paired with a vibrant lime-green accent that energizes the educational experience. The design balances professional credibility with youthful optimism, using generous whitespace and warm photography to create an approachable yet authoritative tutoring platform.
Design Identity
Signature Color
Brainly Lime
#82D934
educational energy and growth - signaling active learning and positive outcomes
Visual Identity
Ultra-bold condensed typography at massive scale (64px+ headlines with 900 weight) combined with strategically placed lime-green accents creates an unmistakable academic authority that feels both serious and energetic.
Component Style
Pill-shaped buttons with substantial padding and vibrant backgrounds, no harsh shadows or borders. Components feel soft and approachable with generous border-radius (24px+ for primary actions) and smooth transitions that emphasize friendliness over corporate precision.
Spacing Philosophy
Generous breathing room with large section gaps that let the bold typography dominate. Content floats in clean white containers with ample padding, creating a study-friendly environment that doesn't feel cramped or overwhelming.
Design Principles
- Headlines use Barlow Semi Condensed at 64px with 900 weight for maximum impact
- Border radius scales from 4px to 999px pills, favoring rounded over sharp edges
- Lime green (#82D934) is reserved for primary actions and key highlights only
- Body text stays at 16px Figtree for optimal reading comfort
- Transitions use gentle cubic-bezier curves (320-400ms) for friendly interactions
Target Audience
Parents of school-age children who value educational outcomes and want reliable, safe tutoring support that feels approachable rather than intimidating or overly corporate.
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 | 64px | 900 | 72px | |
| h2 | 40px | 800 | 44px | |
| h3 | 16px | 650 | 24px | |
| p | 12px | 650 | 16px | |
| a | 16px | 400 | 24px | |
| button | 16px | 400 | 24px | |
| nav | 16px | 400 | 24px | |
| footer | 16px | 400 | 24px | |
| main | 16px | 400 | 24px |
Color Palette
#f2f2f2#ffffff#f5f5f5#0a0e09
