Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Watershed
Climate TechWatershed embodies a thoughtful sustainability-first aesthetic that balances environmental gravitas with technological optimism. The brand uses soft cobalt blues and atmospheric gradients to create a sense of scientific precision wrapped in approachable warmth, while the custom Messina Sans typography adds intellectual authority without corporate coldness.
Design Identity
Signature Color
Climate Cobalt
#4a6fff
scientific credibility meets environmental action - trustworthy data analysis with forward-thinking sustainability
Visual Identity
Atmospheric data visualizations with floating metric cards over layered geometric backgrounds in muted blue-green gradients, creating a distinctive 'environmental intelligence dashboard' aesthetic that feels both analytical and organic.
Component Style
Softly rounded elements with subtle gradients and floating card treatments. Buttons have gentle 6-8px radius with gradient backgrounds, while interface cards appear to hover over atmospheric layered backgrounds. Everything feels weightless yet substantial - like data floating in a clean atmosphere.
Spacing Philosophy
Generous breathing room with 64px+ section gaps creates scientific precision, while compact 12-16px internal spacing keeps data digestible. The layout feels like a research interface - organized but not cramped, with clear hierarchical zones.
Design Principles
- Border radius stays between 6-12px for organic softness
- Typography uses only 3 weights: 400 for data, 500 for emphasis, no bold
- Gradients always flow from light cobalt to seafoam tones
- Cards float with subtle shadows over atmospheric backgrounds
- Interactive elements use cobalt-60 (#4a6fff) as the primary action color
Target Audience
Sustainability directors and ESG analysts at enterprise companies who need sophisticated climate data tools but want them to feel approachable rather than intimidatingly technical
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 | 20px | 500 | 24px | |
| h1 | 72px | 500 | 72px | |
| h2 | 48px | 500 | 60px | |
| h3 | 16px | 400 | 18.72px | |
| p | 20px | 500 | 28px | |
| a | 14px | 400 | 20px | |
| button | 16px | 500 | 28px | |
| input | 14px | 400 | 19.6px | |
| nav | 16px | 500 | 19.2px | |
| header | 20px | 500 | 24px |
Color Palette
#131b24#242633#4f596e#c0d0f0#e6ebf5#f5f7fa#fbfcfd#dae3ff#f0f4ff#e2f5fa#333e63#6e7786
