Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Hotmart
EdTechHotmart radiates entrepreneurial warmth through its distinctive orange-red gradient hero section that transitions from fiery orange to deep burgundy, creating an energizing and ambitious atmosphere. The custom 'Hotmart Display' typography at massive 56px scale commands attention while Nunito Sans provides approachable readability, balancing aspiration with accessibility for digital entrepreneurs.
Design Identity
Signature Color
Hotmart Orange
#FF4500
entrepreneurial energy and digital commerce passion
Visual Identity
The dramatic warm gradient background that flows from vibrant orange to deep red, creating an unmistakable energy signature that feels both premium and approachable for creators and entrepreneurs.
Component Style
Soft-cornered components with 6px border radius throughout, creating friendly approachability. Buttons feel substantial with 600 weight typography and generous padding, while maintaining warmth through rounded edges rather than sharp corporate angles.
Spacing Philosophy
Generous breathing room with 32px container padding on desktop scaling down to 16px mobile, creating space for the bold gradient to breathe while keeping form elements comfortably spaced for easy interaction.
Design Principles
- Border radius consistently set to 6px for friendly approachability
- Typography hierarchy uses custom Hotmart fonts at display scale (56px) down to utility scale (14px)
- Container padding scales from 32px desktop to 16px mobile
- Font weights jump from regular 400 to semibold 600 for clear hierarchy
- Warm gradient backgrounds dominate hero sections for emotional connection
Target Audience
Digital entrepreneurs and course creators who want professional tools with approachable, energizing interfaces that inspire action and growth
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 | 56px | 400 | 56px | |
| h2 | 18px | 400 | 21.6px | |
| h3 | 32px | 400 | 38.4px | |
| h4 | 24px | 400 | 28.8px | |
| p | 14px | 400 | 16.8px | |
| a | 16px | 400 | 19.2px | |
| button | 14px | 600 | 14px | |
| nav | 16px | 400 | 19.2px | |
| header | 16px | 400 | 19.2px |
Color Palette
#e6e9ed#007aff
