Design a dark-mode mobile app interface screen: dark botanical luxury grounding tactile organic produce in atmospheric obsidian depth and crisp sunlit cards.
LAYOUT
The mobile viewport follows an editorial narrative hierarchy: ambient immersive hero banner blending into dark space, followed by an abrupt, high-contrast white card for brand trust, transitioning into a dense 4x2 visual category matrix, and concluding with horizontally scrolling product shelves.
PALETTE (use these exact hex values)
- #07120e — Obsidian Pine Base: dominant screen background creating immersive, dark mood
- #f6f7f5 — Sunlit Cream Card: high-contrast feature card background for editorial storytelling
- #7e9f4c — Harvest Olive: primary interactive pills, cart badge, active tab indicator, accent titles
- #8e9e95 — Muted Sage: secondary body descriptions and unselected nav items on dark backgrounds
- #ffffff — Pure Chalk: display headings, category titles, and high-emphasis labels on dark backgrounds
- #131916 — Soil Charcoal: headline and icon accents inside light feature cards
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 13px body, 15px subheading, 18px heading, 32px display. Tracking -0.02em at display, 0.01em at caption. Set in a geometric neo-grotesque sans-serif (Plus Jakarta Sans match) combining high legibility at micro sizes with sophisticated display elegance. The dual-tone headline technique ('Pure food.' in white, 'Better life.' in olive) establishes a rhythmic, lifestyle-driven editorial cadence without requiring a serif.
GEOMETRY & SPACING
Corner radii — cards 18px, links 2px, inputs 999px, buttons 999px. Spacing on a 4px unit, 10px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is created purely through luminous photographic contrast and subtle edge scrims rather than structural box-shadows. Floating surfaces, such as the light editorial story card, rely on dramatic value inversion against the #07120e dark base to achieve visual separation.
IMAGERY
Photography is cinematic, tactile, and naturalistic, showing water droplets on freshly picked grapes, rich garden soils, and vibrant botanical greens. Never use illustrated flat produce or bleached, sterile supermarket studio renders; subjects must look pulled straight from damp earth.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden high-contrast insertion of the warm white editorial plaque (#f6f7f5) directly into an otherwise moody, deep obsidian environment. It acts like a fresh linen table set in a dark cellar; improper usage would be removing this contrast or turning the entire background light.
MUST
- Use lush, hyper-detailed macro photography where produce glistens against dark or neutral grounds.
- Preserve the stark high-key editorial card (#f6f7f5) as a deliberate focal interruption on dark screens.
- Color-code primary interactive touchpoints exclusively with muted olive green (#7e9f4c).
- Keep category tiles strictly photographic with bottom-heavy dark scrims for white text legibility.
AVOID
- Do not use neon, artificial greens; stick strictly to muted botanical olive and sage tones.
- Do not place borders or heavy drop shadows around category tiles; let photographic contrast define edges.
- Avoid converting all sections to light cards; the dark canvas must remain dominant (70%+).
- Do not use sharp 0px corners anywhere; radii must stay soft (14px to 18px, or full pill).
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 中尝试 
