Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
BetterCloud
SaaS ManagementBetterCloud presents a cosmic SaaS management aesthetic that merges deep space blues with electric magenta accents, creating a nocturnal enterprise atmosphere. The bold Proxima Nova typography delivers authoritative messaging while the electric pink CTA creates an urgent, action-driven focal point against the midnight blue backdrop.
Design Identity
Signature Color
Electric Magenta
#FF1493
urgent action and innovation disrupting traditional enterprise software
Visual Identity
The dramatic contrast between deep space blue backgrounds and electric pink call-to-action elements creates an unmistakable cosmic enterprise aesthetic that feels both professional and disruptive.
Component Style
Bold, pill-shaped buttons with substantial padding and vivid backgrounds create maximum impact. The electric pink primary button has generous rounded corners (~24px) with no borders or shadows, designed for immediate visual dominance. Clean, borderless design philosophy throughout.
Spacing Philosophy
Generous asymmetrical layout with the hero content taking up roughly 40% of the left side while leaving dramatic negative space on the right. Large gaps between headline elements (~32px) create breathing room and emphasize the bold typography hierarchy.
Design Principles
- Electric pink (#FF1493) reserved exclusively for primary actions
- Deep blue gradients (#1a237e to #0d47a1) for backgrounds
- Proxima Nova at 56px/700 weight for hero headlines
- Pill-shaped buttons with 24px+ border radius
- No borders or shadows on primary components
Target Audience
IT administrators and SaaS managers at mid-to-large enterprises who need sophisticated tools but appreciate bold, confident branding
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 | 27.2px | |
| h1 | 56px | 700 | 64.4px | |
| h2 | 52px | 700 | 56px | |
| h3 | 30px | 700 | 38px | |
| p | 14px | 400 | 17px | |
| a | 16px | 400 | 27.2px | |
| button | 18px | 400 | 29.7px | |
| input | 20px | 400 | 28.5714px | |
| nav | 18px | 400 | 29.7px | |
| header | 16px | 400 | 27.2px |
Color Palette
#7a00df#007cba#006ba1#005a87#000000#abb8c3#ffffff#f78da7#cf2e2e#ff6900#fcb900#7bdcb5
