Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Tandem's visual identity channels healthcare optimism through a vibrant sky blue primary that dominates the interface, paired with approachable Montserrat typography that feels both professional and human. The brand radiates active wellness and outdoor vitality, positioning diabetes management as an empowering lifestyle choice rather than a medical burden.

Signature Color
Tandem Sky Blue
#009ce8
healthcare optimism and digital empowerment - the color of clear skies and unlimited possibility in diabetes management
The hero layout featuring real people in outdoor adventure settings with bright overlaid messaging boxes creates an unmistakable 'active lifestyle healthcare' aesthetic that differentiates from typical sterile medical interfaces.
Buttons use generous rounded corners (approximately 8px) with the signature sky blue background and clean white text. Cards feature soft shadows and rounded edges that feel approachable rather than clinical. The overall component treatment is friendly and accessible, avoiding sharp medical device aesthetics.
Generous whitespace creates breathing room that feels optimistic rather than cramped. The layout uses approximately 40-60px gaps between major sections, with comfortable padding that never feels tight or constraining - reinforcing the freedom-focused brand message.
Active adults with diabetes who refuse to let their condition limit their lifestyle ambitions and seek technology that empowers rather than restricts their daily adventures.
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 18px | 400 | 27px | |
| h1 | 18px | 400 | 27px | |
| h2 | 30px | 400 | 36px | |
| p | 14px | 400 | 21.994px | |
| a | 14px | 500 | 21px | |
| button | 18px | 400 | 27px | |
| nav | 18px | 400 | 27px | |
| footer | 18px | 400 | 27px | |
| main | 18px | 400 | 27px |
#009ce8#e5f2fa#008abf#00364f#002a3d#70d44b#fbb04c#d71920#ffffff#000000#f7f9fa#aec1cc