Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Vertice
SaaS ManagementVertice employs a sophisticated enterprise aesthetic built on an arctic blue-gray foundation that evokes trust and technical precision. The typography system uses Inter New with dramatic scale jumps (68px headlines to 15px body) creating a confident, authoritative voice for serious B2B decision-makers.
Design Identity
Signature Color
Arctic Slate
#f8fafc
enterprise sophistication and technical reliability for SaaS procurement platforms
Visual Identity
Extreme contrast between massive bold headlines and minimal body text, set against an almost-white blue-tinted background that feels both premium and approachable.
Component Style
Soft, approachable components with generous rounded corners and subtle elevation. The primary CTA uses a vibrant purple with substantial padding (16px 32px) and medium border radius (8px), creating friendly but professional touchpoints.
Spacing Philosophy
Generous breathing room with large vertical gaps between sections, while maintaining compact internal component spacing. The layout feels uncluttered and executive-focused.
Design Principles
- Typography scale jumps dramatically: 68px headlines to 15px body text
- Font weight stays consistent at 500 for all headings
- Background uses blue-tinted whites (#f8fafc) instead of pure white
- Primary text maintains strong contrast at #0f1729
- Border radius appears consistently moderate across components
Target Audience
Enterprise procurement teams and CFOs managing SaaS spend who need sophisticated financial tools with approachable interfaces
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 | 20px | |
| h1 | 68px | 500 | 78.2px | |
| h2 | 48px | 500 | 48px | |
| h3 | 28px | 500 | 39.2px | |
| p | 15px | 400 | 18px | |
| a | 15px | 400 | 24px | |
| button | 15px | 700 | 22.5px | |
| input | 15px | 400 | normal | |
| nav | 16px | 400 | 20px | |
| footer | 16px | 400 | 20px |
Color Palette
#f8fafc#0f1729#e1e7ef#e3fbe0#16a239#fef1f2#dc2828#0a0f1c#94a3b8#344256#007aff
