Design a dark-mode mobile app interface screen: candlelit luxury hospitality set in deep obsidian tones, gilded accents, and editorial serifs.
LAYOUT
The mobile layout follows a strict stacked card paradigm with comfortable 16px lateral margins. Starting from the minimalist utility app bar, it transitions to an expansive hero carousel that consumes ~45% of the initial viewport height. This is followed immediately by a single-row 4-segment category dock, then encapsulated section cards holding horizontal swipeable dish strips.
PALETTE (use these exact hex values)
- #0A0E14 — Obsidian Canvas: Root background canvas providing a moody, low-light backdrop for the entire application
- #121722 — Midnight Slate: Background fill for grouped module cards, section wrappers, and category pills
- #1F2634 — Subtle Charcoal Stroke: Delicate 1px boundary stroke defining cards, dividers, and grouped containers
- #C2955B — Vintage Gold: Key brand accent for section eyebrows, active category line-art icons, and primary CTA background
- #224938 — Forest Emerald: Background fill for circular quick-add buttons on individual dish cards
- #4EAA7A — Jade Mint: Secondary interactive text links such as the View all button
- #FFFFFF — Pure White: High-contrast headings, dish names, and critical typography
- #8E98A8 — Muted Silver: Subordinate body copy, prices, category labels, and inactive pagination indicators
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Canela, Ogg), weights 400/600. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 32px display. Tracking -0.01em. The typographic system channels Michelin-starred hospitality menus and luxury lifestyle editorial. The serif display font radiates prestige, heritage, and deliberate craft, while the geometric sans provides crisp, frictionless legibility for transactional data like pricing and navigation. Free substitutions like Cormorant Garamond paired with Inter capture this distinction flawlessly.
GEOMETRY & SPACING
Corner radii — cards 20px, links 0px, inputs 12px, buttons 999px. Spacing on a 4px unit, 12px gaps, 20px between sections, 390px container, comfortable density.
DEPTH
Depth is created entirely without drop shadows, utilizing luminescence and surface color stepping. Deepest is the canvas (#0A0E14), stepped up to the card layer (#121722) with a razor-thin #1F2634 stroke, and topped with rich warm culinary photography. Highlighted interactions subtly glow using warm gold rather than physical z-index displacement.
IMAGERY
Photography features tight-focus, high-contrast culinary plates shot under warm ambient restaurant lighting. Backgrounds are intentionally blurred with rich bokeh, deep shadows, and glossy sauce textures. Bright, sterile flat-lay or high-key daylight photography would completely destroy the nocturnal fine-dining illusion.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the antique gold line-art icon suite within a segmented Midnight Slate pill container, topped by an editorial serif hero. Removing the delicate gold linework and returning to standard filled icons would immediately reduce this bespoke dining portal into a generic delivery client.
MUST
- Pair high-contrast editorial serifs with ultra-tracked sans-serif uppercase labels.
- Use warm bronze (#C2955B) strictly for brand insignia, icons, and primary spotlights.
- Keep container backgrounds near #121722 with whisper-thin 1px outlines in #1F2634.
- Enforce generous card radii (16px to 24px) to soften the intense dark aesthetic.
AVOID
- Never introduce stark neon colors or bright saturated blue primaries.
- Avoid flat white backgrounds or pure grey scale cards without blue-slate undertones.
- Do not use serifs for dense UI labels, button copy, or pricing numbers.
- Avoid raw, unshadowed photos without dark atmospheric post-processing.
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 
