Design a light-mode web interface screen: structured high-density fresh commerce framed in deep evergreen slate with crisp botanical teal accents.
LAYOUT
The interface operates as a master-detail dashboard with three distinct columns. A slim 230px dark rail sits fixed to the left; the central workspace spans roughly 720px containing a soft hero banner, category carousel, and 4-column product grid; and the 340px right utility column hosts quick reorders, free delivery progress, bundle packs, and social reviews. The rhythm follows strict 16px and 24px increments leading down into a dark multi-column footer.
PALETTE (use these exact hex values)
- #0B2329 — Evergreen Deep Slate: structural backdrop for the persistent left navigation bar and full-width footer
- #F5F7F9 — Canvas Ice: main page background supporting content cards and secondary columns
- #FFFFFF — Pure White: card container fills, search input surface, and elevated modal backgrounds
- #147B7D — Botanical Teal: primary CTAs, add-to-cart icons, active category outlines, and key badges
- #E6F3F2 — Mint Glaze: active pill fills, counter button backgrounds, and soft hero badges
- #1C2A30 — Charcoal Slate: primary headings, product names, and high-emphasis price tags
- #768B92 — Muted Moss: secondary metadata, weights, units, ratings counts, and inactive nav labels
- #F59E0B — Amber Sun: star rating icons, promotional tags, and delivery progress callouts
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Urbanist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 22px heading, 40px display. Tracking -0.02em at display, -0.01em at body, 0.02em at micro. The typographic tone is ultra-approachable, professional, and utilitarian, driven by Plus Jakarta Sans. Geometric clarity and wide counter spaces ensure legibility down to 11px tags while lending modern punch to the 40px hero heading. When substituting with Inter, reduce letter-spacing slightly to retain this contemporary tech-grocer aesthetic.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is communicated through tonal stratification rather than diffuse drop shadows. White #FFFFFF cards float atop an off-white #F5F7F9 canvas with hairline 1px borders (#EFF2F4) and ultra-soft ambient occlusion (0 2px 6px rgba(0, 0, 0, 0.03)). Floating food elements in the hero utilize authentic contact drop shadows to generate physical layering.
IMAGERY
Photographic assets comprise pristine studio packshots and fresh food produce isolated on pure transparent backgrounds. Produce items appear vibrant, glossy, and unblemished, accompanied by soft natural cast shadows. Lifestyle portraits in testimonial cards are tightly cropped circles (36px diameter) featuring bright, natural lighting.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-rail visual anchor: framing an ultra-light, cheerful grocery shopping experience between a deep evergreen slate sidebar (#0B2329) and an asymmetric right rail packed with utility cards. Misuse commonly occurs by converting the dark sidebar to white, which collapses visual boundaries and washes out the interface.
MUST
- Ground the canvas on #F5F7F9 to let crisp #FFFFFF cards create separation without heavy shadows.
- Use single cutout transparent PNGs for all grocery photography with clean natural drop shadows.
- Set the primary CTA and icon actions strictly to Botanical Teal (#147B7D).
- Maintain a tight 16px border-radius standard on standard cards and promo banners.
AVOID
- Do not use saturated primary greens or neon limes; rely strictly on deep botanical teal.
- Avoid box shadows with high spread; cards should look flat or carry less than 4px blur.
- Never place dark text directly on the sidebar without dropping contrast down to soft slate-white.
- Do not allow product photos to sit on busy textured backgrounds; transparent cutouts are required.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2256:3648. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
