Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Kahoot
EdTechKahoot! embodies playful learning through bold rainbow gradients and whimsical character design. The brand radiates childlike joy and educational excitement with its signature vibrant color palette that transforms serious learning into an adventure.
Design Identity
Signature Color
Kahoot Purple
#9b51e0
Creative learning authority - the educational playground where fun meets knowledge
Visual Identity
The rainbow gradient wordmark 'awesome' and playful character mascots in winter scenes create an instantly recognizable gamified learning aesthetic that screams educational entertainment.
Component Style
Generous rounded corners (12-16px) with vibrant solid fills and subtle shadows. Cards have soft edges and breathing room, while buttons are pill-shaped with bold colors - everything feels approachable and game-like rather than corporate.
Spacing Philosophy
Generous whitespace creates playground-like openness. Large 48-64px gaps between product tiers emphasize choice, while compact internal padding keeps content digestible for younger audiences.
Design Principles
- Rainbow gradients always flow left-to-right from warm to cool
- Character illustrations maintain cartoon-like proportions with oversized heads
- Button corner radius consistently 24-32px for pill shapes
- Montserrat font weight never below 500 for clarity
- Purple (#9b51e0) always anchors the brand spectrum
Target Audience
Educators and students aged 8-18 who want learning to feel like playing games rather than traditional studying
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 | 43.08px | 800 | normal | |
| h2 | 32px | 700 | 41.6px | |
| p | 12px | 500 | 15px | |
| a | 16px | 400 | normal | |
| button | 16px | 400 | normal | |
| nav | 16px | 400 | normal | |
| header | 16px | 400 | normal | |
| footer | 16px | 400 | normal | |
| main | 16px | 400 | normal |
Color Palette
#9b51e0#000000#abb8c3#ffffff#f78da7#cf2e2e#ff6900#fcb900#7bdcb5#00d084#8ed1fc#0693e3
