Design a dark-mode mobile app interface screen: golden hour resort photography anchored by deep slate architecture, luminous teal accents, and whisper-quiet typography.
LAYOUT
The top half is dominated by an immersive editorial photographic hero with minimal chrome. A rounded dark sheet takes over beneath, introducing high-level pillar cards via horizontal scroll. Structured directory sections follow in segmented modular cards, punctuated by a gallery carousel and location widget before closing.
PALETTE (use these exact hex values)
- #0f171d — Nocturne Slate: Primary screen canvas and bottom-sheet surface background.
- #142029 — Midnight Card: Background for feature cards, accommodation grid container, and location modules.
- #1e2c37 — Subtle Border: Hairline structural dividing lines and card outlines.
- #3ba596 — Riviera Teal: Section link actions, active states, and location pin markers.
- #c89552 — Amber Bronze: Highlight icon backing and dining theme accents.
- #ffffff — Pristine White: Primary headings, titles, and high-emphasis labels.
- #8496a5 — Muted Slate: Subtitles, descriptive card copy, and inactive metadata.
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, EB Garamond), weights 400/500/600. Sizes 11px caption, 12px body-sm, 13px body, 14px subheading, 16px heading, 20px heading-lg, 24px display. Tracking 0.18em at display, 0.05em elsewhere. The typographic tone pairs old-world French hospitality with crisp modern Swiss utility. Cormorant Garamond lends an authentic Riviera heritage to the header, while Plus Jakarta Sans delivers precision and legibility across complex hotel services and amenities. If substituting, choose humanist sans-serifs that maintain warm, open geometry.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 10px, buttons 999px. Spacing on a 4px unit, 12px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Elevation is achieved through tone layering rather than drop shadows. Surface 0 (#0f171d) forms the background canvas, while Surface 1 (#142029) defines cards and multi-cell matrices. Interactive chips and floating pills rely on backdrop-filter blur over imagery for gentle separation.
IMAGERY
Photography captures golden-hour warmth, cinematic coastal sunsets, and refined architectural interiors bathed in natural evening light. Images must feel private, tranquil, and tactile—never generic, high-key white stock photos or synthetic studio shots.
SIGNATURE DETAIL — the thing that makes this design itself
The dramatic 32px-radius dark slate bottom sheet rising to clip the warm sunset terrace photography. It creates an evocative transition between evocative lifestyle imagery and tactile operational UI. To preserve its impact, ensure the hero image behind it remains unbordered and fully edge-to-edge.
MUST
- Anchor photographic heroes with a dramatic sheet radius of at least 32px.
- Use 1px borders (#1e2c37) to separate cells within unified dark modules.
- Limit interactive links and focal accents strictly to Riviera Teal (#3ba596).
- Keep icon containers softly tinted rather than saturated or fully opaque.
AVOID
- Do not introduce pure white card surfaces; maintain the moody dark slate atmosphere.
- Never apply harsh drop shadows; depth is strictly conveyed via background tone shifts.
- Avoid generic bright blue links; use the muted teal signature hue.
- Do not crowd the hero area with solid navigation bars or opaque backgrounds.
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. Try in DraPub 
