Design a light-mode mobile app interface screen: rich botanical photography paired with pristine white cards and leaf-tinted interaction accents.
LAYOUT
The vertical composition is anchored by an immersive dark photo hero banner at the top, transitioning seamlessly via rounded bottom corners into a bright, airy white catalog zone. A 4-column category strip sits directly below the fold, followed by a 'Fresh Picks' horizontally scrollable product shelf with explicit section headers and 'View all' text links. The lower screen reintroduces visual weight with a wide horizontal feature card highlighting 'Home Delivery'.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Light: Primary surface for the body, category tiles, and product listing cards
- #5E9B44 — Brand Leaf Green: Hero primary button, add-to-cart button, active iconography, and headline accent text
- #6EBE49 — Accent Light Green: Hover states, pill borders, and vibrant icon tinting
- #0D180F — Deep Forest Overlay: Background base for the top and bottom photographic promo banners
- #FBF5ED — Category Icon Peach: Circular background wash behind market and tour navigation icons
- #F0F7ED — Category Icon Green: Circular background wash behind café and story navigation icons
- #1A2218 — Text Primary Dark: Headings, titles, and prices on white surfaces
- #7A8277 — Text Secondary: Product weight sublabels, descriptions, and metadata
- #EBF0E8 — Border Subtle: Delicate border around category and product cards
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600/700/800. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 18px heading, 22px heading-lg, 28px display. Tracking -0.02em at titles, 0 at caption. The typographic tone is clean, modern, and trustworthy. By setting a geometric sans (Plus Jakarta Sans or Inter) at heavy 700+ weights with tight letter-spacing, the interface feels premium yet approachable, avoiding the rustic clichés of serif farmer-market fonts in favor of modern direct-to-consumer efficiency.
GEOMETRY & SPACING
Corner radii — cards 18px, links 999px, inputs 12px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is created almost entirely through spatial layering rather than drop shadows. Photography sits at the rear layer, topped by frosted glass elements (rgba(15,25,15,0.7) with blur(10px)) and crisp white cards. The product cards rely on crisp 1px borders (#EFF3EC) over a white base to separate items cleanly without muddy shadow casts.
IMAGERY
Photography is cinematic, farm-to-table, and rich in natural texture, featuring dark earth, woven baskets, and damp, vibrant greens. Product listings use pristine isolated cutouts of singular vegetables and fruits against clean transparency or pure white backgrounds. Vector art or synthetic 3D renders would drastically break the authentic organic feel.
SIGNATURE DETAIL — the thing that makes this design itself
The dark cinematic hero banner terminating in a soft frosted micro-feature pill, juxtaposed immediately above stark white, hyper-clean grocery category and item tiles.
MUST
- Use organic, photorealistic produce images cut out cleanly on white backgrounds for item cards.
- Maintain high-contrast white text against the dark rustic photographic hero zones.
- Enclose value props and trust signals in translucent rounded blur pills.
- Use pill radii (999px) strictly for all clickable buttons and notification counters.
AVOID
- Never use sharp, 0px-radius rectangles; the design relies exclusively on soft organic curves (16px-32px).
- Avoid flat, cartoonish iconography; keep line icons fine, rounded, and nature-themed.
- Do not use harsh black (#000000) for text; opt for deep earthy charcoal (#1A2218).
- Avoid heavy drop shadows; cards should rely on subtle outlines and elevation-less white surfaces.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub