Design a light-mode mobile app interface screen: rich dark-forest depths illuminated by crisp splash photography and luminous botanical accents.
LAYOUT
The mobile viewport is structured into three discrete vertical tempos: a dark, cinematic 280px hero marquee, followed by an overlapping white content sheet housing the category rail and popular product carousel, anchored by a dark green reassurance banner. Horizontal swipe tracks allow high-density item browsing without vertical scrolling fatigue. Key metrics include 16px screen margin padding and 12px item gutters.
PALETTE (use these exact hex values)
- #081811 — Forest Black: Deep botanical backdrop for the status bar, hero banner, and bottom trust ribbon.
- #ffffff — Pure Canvas: Bright card background delivering high-contrast readability for product lists and categories.
- #f5f7f4 — Soft Sage: Ultra-light tinted background for category icon backdrops and soft card states.
- #74a333 — Luminous Olive: Primary hero CTA fill, cart count badge, and category focus accents.
- #538127 — Garden Leaf: Secondary action outlines, interactive add-to-cart icons, and text links.
- #121b14 — Charcoal Bark: Primary headings, product names, and high-emphasis price tags.
- #7d8981 — Herbal Muted: Supporting copy, unit weights (500g, 1kg), and subtitle metadata.
- #eef2ed — Border Tint: Hairline division and bounding borders around product cards and icon wells.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Urbanist), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 28px display. Tracking -0.02em at display, 0 at body. The typography conveys health, purity, and approachable modern commerce through Plus Jakarta Sans. Its rounded structural finish and tall x-height deliver immediate clarity in small metadata units (10px–12px) while holding confident punchiness in the 28px display headline. Inter or SF Pro Display serve as direct zero-cost technical substitutes.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is achieved through high-contrast surface transitions rather than heavy cast shadows. White cards sit cleanly over subtle off-white backdrops with delicate 1px borders (#eef2ed). The dark hero section provides natural atmospheric depth, augmented by high-speed liquid splashes that leap off the flat canvas.
IMAGERY
Photography consists of hyper-detailed, vibrant organic produce with glistening water droplets, dramatic splashes, and scattered mint leaves. Cutout imagery in cards must be completely isolated with soft, natural directional contact shadows. Flat vector clip-art or unedited supermarket photos are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-zone contrast anchor: an intensely dark botanical green hero billboard displaying liquid water splashes around suspended organic fruit, instantly capped by an overlapping soft white card rail. Removing this cinematic transition would instantly reduce the app to a generic supermarket template.
MUST
- Use hyper-realistic splash and macro fruit photography isolated cleanly against transparent or dark forest layers.
- Enforce 999px pill geometry on all primary buttons and micro-badges.
- Pair deep forest green (#081811) with radiant lime (#74a333) to maintain fresh botanical vitality.
- Keep product card surfaces stark white (#ffffff) with subtle 1px border lines (#eef2ed) for surgical catalog hygiene.
AVOID
- Do not introduce sharp 0px or boxy low-radius corners anywhere in the layout.
- Avoid flat, dull food imagery; every produce asset must appear glistening, fresh, or dew-covered.
- Do not use saturated artificial colors like bright red or cyan for primary actions.
- Avoid solid dark backgrounds for product browsing grids; keep shopping surfaces airy and clean.
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 中尝试 
