Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Abbott
HealthcareAbbott's brand creates a medical-grade digital environment through an expansive lavender-to-deep-blue gradient backdrop that evokes both innovation and clinical trust. The custom Abbott Wallace Sans typography paired with minimalist white cards creates a sophisticated healthcare technology aesthetic that feels both approachable and authoritative.
Design Identity
Signature Color
Abbott Lavender
#9B8FE8
Medical innovation meets human warmth - bridging clinical precision with accessible healthcare
Visual Identity
The distinctive full-screen gradient background that transitions from soft lavender to deep navy blue, creating an immersive healthcare technology environment that's immediately recognizable
Component Style
Clean white cards with subtle shadows float against the gradient background, featuring rounded corners and generous padding. Components feel weightless and clinical - minimal borders, soft shadows, and plenty of breathing room create a sterile yet welcoming medical interface aesthetic.
Spacing Philosophy
Expansive vertical spacing with the search bar positioned high on the page creates a sense of openness and calm. Large gaps between content sections mirror the unhurried pace of thoughtful medical care, while internal component padding remains generous to enhance readability.
Design Principles
- Full-screen gradient backgrounds create immersive brand moments
- White content cards always float above colored backgrounds
- Typography scales use Abbott Wallace Sans for headers, system fonts for UI
- Soft shadows (0.15-0.175 opacity) maintain medical sterility
- Minimal borders with subtle grays (#dee2e6) preserve clean lines
Target Audience
Healthcare professionals, patients, and medical researchers who value both scientific rigor and human-centered design in their digital health interactions
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 | 24px | |
| h3 | 25px | 700 | 31.25px | |
| p | 20px | 400 | 30px | |
| a | 16px | 400 | 24px | |
| button | 16px | 400 | 24px | |
| input | 16px | 400 | 24px | |
| nav | 16px | 400 | 24px | |
| header | 16px | 400 | 24px | |
| main | 16px | 400 | 24px |
Color Palette
#dee2e6#fff3cd#cff4fc#dc3545#d63384#fcfcfd#0a58ca#ced4da#f8d7da#e9ecef#cfe2ff#198754
