Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Vertex
HealthcareVertex presents a sophisticated biotechnology aesthetic anchored by deep, cosmic purples that convey scientific gravitas and transformational possibility. The brand uses bold, geometric typography with generous whitespace to create an authoritative yet approachable presence that speaks to life-changing medical innovation.
Design Identity
Signature Color
Vertex Deep Purple
#52247f
scientific authority and transformational medicine - conveying the depth of research and the profound impact of breakthrough therapies
Visual Identity
Immersive purple gradient backgrounds that create a sense of infinite scientific possibility, combined with stark white typography that cuts through like breakthrough discoveries emerging from complex research
Component Style
Minimal, pill-shaped buttons with generous padding and clean edges. Components favor subtle borders over heavy shadows, maintaining scientific precision. The 'Read more' button uses rounded corners (24px+) with white background against the purple, creating gentle contrast rather than harsh edges.
Spacing Philosophy
Expansive vertical breathing room with the hero section dominating the viewport. Text blocks are given ample margin to emphasize the weight of each statement, while the layout uses asymmetrical left-alignment to create visual tension and forward momentum.
Design Principles
- Hero sections consume 80%+ of viewport height for maximum impact
- Typography scaling jumps dramatically from 18px body to 64px headlines
- Purple gradients transition from deep (#52247f) to lighter tones vertically
- Base border radius stays minimal at 2px except for primary CTAs which use pill shapes
- White text maintains stark contrast against all purple backgrounds
Target Audience
Healthcare professionals, researchers, and patients dealing with serious genetic diseases who need to trust in cutting-edge scientific capability and transformational outcomes
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 | 18px | 400 | 24px | |
| h1 | 64px | 600 | 72px | |
| h3 | 40px | 600 | 48px | |
| h4 | 20px | 500 | 24px | |
| h5 | 24px | 500 | 32px | |
| h6 | 18px | 600 | 24px | |
| p | 18px | 400 | 28px | |
| a | 18px | 400 | 24px | |
| button | 16px | 600 | 20px | |
| input | 14px | 400 | normal |
Color Palette
#000000#42247f#7e5aad#1f0e30#381f60#c09bcc#e2daf2#52247f#8540c9#381957#bb8899#ebdff6
