Design a light-mode mobile app interface screen: quiet luxury hospitality framed in twilight hues, tailored serifs, and soft linen surfaces.
LAYOUT
The screen follows a structured mobile column (max 430px) beginning with an immersive 45% viewport hero header bounded by an organic concave mask. A floating search bar anchors the transition into the content section. Below, a balanced 4-column category strip introduces browsable verticals, followed by a titled horizontal carousel of destination cards and a high-impact dark promotional banner.
PALETTE (use these exact hex values)
- #F9F7F4 — Linen Canvas: Primary screen background below the hero mask, evoking premium uncoated stationery.
- #FFFFFF — Surface Pure: Background for floating search pill and destination card containers.
- #1C1917 — Charcoal Espresso: Primary headline text, destination names, and high-priority interface labels.
- #8A837B — Taupe Muted: Secondary price labels, search placeholder text, and supporting subtitles.
- #B89874 — Champagne Bronze: Stroke color for luxury category line icons, promo tags, and outline buttons.
- #2B131C — Cabernet Dark: Rich background fill for the exclusive seasonal offer card at the bottom.
- #EBE5DE — Stone Hairline: Ultra-thin outline on category cards and subtle card divisions.
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Italianno, EB Garamond), weights 400/500. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 18px subheading, 20px heading, 34px display. Tracking -0.015em at display. The typographic pairing embodies classic editorial refinement meeting modern digital precision. The serif display face evokes vintage travel monographs and Conde Nast covers, creating an immediate sense of privilege and calm. The neutral, low-contrast sans ensures technical details like prices and locations remain instantly legible without competing with the photography.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 16px, buttons 999px. Spacing on a 4px unit, 12px gaps, 32px between sections, 390px container, comfortable density.
DEPTH
Depth is created through photographic layering and rare, soft ambient glows rather than structured multi-tier shadow scales. The floating search field uses an ultra-diffuse shadow (0 8px 24px rgba(28, 25, 23, 0.06)) to hover effortlessly over the hero image seam. Category tiles and destination cards remain predominantly flat, relying on crisp 1px borders (#EBE5DE) to separate against the canvas.
IMAGERY
Visual assets focus on secluded high-end architecture, private infinity pools, and uncrowded natural landscapes bathed in twilight or warm morning sun. Composition is calm and spacious with low visual noise. Hectic street scenes, saturated stock tourism, and crowded beach imagery are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the organic, soft-curved hemline of the full-bleed dusk hero image intersected precisely by the floating pure-white search capsule. This architectural transition instantly breaks the standard hard rectilinear mobile grid. Misuse commonly occurs when the curve radius is exaggerated into a harsh parabola or when the search input is separated entirely from the boundary seam.
MUST
- Retain the high-contrast serif exclusively for high-emotion display headings and promotional titles.
- Ensure category cards have equal 1:1 aspect ratios and fine 1px strokes in #EBE5DE.
- Use warm linen (#F9F7F4) rather than clinical white (#FFFFFF) for the primary screen background.
- Overlap the search input exactly over the hero image's bottom organic curve boundary.
AVOID
- Do not introduce saturated primary colors like cobalt blue, crimson, or bright emerald.
- Do not set destination pricing or transactional microcopy in serif typography.
- Do not use heavy, harsh black box-shadows; favor 15-20% opacity warm umber blurs.
- Do not crowd category items into an unpadded row; ensure minimum 10px inter-item spacing.
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 中尝试 
