Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Cazoo
AutomotiveCazoo presents a premium automotive marketplace with a distinctive mint-green celadon backdrop that feels fresh and trustworthy. The vibrant orange accents (#ff5033) create energetic focal points against the calming sage-green environment, while the custom cazooSansFont delivers approachable professionalism that makes car buying feel less intimidating.
Design Identity
Signature Color
Cazoo Celadon
#e5ede8
Automotive trust and environmental consciousness - suggests clean, sustainable car buying
Visual Identity
The distinctive mint-green celadon background color creates an instantly recognizable automotive marketplace aesthetic that stands apart from typical white or blue car sites.
Component Style
Rounded corners with generous padding create friendly, approachable components. The main search button uses bold orange (#ff5033) with substantial 16px 32px padding and medium border radius around 8-12px. Form inputs have subtle borders with clean white backgrounds and ample breathing room.
Spacing Philosophy
Generous breathing room throughout with large section gaps creating an uncluttered, premium feel. The left sidebar maintains tight internal spacing while the main content area uses expansive whitespace to reduce cognitive load during car shopping.
Design Principles
- Celadon green backgrounds create calming, trustworthy environments
- Orange accents (#ff5033) reserved for primary actions and energy
- Border radius consistently around 8-12px for friendly approachability
- Typography uses only cazooSansFont with weights 400, 500, 600
- Button font weight always 600 for confident decision-making
Target Audience
Time-conscious car buyers who value digital-first experiences and want to avoid traditional dealership pressure - likely millennials and Gen Z professionals seeking transparent, efficient vehicle purchasing
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 | |
| h1 | 20px | 500 | 28px | |
| h2 | 36px | 600 | 40px | |
| h3 | 16px | 400 | 24px | |
| h4 | 16px | 600 | 24px | |
| p | 18px | 400 | 28px | |
| a | 16px | 400 | 24px | |
| button | 16px | 600 | 24px | |
| input | 16px | 400 | 24px | |
| nav | 16px | 400 | 24px |
Color Palette
#c7d1cb#4bee7f#d14532#f2f2f2#e5ede8#ffffff#6b6b6b#e9f2eb#db3a12#bfd3c5#252a27#86948a
