Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Picnic
GroceryPicnic creates a playful, approachable grocery delivery experience through bold geometric illustrations paired with clean sans-serif typography. The design balances friendly accessibility with efficient functionality, using bright accent colors against generous white space to feel both trustworthy and delightfully human.
Design Identity
Signature Color
Picnic Red
#cf2e2e
Bold grocery confidence - the red of fresh tomatoes and reliable delivery trucks
Visual Identity
Distinctive flat geometric illustrations featuring simplified human characters and delivery trucks with chunky, rounded forms that feel hand-crafted yet digitally precise
Component Style
Generously rounded buttons (24px+ radius) with solid fills and bold typography. Cards have soft shadows and clean white backgrounds. Everything feels approachable with substantial padding and friendly proportions.
Spacing Philosophy
Generous breathing room with large section gaps creating an uncluttered grocery aisle feel. Tight internal component spacing keeps information digestible while extensive white space prevents overwhelming busy shoppers.
Design Principles
- Roboto typography exclusively at 400-500 weight for approachable readability
- High contrast red elements against clean white backgrounds
- Rounded corners on all interactive elements (minimum 16px radius)
- Flat geometric illustrations with limited color palette
- Bold call-to-action buttons with 700 font weight
Target Audience
Busy urban families who value convenience but want their grocery delivery to feel personal and trustworthy rather than corporate
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 | 36px | 400 | 44px | |
| h2 | 36px | 500 | 40px | |
| h3 | 32px | 400 | 37.5px | |
| h4 | 16px | 500 | 21px | |
| p | 15px | 400 | 25px | |
| a | 15px | 400 | 24px | |
| button | 15px | 700 | 22.5px | |
| input | 15px | 400 | normal | |
| nav | 16px | 400 | 24px |
Color Palette
#000000#abb8c3#ffffff#f78da7#cf2e2e#ff6900#fcb900#7bdcb5#00d084#8ed1fc#0693e3#9b51e0
