Design a dark-mode mobile app interface screen: moody nocturnal pizzeria interface balancing steam-lit hero photography with muted botanical olive accents.
LAYOUT
The mobile layout follows an editorial single-column scroll with rhythmic horizontal breaks. The page begins with a top utility bar, flows immediately into an expansive dark-vignetted hero carousel with CTA, transitions into a docked category capsule bar, introduces a 3-column horizontal incentive card rail under a section heading, and closes with an expansive heritage storytelling banner.
PALETTE (use these exact hex values)
- #060807 — Obsidian Canvas: Root application background creating deep cinematic immersion
- #111b15 — Pine Shadow: Background fill for feature cards and value-proposition tiles
- #191f1c — Charcoal Pill: Background container for horizontal category navigation pill
- #607d4b — Olive Leaf: Primary CTA fill, icon badges, and organic accent highlights
- #ffffff — Flour White: Primary headlines, display titles, and prominent navigation labels
- #8d9890 — Herb Dust: Secondary descriptors, unselected labels, and micro-copy
- #e52521 — Cayenne Pepper: Notification badge fill and urgency indicators
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Poppins), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 28px heading. Tracking -0.02em at display, 0.01em at caption. The typographic tone is robust, approachable, and premium without feeling snobby or formal. Geometric sans-serif characters with open counters and generous x-height give instant readability against dark backdrops. A clean system like Plus Jakarta Sans or SF Pro preserves modern tech efficiency while letting rich photography deliver artisanal warmth.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 16px, buttons 14px. Spacing on a 4px unit, 14px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is rendered organically through lighting, dark-field photography, and soft tonal layers rather than drop shadows. Surface level 0 is pitch black, while level 1 containers sit in deep mossy green (#111b15) that softly emerges from the darkness. Food assets overlap their card frames slightly, leveraging photorealistic cast shadows and rising steam to simulate physical presence.
IMAGERY
Photographs must feel rustic, warm, and hyper-sensory: glistening melted cheese, fresh condensation on glassware, rising pizza steam, and fresh whole spices resting on dark slate or wood. Backgrounds within photography must seamlessly vignette into pure black. Flat vector illustrations or sterile studio packshots on white backgrounds are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the seamless bleed of steam-lit, high-gloss food photography fading into an organic deep-pine and black nocturnal canvas, accented by rounded olive-green buttons. It breaks down when product images are clipped sharply with hard edges instead of feathered into the dark background.
MUST
- Blend hero imagery into the black background using soft radial smoke or linear shadow gradients.
- Use deep muted pine green (#111b15) rather than neutral gray for container cards.
- Reserve vibrant red (#e52521) exclusively for active notifications and natural food colors.
- Employ consistent 20px corner radius across all feature and promotional card containers.
AVOID
- Do not introduce pure gray (#808080) or cool blue surfaces that conflict with earthy culinary tones.
- Never outline cards with harsh 1px light borders; let tonal steps define hierarchy.
- Avoid high-key white backgrounds or stark daylight food photography.
- Do not use sharp 90-degree corners on interactive buttons or categorical pills.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1520:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
