Design a light-mode web interface screen: sunlit wanderlust framed in pillowed glass and energetic electric blue.
LAYOUT
The page follows an asymmetric top hero layout: display title, search bar dock, and value props on the left, counterbalanced by a three-image asymmetric collage on the right. Below the hero, horizontal sections introduce categorized cards arranged in a responsive 3-column grid for vertical cards and a stacked 1-column list for horizontal cards. Each section is introduced by a standard header row with directional navigation controls on the far right.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Pure White: Primary background for pages, cards, and floating UI panels.
- #2563EB — Electric Royal Blue: Key action buttons, accent text highlight, active dots, and focal icons.
- #0F172A — Deep Slate Ink: Headings, titles, price values, and high-emphasis labels.
- #64748B — Muted Slate Gray: Subtitles, input labels, metadata, and non-active navigation items.
- #F1F5F9 — Light Border Tint: Subtle card outlines, dividers, and pill track indicators.
- #FDF2F0 — Blush Pill Background: Background for the top promotional pill tag.
- #E0564C — Blush Dot Red: Pulsing indicator dot inside promotional tag.
- #F59E0B — Star Amber: Star rating icon color in review badges and cards.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600/700/800. Sizes 12px caption, 14px body-sm, 15px body, 16px body-lg, 20px subheading, 24px heading, 32px heading-lg, 64px display. Tracking -0.03em at display, 0em at body. Clean, contemporary geometric sans-serif that balances modern digital precision with welcoming, friendly curves. Display sizes are tightly tracked and bold, conveying authority and wanderlust, while small body text remains highly legible in muted slate tones. Plus Jakarta Sans or Inter serve as the primary typographic match.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created through subtle, diffused ambient shadows (e.g., 0 8px 30px rgba(0, 0, 0, 0.05)) rather than layered borders or dark tones. Floating badges over photography use semi-translucent white backgrounds with backdrop blur to detach cleanly from rich imagery. Most cards sit flush on the white canvas separated by hairline borders.
IMAGERY
Photography is cinematic, vibrant, and natural with saturated blues and warm earth tones (Mediterranean coastlines, Kyoto pagodas, volcanic cliffs). All images have 16px to 20px rounded corners and fill their frames without letterboxing. Flat vector illustrations or artificial 3D assets are completely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the segmented pill-shaped search dock with an embedded circular blue search button, paired with the asymmetric multi-photo hero collage that has a rounded floating review pill overlay ('4.9 Top rated'). Misuse occurs when standard square inputs replace the pill dock, or when image corners are sharpened, breaking the friendly, aspirational luxury feel.
MUST
- Use 20px border-radius consistently on all card containers and image corners.
- Keep background pure white (#FFFFFF) to let rich photography provide the color.
- Highlight key headline nouns with the royal blue accent (#2563EB).
- Employ pill-shaped (999px) buttons and badges for interactive and tagged elements.
AVOID
- Do not introduce sharp 0px or 4px corners; keep geometry friendly and rounded.
- Do not use dark or heavy drop shadows; keep elevation soft and barely perceptible.
- Do not use secondary high-saturation colors; keep accents strictly blue and amber.
- Do not cram text against images; maintain 16px to 20px internal card padding.
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 中尝试 
