Design a light-mode mobile app interface screen: sun-drenched viticulture meets nocturnal obsidian cards, warmed by terracotta coral pills and gilded script flourishes.
LAYOUT
The interface is structured as a vertical sequence of autonomous floating rounded cards (24px radius) separated by 16px gaps over a light neutral canvas. It leads with a full-width hero header containing high-emotion lifestyle imagery, descends into a split photographic storytelling card, continues to an essential 4-slot category navigation bar, and concludes with a featured wine spotlight. Consistent 16px horizontal margins preserve a framed, editorial magazine aesthetic throughout.
PALETTE (use these exact hex values)
- #F8F8FA — Off-White Canvas: Outer background wrapping all floating card modules and interstitial page sections
- #17212B — Midnight Slate: Primary background for premium editorial cards and featured product showcases
- #FFFFFF — Pure White: Background for utility category cards, floating pill badges, and hamburger nav button
- #EB6D5B — Terracotta Coral: Primary conversion pill buttons, directional icons, and active slider pagination dots
- #CCA86E — Harvest Gold: Script sign-offs, refined monogram marks, and secondary price tags
- #9AA5B1 — Pewter Silver: Muted body text on dark cards and secondary descriptive captions
- #111820 — Deep Charcoal: Category titles, body text within light cards, and status bar elements
- #EEF5E6 — Pistachio Soft: Icon disc container background for the vineyard navigation module
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Freight Text, Georgia), weights 400/600/700. Sizes 9px caption, 10px body-sm, 12px body, 14px body-lg, 18px subheading, 22px heading, 26px heading-lg, 34px display. Tracking -0.01em at display, normal elsewhere. The typographic hierarchy is unapologetically editorial, marrying the timeless nobility of high-contrast transitional serifs with modern Scandinavian geometric clarity. The serif carries literary weight and prestige suitable for generational winemaking, while the sans-serif ensures legible transactional paths on small screens. Pinyon Script introduces an artisanal winemaker's signature, validating authenticity without overwhelming the layout.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 12px, buttons 999px. Spacing on a 4px unit, 16px gaps, 20px between sections, 390px container, comfortable density.
DEPTH
Depth is created structurally through layered overlapping objects rather than diffuse blurred shadows. The primary dimensionality comes from the cutout wine bottle physically extending past the card's top clipping plane and deep midnight cards floating over a soft canvas (#F8F8FA). Where drop shadows exist, they are whisper-soft (0 8px 24px rgba(0,0,0,0.06)) beneath the white category container.
IMAGERY
Photography embraces warm, natural golden-hour estate lighting featuring genuine human interaction and high-detail viticulture close-ups (e.g., sunlit grape clusters on the vine). Studio bottle photography must be strictly isolated on transparent backgrounds with accurate glass reflections and natural rim lighting. Flat vector clip art or cold, clinical photography would break the brand's tactile luxury warmth.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the dark midnight-slate module with an element breaking its top silhouette—specifically seen where the dark bottle neck extends above the card boundary while remaining anchored inside. To implement properly, place the subject inside an overflow-visible frame with negative margin-top, grounding the base inside the card with matching dark environmental grading. Misusing it involves applying this treatment to multiple generic elements or cutting off the overflow with hard container masks.
MUST
- Use high-contrast serif headlines for all primary story points and estate descriptions.
- Allow focal product imagery like wine bottles to bleed slightly outside their dark container borders.
- Keep primary action buttons strictly in Terracotta Coral (#EB6D5B) with full pill radiuses.
- Pair every four-column utility icon with its corresponding pastel background and baseline indicator line.
AVOID
- Do not use sharp 90-degree corners on cards, badges, or buttons anywhere in the interface.
- Never substitute the signature hand-lettered gold script with standard italic sans-serif.
- Do not deploy pure black (#000000); always favor Midnight Slate (#17212B) for dark surfaces.
- Never omit the uppercase tracked letter-spacing on subheadings and category eyebrows.
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 中尝试 
