Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Front
CommunicationFront embodies a nocturnal enterprise aesthetic with its deep purple gradient backdrop that evokes late-night operations and AI sophistication. The Suisse International typography creates a Swiss precision feel while the acid-green accent creates electric urgency against the cosmic darkness.
Design Identity
Signature Color
Electric Lime
#A3E635
AI-powered efficiency and breakthrough innovation cutting through enterprise complexity
Visual Identity
The dramatic purple-to-black gradient background combined with stark white text and electric lime accents creates an unmistakable 'enterprise at night' atmosphere that screams sophisticated B2B tooling.
Component Style
Buttons are pill-shaped with generous padding and strong contrast - the primary lime button demands attention while secondary buttons use subtle purple outlines. Everything feels substantial and trustworthy with medium border radius (12-16px) that's professional but not sterile.
Spacing Philosophy
Generous vertical breathing room with large 80px+ gaps between major sections creates executive-level confidence, while the centered hero content uses dramatic negative space to amplify the AI messaging impact.
Design Principles
- Typography uses only Suisse International at 14px body, 16px buttons, and 52-62px headlines
- Border radius stays between 12-16px for approachable professionalism
- Color palette limited to purple gradients, white text, and electric lime accents
- Button line-height locked at 40px for consistent interaction zones
- Font weights restricted to 400 (regular) and 500 (medium) for hierarchy
Target Audience
VP-level customer operations leaders at mid-market B2B companies who need to prove ROI on complex support tooling investments
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 | 14px | 400 | 20px | |
| h1 | 62px | 500 | 68px | |
| h2 | 52px | 500 | 62px | |
| h3 | 52px | 500 | 62px | |
| p | 14px | 500 | 20px | |
| a | 14px | 400 | 20px | |
| button | 16px | 500 | 40px | |
| header | 14px | 400 | 20px | |
| footer | 14px | 400 | 20px |
Color Palette
#007aff#3b82f6#ffffff
