Design a light-mode web interface screen: festive coffeehouse elegance pairing deep evergreen slabs against warm porcelain curves and delicate nutritional grids.
LAYOUT
The page opens with a floating utility navigation bar spanning full container width. Below, an asymmetric split places campaign loyalty promos on the far left, an expansive editorial headline in the upper right, and a horizontal four-item product deck spanning the center. The visual center of gravity rests on the second card, elevated in height and color contrast. The viewport terminates with a four-column segmented feature strip pinned above the fold.
PALETTE (use these exact hex values)
- #F5F2EB — Canvas Oatmeal: Global background tone providing warmth and reducing pure white glare across the viewport.
- #0B3B2C — Siren Evergreen: Dominant brand anchor used for the active featured card, display headline, primary CTA pill, and carousel arrows.
- #FFFFFF — Card Porcelain: Background fill for resting inactive carousel cards and subtle interactive pill segments.
- #827F77 — Nutritional Muted Sand: Low-contrast metadata text, nutritional labels, percentages, and inactive field placeholders.
- #C59B4B — Gold Star: Rewards star badge icons and loyalty program highlight labels.
- #D83933 — Notification Crimson: Cart notification badge indicator on the basket icon.
- #E3DFD5 — Pale Divider: Hairline vertical splitters in footer ribbon and subtle input borders.
TYPOGRAPHY
Typeface SoDo Sans (or Inter, Montserrat, Plus Jakarta Sans), weights 400/500/600/700/800. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 56px display. Tracking -0.03em at display, 0.08em on uppercase labels. The typographic tone is celebratory yet premium and structured. By deploying a bespoke geometric sans with circular counters and crisp terminals, it balances commercial warmth with Scandinavian design restraint. For production environments, Inter or Plus Jakarta Sans with tightened tracking at display sizes faithfully replicates the punchy, organic rhythm.
GEOMETRY & SPACING
Corner radii — cards 28px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is created primarily through color inversion and vertical protrusion rather than heavy drop shadows. The featured dark card steps forward by pairing a saturated evergreen surface with physical overlapping borders and a generous soft blur ambient shadow beneath the protruding drink silhouette. Inactive cards cast almost imperceptible, warm-tinted daylight diffusions (0 12px 32px rgba(11, 59, 44, 0.04)).
IMAGERY
Beverage photography features hyper-detailed, high-contrast studio cutouts of frozen blended drinks with distinct whipped cream dollops, drizzle, and green straws. Cups are isolated cleanly on transparent alphas with zero artificial backdrop plates, allowing them to breach card boundaries. Lifestyle photography or flat illustrative drink graphics would violate the tactile realism.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the vertically dominant, dark evergreen active card with cut-out whipped cream topping extending outside its rounded container, flanked by floating pagination circles. It anchors an otherwise pale cream layout with immediate tactile contrast. To use it properly, ensure only one card holds the inverted color scheme; making multiple cards dark ruins the focal hierarchy.
MUST
- Anchor the viewport with one standout dark emerald card while surrounding siblings remain light alabaster.
- Allow cut-out beverage photography to physically break the top boundaries of cards by 40-60px.
- Use 999px pill radii strictly for inputs, tags, and interactive action buttons.
- Set secondary nutritional data in structured tabular columns using muted taupe-gray (#827F77).
AVOID
- Do not use harsh pure black (#000000) for typography; always use deep brand evergreen (#0B3B2C).
- Do not give active and inactive cards the same elevation, background color, or vertical height.
- Do not place rectangular sharp-cornered buttons or cards anywhere in this soft-radius system.
- Do not enclose the beverage imagery within a hard photographic crop or bounding box.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
