Design a light-mode mobile app interface screen: tactile grocery shopping anchored by soft curves, crisp product cutouts, and saturated produce accents.
LAYOUT
The viewport is orchestrated strictly for rapid thumb-driven horizontal browsing. A fixed top navigation bar gives immediate access to delivery address and cart count, flowing immediately into an expansive 16:9 promotion billboard. Below, a compact three-column category block bridges the banner into recurring horizontal product rails, each led by a descriptive header row with contextual action or timer chips.
PALETTE (use these exact hex values)
- #F8F9FA — Canvas Off-White: Background canvas behind scrolling lists, header navigation, and segmented rows
- #FFFFFF — Card White: Surface layer for category cards, standard product tiles, and circular icon controls
- #1E2E42 — Deep Slate Hero: Background tone and contrast anchor for the primary featured promotion carousel
- #1F54B8 — Cobalt Highlight: Selected or high-priority promotional card background in special offers
- #82C2A6 — Fresh Mint: Category icon surface for vegetables and light add-to-cart affirmative state
- #F77966 — Coral Melon: Category icon surface for fruits and notification counter badges
- #FFBF43 — Zest Amber: Category icon surface for juices and drinks
- #1A202C — Charcoal Title: Primary headings, titles, product names, and core icons
- #718096 — Muted Slate: Secondary subtitles, countdown timers, strikethrough prices, and section links
- #E8F5EE — Pale Mint Action: Background fill for quick-add round buttons across standard cards
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Urbanist, Poppins, Outfit), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 13px body, 15px body-lg, 17px subheading, 20px heading, 26px display. Tracking -0.02em for headings, 0 for body. The typography is buoyant, accessible, and highly legible, using a geometric grotesque (Plus Jakarta Sans) with generous aperture and spherical terminals. It communicates freshness, approachability, and precision through tight display headlines (-0.03em tracking) contrasted with crystal-clear numeric prices. Outfit or Poppins serve as exact free drop-in substitutes.
GEOMETRY & SPACING
Corner radii — cards 20px, links 8px, inputs 12px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is created almost entirely without blurred drop shadows, relying instead on clean surface layering: white (#FFFFFF) cards sitting atop an off-white canvas (#F8F9FA). The single deep contrast occurs in the hero banner and selected offer card through dark saturated fills rather than z-index casting. Subtle 1px solid borders (#EDF2F7) define object edges crisply without blurring.
IMAGERY
Photography consists strictly of ultra-clean, realistic, studio-lit food assets with clean alpha transparency. Fresh produce cutouts (e.g., sliced kiwi, lime halves, broccoli crowns) sit centrally in product tiles with minimal natural cast shadows. Hero imagery features lifestyle drink photography with crisp textural berries, mint sprigs, and condensation against dark slate backgrounds.
SIGNATURE DETAIL — the thing that makes this design itself
The rhythmic contrast between hyper-saturated organic produce cutouts centered inside crisp 18px rounded white square cards, punctuated by soft pastel category medallions and a single deep cobalt feature tile. Removing the transparent product cutouts or reducing the aggressive 20px card rounding would instantly collapse this into an indistinct utility app.
MUST
- Use perfectly clipped, shadowless transparent PNGs for all produce to maintain pure background hygiene.
- Ensure every card utilizes generous corner rounding between 18px and 24px.
- Pair colored category medallions exclusively with solid white internal icons.
- Keep standard add-to-cart buttons subtle in pale mint (#E8F5EE) with dark teal plus glyphs.
AVOID
- Never use square edges or hard right angles on any container or button.
- Do not render busy photo backgrounds inside standard vertical product cards.
- Avoid harsh black drop shadows; keep elevation subtle via tone contrast and 1px borders.
- Do not saturate product card backgrounds unless highlighting an urgent active deal.
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. 在 DraPub 中尝试 
