Design a dark-mode mobile app interface screen: dark luxury botanical grocery with illuminated emerald cards, warm organic imagery, and luminous mint interaction cues.
LAYOUT
The mobile view is organized in a tight, scroll-friendly single column with 16px lateral padding. The structure flows sequentially: App Bar with cart pill counter, followed by a wide-format Hero Banner anchored by carousel indicator dots, a full-width horizontally grouped category panel, and a 2-to-3 column product card grid preceded by section headers with right-aligned 'View all' text links.
PALETTE (use these exact hex values)
- #07181a — Canvas Midnight Teal: Deep ambient background canvas for the entire viewport screen.
- #0d2224 — Surface Elevation One: Base surface color for category pills and standard product card tiles.
- linear-gradient(135deg, #092c28 0%, #081d1e 100%) — Hero Banner Gradient: Atmospheric background fill for the top featured deal hero card.
- #34c77b — Vibrant Mint: Primary brand color for active states, counter badges, and category indicators.
- #0c6753 — Deep Forest Teal: High-contrast fill for circular price badge overlays and active category bubbles.
- #d4a737 — Amber Harvest: Corner ribbon banner highlight for bestsellers and promotional deals.
- #ffffff — Pure White: Display titles, product names, action button fills, and primary metrics.
- #7c9894 — Muted Sage: Secondary descriptors, unselected category labels, and structural line icons.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or DM Sans, Urbanist, Inter), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 20px heading, 24px display. Tracking -0.01em at display, 0.01em at caption. Plus Jakarta Sans delivers a modernist, human-centered clarity with clean geometric terminals that feel both tech-forward and naturally approachable. Its prominent x-height keeps 11px and 12px tags effortlessly legible against deep charcoal-teal backgrounds. DM Sans and Inter serve as drop-in open-source web-safe replacements without loss of rhythm.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 999px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is created strictly through chromatic layering rather than cast shadows. Elements sit on an ultra-dark teal base canvas (#07181a), stepping up to subtle slate-teal containers (#0d2224), and accented by luminous 1.5px border strokes in mint (#34c77b) on active elements. Floating interactive overlays within hero modules utilize frosted translucent surfaces with faint 1px inner borders.
IMAGERY
Photography features ultra-high-definition, tactile botanical subjects (sliced citrus and apples, crusty artisan sourdough bread, dewy broccoli florets) rendered with naturalistic studio lighting. All items are completely isolated without external background clutter, allowing products to glow directly out of the dark container fills.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable identity lies in the luminous mint-framed product card with an amber bestseller ribbon, contrasting against hyper-clean isolated food renders on a dark forest-teal surface. This creates a high-end delicatessen experience on mobile. It is misused if applied universally across all cards rather than reserved for the single selected or active state.
MUST
- Keep all product photography strictly transparent-backed with crisp organic contours against dark card surfaces.
- Use solid mint green (#34c77b) exclusively for actionable status indicators, active outlines, and monetary figures.
- Maintain generous card border radii between 16px and 24px to preserve the friendly botanical aesthetic.
- Use the white pill button variant strictly for the primary hero conversion touchpoint.
AVOID
- Do not introduce pure pitch black (#000000) surfaces; always tint dark tones with pine or teal.
- Avoid standard rectangular sharp corners; sharp 0px radii break the tactile organic motif.
- Do not use multi-color photographic backdrops inside product listing tiles.
- Never outline inactive product cards with bright border strokes.
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 中尝试 
