Design a light-mode web interface screen: crisp montane editorial clarity grounded by earthen terracotta accents and expansive landscape photography.
LAYOUT
The page follows an editorial flow: a high-impact asymmetric hero with text left and mountain subject right, leading directly into a 4-pillar trust badge row. Next comes an offset narrative section pairing left-side body copy with a broad landscape photo, followed by a disciplined 3x2 destination card grid. The flow resolves into a full-width soft sand (#F7F5F2) inquiry banner.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary page background across hero and core narrative sections.
- #BA5443 — Warm Terracotta: Primary button fill, headline punctuation dots, and tracked eyebrow labels.
- #162028 — Deep Slate: Main headlines, navigation links, and solid destination card background tones.
- #5E666C — Granite Grey: Body paragraphs, subtitle metadata, and secondary supportive copy.
- #F7F5F2 — Pebble Sand: Subtle background container fill for booking and contact card segments.
- #EBF0EC — Mist Sage: Circular icon backing for outdoor activity feature items.
- #F5EFE8 — Warm Sandstone: Circular icon backing for cultural and community feature items.
- #121A20 — Vignette Dark: Base scrim and text shadow underlay on destination image cards.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or DM Sans, Outfit, Inter), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 22px subheading, 32px heading, 60px display. Tracking -0.03em display, 0.08em eyebrows. Plus Jakarta Sans delivers an immaculate modern balance: geometric clarity with slight humanist warmth that matches outdoor exploration and luxury travel. Its precise letterforms keep dense destination cards legible at 11-13px while providing commanding editorial weight at 60px.
GEOMETRY & SPACING
Corner radii — cards 16px, links 2px, inputs 6px, buttons 8px. Spacing on a 8px unit, 24px gaps, 88px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated almost exclusively through layering crisp imagery against flat white or sand backgrounds rather than drop shadows. On cards, depth emerges from dark photographic scrim gradients beneath pristine white typography, creating natural visual layers without elevation blurs.
IMAGERY
Photography emphasizes expansive, quiet natural wonder: misty fjords, alpine peaks with lone wanderers, historical ships on glass lakes, and golden-hour savannas. Every image features documentary-grade realism, natural colour grading, and generous atmospheric perspective rather than oversaturated tourist tropes.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive terracotta full-stop accentuation embedded directly into the hero typography ('Travel. Discover. Live.'). This punctuation-as-design-device instantly establishes an authoritative yet refined tone; it must never be applied to every word or body paragraph, remaining reserved strictly for prime editorial headers.
MUST
- Use #BA5443 terracotta sparingly for focal CTA buttons, eyebrows, and periods.
- Keep button corners strictly at 6px to 8px; never use pill shapes for buttons.
- Ensure destination cards maintain an aspect ratio close to 4:3 with 16px corner radius.
- Maintain high contrast between slate #162028 copy and clean #FFFFFF canvas.
AVOID
- Do not use bright primary blues, greens, or saturated neon accents anywhere.
- Never place full rounded pills (999px radius) on interactive buttons or cards.
- Do not use heavy multi-stop drop shadows; rely on imagery framing for separation.
- Never render headlines without the signature high-contrast slate #162028 color.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1776:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试