Design a light-mode web interface screen: sun-drenched aperitivo hour meets precise editorial swiss typography and vibrant citrus accents.
LAYOUT
The page opens with a sharp black utility header, followed by a dramatic 50/50 hero split: left-aligned editorial typography and CTAs against a full-height lifestyle packshot. Below runs a rhythm of 4-column benefit cards, followed by an asymmetric split containing an interactive quiz card on the left and a dense best-seller list on the right, terminating in paired editorial lifestyle tiles.
PALETTE (use these exact hex values)
- #FAF8F5 — Linen Canvas: Primary warm background canvas providing editorial print feel across the viewport
- #0A0A0A — Ink Black: Global navigation bar, primary buttons, and heavy sans headlines
- #E25238 — Terracotta Coral: Editorial italic headline words, badge count, star motifs, and warm accents
- #F0EDE6 — Muted Biscuit: Soft neutral container fill for benefit cards and subtle secondary buttons
- #E3DED6 — Editorial Border: Delicate 1px borders around secondary pill tags, bundles, and product rows
- #54524F — Charcoal Body: Secondary descriptive copy, card captions, and volume indicators
TYPOGRAPHY
Typeface Plus Jakarta Sans (or General Sans, Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 36px heading, 56px display. Tracking -0.03em for titles, +0.05em for micro uppercase. The voice is that of a contemporary European craft beverage studio: cultured, refreshing, and precise. Plus Jakarta Sans provides clean industrial legibility, while Instrument Serif's calligraphic italic injects flavor and warmth. Free pairings like DM Sans and Instrument Serif replicate this flawlessly.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 6px, buttons 6px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly through warm atmospheric photography, tonal shifts in surface fills (#FAF8F5 to #F2EFE9), and precise dark boundaries. No drop shadows are visible anywhere on UI containers, cards, or buttons; physical depth is reserved for the bottle glass refractions and sunlight within photographs.
IMAGERY
Photography follows a sun-drenched golden hour aesthetic: natural dappled light, marble bistro surfaces, cut pink grapefruits, splashing tonic, and condensation on clean glassware. Renders or flat e-commerce white sweeps are completely forbidden; all packaging must inhabit physical, warm spaces.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-type headline construction where a razor-sharp geometric sans headline is completed by a fluid, warm terracotta coral italic serif keyword. If the serif italic keyword is converted to sans or matching black, the entire warm editorial personality collapses into generic D2C minimalism.
MUST
- Always pair the bold geometric sans headline with a single terracotta serif italic word for emotional accents.
- Maintain strict 16px border-radius on all content containers and image cards.
- Use warm linen (#FAF8F5) rather than clinical white (#FFFFFF) for the page background.
- Insert 4-point sparkle glyphs (✦) in #E25238 as typographic micro-dividers.
AVOID
- Do not set entire headlines in the italic serif; it must strictly highlight one key word.
- Never use pure cold grey (#808080); always pull grey toward warm biscuit or charcoal (#54524F).
- Avoid heavy drop shadows or 3D skeuomorphic bevels; rely entirely on background tone boundaries.
- Do not use high-saturation reds or primary blues for accents; stick to warm terracotta (#E25238).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1552:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
