Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Holaluz
EnergyHolaluz radiates warmth and approachability through its vibrant electric pink signature combined with soft, rounded components. The Gilroy typeface creates a friendly yet confident voice, while the gradient-heavy hero sections evoke energy transition and sustainability optimism.
Design Identity
Signature Color
Electric Pink
#e5007e
energetic sustainability and consumer empowerment in the renewable energy space
Visual Identity
Vibrant pink accent color combined with generous rounded corners (8px-100px range) and warm gradient backgrounds that transition from sunset oranges to deep magentas
Component Style
Soft, approachable components with 8px standard border radius and 100px pill buttons. Cards use subtle shadows (0 3px 17px rgba(38,46,54,.1)) with generous padding. Everything feels touchable and consumer-friendly rather than corporate.
Spacing Philosophy
Generous breathing room with large section padding creating an open, non-intimidating energy marketplace. 4px micro-spacing keeps elements connected while larger gaps between major sections create digestible content blocks.
Design Principles
- Border radius uses only 8px for cards and 100px for pill buttons
- Pink accent (#e5007e) is reserved for primary actions and key highlights
- Shadows are consistently subtle using rgba(38,46,54) at 10-25% opacity
- Gilroy font weight stays at 400 for body text and jumps to 700 for emphasis
- Gradient backgrounds use warm energy-themed color transitions
Target Audience
Spanish homeowners seeking transparent, eco-friendly energy solutions who value simplicity over technical complexity
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 | 18.4px | |
| h1 | 24px | 700 | 36px | |
| h2 | 24px | 700 | 27.6px | |
| h3 | 24px | 700 | 27.6px | |
| p | 15px | 400 | 19.5px | |
| a | 15px | 400 | 19.5px | |
| button | 16px | 700 | 22.4px | |
| input | 16px | 400 | 18.4px | |
| nav | 16px | 400 | 18.4px | |
| header | 16px | 400 | 18.4px |
Color Palette
#000000#090f20#b3005d#e5007e#f8b0cb#ffdfeb#262e36#37424d#65717e#d4d7db#f2f3f5#ffffff
