Design a light-mode mobile app interface screen: layered ivory sheets floating over atmospheric culinary photography with delicate architectural linework and terracotta sparks.
LAYOUT
The screen follows a top-down stacked cascading hierarchy: a dominant 45vh photographic hero section, overlaid by an ivory story card at 35vh, which is subsequently overlapped by a pure white menu feed. The menu layout is split horizontally into a compact dish list on the left and a hero dish photographic cutout on the right. A floating horizontal pill filter anchors the bottom edge of the primary menu card.
PALETTE (use these exact hex values)
- #1B1F27 — Atmospheric Obsidian: Deep grounding charcoal used for hero headers, primary card typography, and dark UI backing circles
- #FFFFFF — Pristine Canvas: Primary surface for overlapping content sheets and circular notification icon fill
- #F4F5F7 — Soft Alabaster: Background fill for the middle story card and inactive pill category chips
- #E55C50 — Terracotta Red: High-priority primary CTA button, active notification pip, item pricing, and inline link chevrons
- #2540D0 — Ultramarine Accent: Selected category pill background and 'View All' secondary text links
- #757B85 — Muted Slate: Secondary body copy, inactive pagination dots, and descriptive restaurant notes
- #EAEBED — Ghost Numeral: Faint structural section numbers providing watermark-level editorial framing
TYPOGRAPHY
Typeface SF Pro Display (or Inter,Plus Jakarta Sans,Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 24px heading, 32px heading-lg, 52px display. Tracking -0.02em at display, 0 at body. Clean, contemporary, and unobtrusive neo-grotesque sans-serif that lets food photography take center stage. The bold multi-line hero statement ('Great food. / High quality. / Best service.') conveys confidence without decorative serif flourishes. System fonts like SF Pro Display or Inter provide the required optical sharpness at both 11px metadata sizes and 32px display weights.
GEOMETRY & SPACING
Corner radii — cards 28px, links 4px, inputs 999px, buttons 999px. Spacing on a 4px unit, 16px gaps, 36px between sections, 390px container, comfortable density.
DEPTH
Depth is created entirely through physical layering of sheets rather than diffused drop shadows. White and alabaster cards visually slide over darker foundational tiers with sharp 28px top-corner boundaries. The single floating photo cutout on the lower right uses a natural cast contact shadow beneath the food plate rather than an artificial UI box-shadow.
IMAGERY
Photography must be warm, saturated, and highly textured, highlighting artisanal preparation and fresh ingredients. The application uniquely contrasts realistic 3D food cutouts against delicate black-and-white architectural ink sketches (landmarks like the Colosseum or Eiffel Tower). Generic, sterile stock photos or flat vector illustrations would break the curated culinary aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive architectural move is the stacked curved card cascade combined with hand-drawn travel sketches juxtaposed against photorealistic culinary cutouts. The screen feels like an editorial travel-and-dining magazine where each scroll layer peels back a new level of discovery. It is misused if cards are given rectangular corners or if sketches are replaced with generic vector icons.
MUST
- Use generous top-corner radii (28px) on cards that stack over lower visual layers.
- Pair realistic isolated photo cutouts with monochromatic pencil sketches for heritage storytelling.
- Reserve solid terracotta (#E55C50) exclusively for primary CTAs, pricing tags, and alerts.
- Set category filter pills to full rounded capsules (height 28-32px, radius 999px).
AVOID
- Never add bottom border radius to overlapping sheets—keep bottom edges flush with the frame.
- Do not introduce colored outlines around cards; use crisp edge transitions against surfaces.
- Avoid using multiple accent colors within a single button group.
- Never display prices in neutral grey; always apply the active terracotta color token.
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 中尝试 
