Design a light-mode mobile app interface screen: sun-drenched resort mornings translated into high-contrast editorial loyalty interfaces with tactile warmth.
LAYOUT
The vertical composition moves deliberately from emotional inspiration to tactical utility, followed by exploratory discovery and personal loyalty reinforcement. The screen begins with a photographic hero that soft-fades into the background, intercepted midway by the floating search dock. Below, a horizontally scrolling four-part card carousel invites exploration, leading down to the dense, dark-mode loyalty dashboard module.
PALETTE (use these exact hex values)
- #FBF9F5 — Linen Canvas: Primary screen backdrop establishing organic, warm luxury tone across the entire viewport
- #FFFFFF — Pure Sand White: Floating search floating dock and destination card container background
- #27352D — Cypress Forest: Background for loyalty rewards card, primary CTA buttons, and header monogram avatar
- #4C1E26 — Cabernet Accent: Circular submit button inside the trip planning dock to emphasize instant booking action
- #C29F62 — Tuscan Gold: Accents, category eyebrow bars, progress track meters, and secondary membership typography
- #1A1D1A — Charcoal Bark: Primary display headlines, destination card titles, and high-emphasis labels
- #6B7068 — Soft Thyme: Secondary instructions, filter labels, and descriptive destination taglines
- #E9E5DD — Muted Slate Border: Hairline separator lines between search fields and boundary dividers
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Freight Display Pro), weights 400/600. Sizes 10px caption, 12px body-sm, 14px body, 16px subheading, 24px heading, 38px display. Tracking -0.01em at large sizes, normal at subheadings. The typographic identity conveys heritage, exclusivity, and leisurely travel through an editorial serif with dramatic thick-thin strokes (Playfair Display / Cormorant). This is tempered by Plus Jakarta Sans in uppercase tracking, which injects architectural precision and modern digital clarity. For production environments lacking custom licenses, Playfair Display and Plus Jakarta Sans are the ideal open-source pairings.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 24px, buttons 12px. Spacing on a 4px unit, 12px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is created organically through soft, ambient multi-stop drop shadows rather than sharp borders. The floating search dock uses a low-opacity warm-cypress shadow (0 10px 30px rgba(39,53,45,0.08)) to hover over the hero boundary, while category cards rely purely on surface-contrast against the cream foundation.
IMAGERY
Photography captures candid, sun-kissed golden-hour moments with natural light flares, warm color temperature, and relaxed luxury subjects (resorts, couples, architectural heritage). Cold clinical hotel stock, neon nightlife photos, or overly posed corporate travel imagery are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The floating white segmented search bar anchored with an asymmetrical burgundy circular FAB, precisely overlapping the boundary between warm photography and the linen canvas. To execute properly, ensure it maintains a 24px pill-box card radius and sits 50% across the hero photo's lower edge. It is commonly misused by turning it into a full-width flat input field without the circular action anchor.
MUST
- Retain the #FBF9F5 warm cream canvas; stark white screens ruin the quiet luxury mood.
- Pair high-contrast Playfair Display titles with tracked, low-contrast sans-serif microcopy.
- Use deep forest cypress green (#27352D) as the primary grounding shade for high-importance cards.
- Isolate the deep burgundy (#4C1E26) strictly for prime interactive booking triggers.
AVOID
- Do not use high-saturation primary blues, reds, or standard electric app accents.
- Never replace the editorial serif headline with a modern heavy geometric sans.
- Do not render the Loyalty Status card on a light surface; its darkness denotes prestige.
- Avoid sharp 0px corners or industrial square cards anywhere in this layout.
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 中尝试 
