Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Instacart
FoodInstacart's design radiates grocery-store freshness through its signature forest green palette and approachable custom typography. The interface balances marketplace density with organic warmth, creating a trustworthy yet vibrant shopping experience that feels both efficient and human-centered.
Design Identity
Signature Color
Instacart Fresh Green
#108910
farm-to-door freshness and sustainable grocery delivery trust
Visual Identity
The generous use of warm forest green combined with high-density store cards featuring colorful discount badges creates an unmistakable marketplace energy that feels both abundant and organized.
Component Style
Moderately rounded corners (8-12px) with subtle shadows on cards, bright yellow circular discount badges that pop against store logos, and clean pill-shaped filter buttons that maintain accessibility while feeling friendly rather than corporate.
Spacing Philosophy
Dense information architecture with tight 8-16px internal spacing maximizes merchant visibility, while strategic 24-32px section breaks prevent overwhelming users - optimized for quick scanning of multiple options.
Design Principles
- Primary green (#108910) dominates CTAs and navigation
- Store cards maintain consistent heights with prominent logos
- Discount badges use high-contrast yellow circles for instant recognition
- Filter pills use 24px border radius for approachable interaction
- Typography never exceeds 3 weights: 400, 600, 700
Target Audience
Busy families and urban professionals who prioritize convenience but want to maintain control over their grocery shopping through variety and competitive pricing
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 | normal | |
| h1 | 26px | 600 | 33px | |
| h2 | 24px | 700 | normal | |
| h3 | 17px | 600 | 20px | |
| p | 16px | 400 | normal | |
| a | 16px | 400 | normal | |
| button | 13.3333px | 400 | normal | |
| input | 15px | 400 | normal | |
| nav | 16px | 400 | normal | |
| header | 16px | 400 | normal |
Color Palette
#f6fdf6#e9fbe9#108910#0d720d#0a610a#edf7f4#003d29#003121#001810#f7f5f0#faf1e5#efe9e1
