Design a dark-mode mobile app interface screen: midnight horizon hospitality wrapped in velvet wine accents and razor-sharp editorial serifs.
LAYOUT
The screen follows a strict top-down narrative hierarchy: immersive hero photography at 45% viewport height with floating edge-anchored utility icons, flowing down to resort branding. The center anchor is the interactive reservation matrix card, immediately followed by the conversion CTA and reassurance microcopy. The lower scroll area transitions to horizontal amenities and the featured room carousel.
PALETTE (use these exact hex values)
- #0b1015 — Obsidian Deep: foundational screen canvas beneath photography fades and bottom scroll sheets
- #131a22 — Nightfall Slate: semi-translucent container fill for the interactive reservation engine and modal surfaces
- #1b232e — Frosted Onyx: floating circular action buttons and pill counter backgrounds over imagery
- linear-gradient(135deg, #5b1d28 0%, #3e131c 100%) — Velvet Wine Gradient: primary conversion callout for check-availability and booking buttons
- #e5a93c — Luminescent Amber: star glyph indicator and premium accolade highlights
- #f5f7fa — Pure Alabaster: hotel naming headline, large calendar dates, and high-emphasis labels
- #8e99a8 — Mist Silver: subordinate labels, booking field subtitles, and amenity category titles
- #202a36 — Subtle Meridian: vertical dividers within the reservation card and structural containment outlines
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Roslindale, Canela), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 22px subheading, 28px heading, 36px display. Tracking -0.02em at display, 0.05em at caps. The typographic personality is aristocratic hospitality meets modern architectural minimalism. The high-contrast serif (evoking Cormorant Garamond or Roslindale) delivers heritage elegance in room counts and resort titles, while the clean geometric sans keeps transactional data highly legible. If substituting, use Canela or Playfair Display paired strictly with Inter or Plus Jakarta Sans.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 14px, buttons 14px. Spacing on a 4px unit, 16px gaps, 32px between sections, 390px container, comfortable density.
DEPTH
Depth is created strictly through light transmission and tonal stacking rather than heavy directional drop shadows. Surfaces layer frosted dark glass (rgba(20, 26, 34, 0.85)) over twilight photography, bounded by faint 1px borders (rgba(255, 255, 255, 0.08)). The hero image transitions to the midnight canvas via a vertical alpha gradient.
IMAGERY
Photography captures golden-hour or dusk exterior architecture of luxury private villas with warm interior pool lighting reflecting into dark waters. Any daytime beach imagery with over-saturated turquoise water, harsh noon shadows, or candid tourist snaps would completely shatter the quiet-luxury mood.
SIGNATURE DETAIL — the thing that makes this design itself
The seamless vertical bleed from the warm twilight pool image down into the #0b1015 midnight base, interrupted only by the frosted glass reservation module with serif calendar days. If you replace the dark blend with a crisp image border or light background, the entire identity collapses into a generic booking app.
MUST
- Use warm, dramatic twilight or golden-hour architectural photography to blend naturally into the obsidian canvas.
- Display primary numbers such as dates and room counts in high-contrast editorial serifs.
- Keep card outlines hairline thin at 1px with rgba(255, 255, 255, 0.08) for ultra-refined edge definition.
- Restrict bright saturated colors strictly to micro-accents like the #e5a93c rating star.
AVOID
- Do not use solid high-contrast white card backgrounds; this ruins the immersive dark twilight aesthetic.
- Never apply harsh drop shadows with 0 blur; rely on glass borders and tonal steps.
- Avoid sans-serif typography on large titles; it strips the layout of its bespoke editorial tone.
- Do not use bright primary blues or greens for buttons; stick to rich velvet wine tones.
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 中尝试 
