Design a light-mode mobile app interface screen: sun-drenched viticulture meets deep forest green luxury editorial cards.
LAYOUT
The mobile view is stacked vertically: a full-bleed 55vh atmospheric hero photograph with centered title, audio CTA, and pagination dots; followed by an overlapping dark green flagship product card; concluding with a lighter scroll section containing news cards and value teasers with 24px rhythmic spacing.
PALETTE (use these exact hex values)
- #F7F7F6 — Canvas Alabaster: Global background canvas for lower feed modules and app backdrop
- #FFFFFF — Card Pure White: Background for secondary news and values cards
- #15332F — Cypress Green: Dominant brand card surface, round app header icon buttons, and pill CTAs
- #C9A96E — Estate Gold: Thin circular data graphics, brand crests, button outlines, and accents
- #E08770 — Terracotta Date: Accent date numeral highlight within calendar feed chips
- #1A1A1A — Charcoal Espresso: Primary section titles, brand logotype, and high-emphasis body copy
- #767676 — Vine Muted: Secondary card copy, subheadings, and meta labels
- #FFFFFF — Frost White: Hero display text, dark card headings, and inverse icons
TYPOGRAPHY
Typeface Cormorant Garamond (or EB Garamond,Cinzel,Playfair Display), weights 400/500/600. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 22px heading, 34px display. Tracking -0.01em at display, 0.02em at body. The typographic tone is timeless, prestigious, and quiet. Cormorant Garamond lends centuries-old classical winemaking authority, while wide-spaced Montserrat ensures modern, functional mobile navigation and data clarity.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 12px, buttons 999px. Spacing on a 8px unit, 16px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is achieved almost entirely without drop shadows; instead, sharp contrast between overlapping planes creates depth. The deep cypress card physically overlaps the bottom edge of the photography layer, creating an optical shelf.
IMAGERY
Warm, golden-hour outdoor vineyard photography featuring rich amber foliage, sun-dappled vine hills, and warm earthen tones. Product renders must be crisp cutout glass bottles with reflective highlights, and editorial photography must remain warm, documentary, and human.
SIGNATURE DETAIL — the thing that makes this design itself
The central wine bottle framed by concentric thin multi-colored gauge arcs (#C9A96E) embedded directly inside a rounded deep-green canvas. Misusing it means turning the arc into a heavy infographic ring or breaking the bottle out into a separate card.
MUST
- Use deep cypress green (#15332F) exclusively for high-status hero elements and interactive buttons.
- Pair wide-tracked uppercase sans-serif (tracking 0.15em) with elegant serif titles for authentic Italian viticulture feel.
- Round content cards with a consistent 24px border-radius.
- Keep hairline data graphics and concentric rings at 1px thickness in antique gold (#C9A96E).
AVOID
- Do not use sharp 0px or small 4px corners on any card surfaces.
- Never replace the warm cream canvas (#F7F7F6) with harsh cool pure grey (#E5E7EB).
- Avoid solid heavy button fills inside the dark green card; rely on delicate gold outline pills.
- Do not drop serif display typefaces below 18px size; use clean sans-serif for microcopy.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1392:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
