Design a light-mode mobile app interface screen: dew-kissed organic harvest meets structured editorial commerce through warm pastels and earthen olive greens.
LAYOUT
The mobile layout follows an editorial single-column flow with horizontal carousel breaks. At the top sits a clean utilities header with logo and delivery location pill, followed by the featured seasonal banner card. Mid-page shifts to a horizontal-scrolling category tray, followed by a condensed four-pillar trust credential bar, resolving into a two-column or horizontally scrolling 'Best Sellers' catalog grid.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary screen background and container fills for product and trust modules
- #FAF5EE — Produce Peach: Card background tint dedicated to stone fruits and warm produce categories
- #F2F6F1 — Garden Celery: Card background tint dedicated to leafy greens and crisp vegetables
- #FBF2F3 — Blush Beet: Card background tint dedicated to root vegetables and earthy tubers
- #68883B — Harvest Olive: Primary interaction color used on pill CTAs, cart indicators, and add buttons
- #1A2218 — Deep Foliage: High-contrast dark charcoal-green for product headings and primary typography
- #767D74 — Morning Fog: Subtitles, category descriptors, package weights, and metadata captions
- #ECEEEB — Parchment Border: Delicate stroke on unselected category containers, icon buttons, and product cards
TYPOGRAPHY
Typeface Plus Jakarta Sans (or DM Sans, Inter), weights 400/500/600/700. Sizes 10px caption, 11px body-sm, 13px body, 14px body-lg, 15px subheading, 17px heading, 28px display. Tracking -0.02em at display, -0.005em at body. The typographic tone balances farmstead authenticity with modern Scandinavian clarity. Plus Jakarta Sans supplies crisp, functional readability for pricing, weights, and categorization. The bespoke serif logo provides an artisanal touchpoint that grounds the digital utility in traditional agriculture.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is rendered virtually flat, relying on delicate 1px borders (#ECEEEB) and soft chromatic card fills rather than heavy drop shadows. Micro-elevation appears strictly through natural drop shadows cast by the photographed produce items themselves onto the cards. This gives an authentic tabletop tactile quality without relying on artificial software blurs.
IMAGERY
Photography consists of hyper-crisp, moisture-covered whole foods with natural droplet reflections, shot under bright daylight. Hero banners display produce in situ on the branch, while catalog items feature studio-isolated objects with subtle contact shadows. Vector clip art, 3D clay graphics, or desaturated lifestyle imagery are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive signature move is the pairing of delicate produce-matched pastel cards (#FAF5EE, #F2F6F1, #FBF2F3) with studio-isolated realistic fruit and vegetable photography anchored by a pure white floating circular arrow button. Misusing this by introducing harsh vibrant saturated backgrounds or generic boxy borders immediately destroys the breezy, organic farmer's market sensibility.
MUST
- Use soft, category-matching pastel fills (#FAF5EE, #F2F6F1) strictly to segment food families.
- Maintain generous 18px to 24px corner radii across all banner and card containers.
- Pair realistic, moisture-rich macro farm photography with clean cutouts on transparent grounds.
- Reserve deep olive green (#68883B) for primary actions, badges, and interactive taps.
AVOID
- Never use generic flat saturated neon greens; stick strictly to harvest-inspired olive tones.
- Do not drop heavy, dark drop shadows; boundaries must be defined by tint or hairline borders.
- Never mix high-gloss modern tech illustrations with this raw, botanical visual language.
- Do not shrink product cutout photography; food must remain appetizing, tactile, and prominent.
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