Design a light-mode mobile app interface screen: an editorial sanctuary of warm ivory, bespoke hospitality, and deep wine accents for curated escapes.
LAYOUT
The mobile page maintains a disciplined top-down flow: a light status and utility bar precedes an expansive editorial headline block with comfortable negative space. Immediately below sits a floating multi-stage search pill spanning edge-to-edge within a 20px screen margin. This is followed by a wide-format hero showcase card, carousel indicators, and an inviting horizontal section for curated destinations with trailing cards.
PALETTE (use these exact hex values)
- #FAF8F5 — Parchment White: Primary screen canvas providing an organic, warm editorial warmth.
- #FFFFFF — Pure White: Search card surface, secondary action buttons, and wishlist pill backgrounds.
- #581C26 — Cabernet Wine: Key accent for primary action buttons, active indicators, and navigation toggles.
- #E8D8C8 — Tuscan Sand: Subtle, tinted warm beige used behind editorial tag badges.
- #1A1615 — Deep Onyx: High-contrast headings, main titles, and primary icons.
- #706B68 — Warm Charcoal: Subtext, secondary input labels, and inactive pagination indicators.
- #EFECE6 — Subtle Border: Hairline vertical dividers within segmented search fields.
TYPOGRAPHY
Typeface Playfair Display (or Canela, Cormorant Garamond, Freight Big Pro), weights 400/500. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 38px display. Tracking -0.02em at display sizes. The voice is that of a collectible architectural magazine or boutique concierge — refined, quiet, and deliberate. The combination of Playfair Display's sharp brackets and SF Pro's neutral clarity establishes an authoritative yet welcoming hospitality tone. For open-source replacements, pair Canela or Cormorant Garamond with Inter.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 24px, buttons 999px. Spacing on a 4px unit, 16px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is created through ultra-soft, low-opacity warm ambient shadows (0 12px 32px rgba(40, 20, 10, 0.06)) rather than sharp directional lighting. Surfaces float just a millimeter above the warm parchment base, giving the interface the feel of stacked cardstock. Within imagery, depth is supported by seamless black-to-transparent linear gradients protecting overlay text.
IMAGERY
Photography captures architectural luxury, dusk landscapes, infinity pools, and sun-drenched architectural retreats with warm, cinematic lighting. Images must possess rich tones, calm atmospheres, and authentic natural textures. Commercial stock photography with artificial lighting or clinical indoor scenes is strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive pairing of a segmented pill search capsule alongside an atmospheric dusk hero card pinned with an 'EDITOR'S PICK' beige chip. Misusing this means reducing the search bar to a single generic text field or removing the warm parchment canvas, which instantly collapses the editorial boutique feel into a commodity booking app.
MUST
- Always set display titles in high-contrast editorial serif type with tight letter spacing.
- Maintain the warm parchment background (#FAF8F5) across mobile viewports rather than pure #FFFFFF.
- Reserve Cabernet Wine (#581C26) exclusively for high-intent interactive buttons and indicators.
- Use generous 24px radii for featured image cards and interactive container boundaries.
AVOID
- Do not use stark black (#000000); use deep organic charcoal (#1A1615) for type and iconography.
- Never apply harsh black outlines or thick card borders to floating components.
- Avoid cold blue or grey tints in shadows, backgrounds, or surfaces.
- Do not use sans-serif typefaces for section headers or display titles.
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 中尝试 
