Design a dark-mode mobile app interface screen: mist-shrouded boreal wilderness meets private alpine luxury with fine champagne rule lines and frosted pine glass.
LAYOUT
The mobile layout follows a disciplined vertical hierarchy tuned for discovery. The top 20% is reserved for ambient headspace, system utilities, and the monumental 'DEPART' masthead. The center features a three-card horizontal peek carousel exhibiting brand ethos, editorial narrative, and community validation. The lower third grounds the screen with a 3-column micro-feature strip followed by a persistent, high-contrast dual-action booking dock.
PALETTE (use these exact hex values)
- #08110e — Boreal Canvas: Deep pine-tinted black backing the full viewport beneath the atmospheric photography.
- #121e19 — Frosted Spruce Glass: Semi-translucent container background for cards and bottom feature bands.
- linear-gradient(135deg, #dfc39a 0%, #b8915b 100%) — Champagne Metallic: Primary card CTA buttons, play rings, and fine botanical filigree illustrations.
- #3b131a — Burgundy Reserve: Left half of split dock button used for calendar scheduling trigger.
- #f2ece4 — Alabaster Ivory: High-emphasis display typography, primary headers, and active action pill fill.
- #d4b483 — Pale Gold Ochre: Sub-labels, eyebrow tags, rating stars, and subtle section identifiers.
- #7c9186 — Mist Lichen: Secondary descriptive body copy, feature titles, and inactive indicators.
- #203027 — Hairline Border: Delicate 1px containment borders on floating cards and column divider lines.
TYPOGRAPHY
Typeface Cormorant Garamond (or Cinzel, Playfair Display, EB Garamond), weights 400/500/600. Sizes 8px caption, 10px body-sm, 11px body, 13px body-lg, 18px heading, 24px heading-lg, 38px display. Tracking 0.08em at titles, 0.02em at numerals. The typography evokes the quiet grandeur of an archival mountaineering journal printed for private collectors. The serif pairing (matched to Cormorant Garamond) provides timeless literary weight, while the widely-spaced sans microcopy introduces architectural precision. If Cormorant Garamond is unavailable, Cinzel or Playfair Display paired with Inter (spaced at 0.2em uppercase) will preserve the aesthetic.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, tight density.
DEPTH
Depth is created entirely through optical layering and frosted material simulation rather than fuzzy drop shadows. The deep pine forest photograph recedes into the dark background, while cards sit on level 1 using translucent spruce fills (#121e19 at 85% opacity) bounded by 1px borders. The floating action dock occupies the highest plane, floating over the bottom edge with a soft, expansive ambient occlusion.
IMAGERY
Photography exclusively captures atmospheric, moody landscapes—foggy conifer forests, reflective mountain rivers, and steep alpine valleys under overcast skies. Line art consists of high-end botanical sketches and fine topographic elevation contours drawn in 1px champagne gold lines. Saturated sunny resort photos or casual lifestyle snapshots are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The split-color rounded action dock combining deep oxblood burgundy (#3b131a) on the date picker with soft ivory (#f2ece4) on the journey trigger. This unexpected contrast breaks traditional dark mode monochrome, giving the bottom interaction an artisanal bespoke leatherwork feeling. It is commonly misused by making both halves identical in color or removing the capsule boundary entirely.
MUST
- Always set display headings in all-caps high-contrast serif with letter-spacing of at least 0.08em.
- Use deep forest green tints (#121e19) rather than neutral gray for card surfaces.
- Restrain gold accents to delicate thin line weights (1px to 1.5px) to preserve luxury perception.
- Maintain strict horizontal symmetry across multi-column feature strips using subtle vertical rule dividers.
AVOID
- Never introduce saturated bright greens, blues, or neon accents into the palette.
- Do not use heavy drop shadows; depth must come strictly from card translucency and border hairlines.
- Avoid mixed-case or lowercase body copy in UI microcopy; enforce tracked uppercase for metadata.
- Do not make the card carousel full-bleed without rounded borders (#203027 hairlines are required).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub