Design a dark-mode web interface screen: deep obsidian surfaces illuminated by soft botanical teal gradients and tactile culinary photography.
LAYOUT
The interface is structured as a two-column desktop web app: a fixed 240px dark left rail and a fluid primary content area bounded to ~1200px. Content flows vertically from a personalized header and wide hero callout into a balanced 50/50 two-column analytical section (Inventory Quad vs Waste Saved chart). Below, full-width segmented rows house the horizontal Expiring Items reel followed by complementary guide and recipe recommendation modules.
PALETTE (use these exact hex values)
- #080c11 — Canvas Background: deepest page background behind navigation and main grid
- #0d131a — Surface Raised: primary container background for cards, metrics, and list modules
- #131c26 — Surface Overlay: nested tiles, item cards, and button backgrounds
- #1a2530 — Border Subtle: perimeter borders for cards and divider lines
- #1db597 — Emerald Teal: primary brand callouts, active indicators, and hero button fills
- #15423f — Teal Glow Fill: subtle background fill for active navigation pill and metric tags
- #ffffff — Text Primary: main titles, primary figures, and prominent navigation labels
- #8493a5 — Text Secondary: subtitles, labels, timestamps, and inactive iconography
- #e5a93c — Alert Amber: warning indicators, use-soon badges, and medium expiry alerts
- #e05353 — Alert Coral: critical expiration badges, expired items, and urgency highlights
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 40px display. Tracking -0.03em display, -0.01em body. The geometric sans-serif (Plus Jakarta Sans match) projects technical clarity balanced by approachable, modern warmth. Tight display headings deliver confident financial and eco-conscious messaging, while legible tabular numerals keep complex grocery timelines effortless to scan. Free open-source substitutes like Inter or DM Sans match the structure seamlessly.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 10px, buttons 10px. Spacing on a 8px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is achieved entirely through chromatic layering and hairline perimeter strokes rather than cast drop shadows. Surface 0 (#080c11) recedes beneath Surface 1 (#0d131a) containers framed by 1px #1a2530 outlines, while nested Surface 2 tiles (#131c26) lift interactive elements forward. Translucent frosted cards in the hero space leverage backdrop-filter blur (12px-16px) with an ultra-fine border highlight.
IMAGERY
Photography consists of rich, studio-lit culinary assets: vibrant organic produce (dark greens, glossy peppers) with dramatic rim lighting for the hero, clean isolated product cutouts for inventory cards, and warm plated meals for recipes. Cheerful illustrative cartoons, desaturated flat stock photos, or low-resolution imagery would severely compromise the premium feel.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dark botanical glow aesthetic: pairing a deep obsidian background with vibrant emerald teal pill highlights and frosted glass metric cards layered directly over organic lifestyle photography. It fuses high-end fintech precision with organic culinary warmth. To execute properly, retain the soft green sparkline over the dark photography and maintain muted 1px border strokes.
MUST
- Use solid #080c11 for the background canvas and #0d131a for card boundaries.
- Pair emerald teal (#1db597) exclusively with positive metrics and primary action buttons.
- Render item photos as crisp cutouts with neutral transparent shadows on dark tiles.
- Keep border outlines hairline thin at exactly 1px using dark slate #1a2530.
AVOID
- Never use pure white (#ffffff) for card container surfaces; keep them deeply dark.
- Avoid high-contrast saturated red; use calibrated coral red (#e05353).
- Do not omit the 1px subtle card border; dark surfaces will visually blend without it.
- Never use generic square corners; enforce 10px to 20px radii across all elements.
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 中尝试 
