Design a light-mode web interface screen: sunlit resort editorial pairing crisp deep-teal typography with warm amber accents and breezy poolside product staging.
LAYOUT
The page adheres to a 1360px grid starting with an edge-to-edge utility strip, transitioning to a clean white navigation header. The hero is orchestrated as an asymmetric two-column composition: the left 55% hosts dynamic, overlapping product visuals and floating badge metadata, while the right 45% delivers an aligned editorial lockup ending in trust signals. Below the hero, an expansive rounded panel spans the full container width to neatly compartmentalize customer assurance items into four symmetrical columns.
PALETTE (use these exact hex values)
- #235760 — Maritime Teal: Primary brand color used for dominant headline, primary CTA button, active navigation states, and cart badges
- #16373E — Deep Harbor: Darkest structural tone applied exclusively to the top utility announcement bar
- #D99426 — Sunlit Ochre: High-visibility accent used for the gradient discount badge, icon accents, and sun motif
- #FFFFFF — Pure Canvas: Main page canvas, primary header background, and floating card fills
- #F7F6F2 — Alabaster Mist: Subtle surface tint for the bottom trust badge bar and soft radial background halos
- #5A676B — Weathered Slate: Secondary typography including sub-copy, micro labels, terms, and trust bar descriptions
- #E3E0D8 — Dune Border: Delicate separators, dashed coupon borders, and subtle pill outlines
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Ogg, Didot), weights 400/600. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 18px subheading, 28px heading, 76px display. Tracking -0.01em at display. The typographic tone is luxurious, breezy, and assertive, blending high-fashion editorial prestige with e-commerce clarity. The towering serif used for 'SALE' evokes luxury editorial glossies like Vogue or Porter, while the disciplined, widely tracked sans-serif handles UI utility with effortless poise. When deploying freely available fonts, pairing Playfair Display or Cormorant Garamond with Montserrat or Jost faithfully captures this resort-exclusive presence.
GEOMETRY & SPACING
Corner radii — cards 16px, links 0px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1360px container, airy density.
DEPTH
Depth is handled through realistic photographic cast shadows from sunlight rather than synthetic UI drop shadows. Floating cards (such as the Seasonal Offer glass card and 50% badge) utilize soft, low-opacity ambient drop shadows (rgba(0, 0, 0, 0.08) with 16px blur) combined with white borders to float naturally above the imagery.
IMAGERY
Art direction relies on high-end resort editorial photography shot in direct midday sun, producing crisp geometric cast shadows. Props are organic and summer-oriented—sliced oranges, condensation on glassware, white sunglasses, and tropical palm foliage against textured plaster or stone slabs. Grimy, indoor, or artificial studio strobe setups are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive pairing of a monumental high-contrast serif 'SALE' anchoring deep teal (#235760) against an asymmetric collage of direct-sunlight resort photography and warm amber badges. If reduced to standard flat e-commerce sans-serifs or centered product cutouts, the entire high-fashion holiday mood dissipates into an ordinary shoe catalog.
MUST
- Always space uppercase sans-serif text with minimum 0.12em tracking to preserve editorial refinement.
- Pair the bold transitional serif headline strictly with crisp, high-key daylight photography.
- Keep the primary CTA button in solid #235760 with generous horizontal padding (at least 36px).
- Ensure promotional badges use the warm amber gradient (#D99426) to cleanly counter the dominant teal.
AVOID
- Never substitute the deep teal (#235760) with generic neutral black or bright electric cyan.
- Do not set long paragraphs in the serif display face; reserve it purely for campaign focal words.
- Avoid harsh black drop shadows; use soft, diffused ambient occlusions under floating badges.
- Never omit wide letterspacing on uppercase UI tags and coupon vouchers.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3520:2336. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
