Design a light-mode mobile app interface screen: moody dark espresso tones melting into an airy cream café counter sheet.
LAYOUT
The vertical composition is anchored by a 40% height dark photo hero section featuring status bar, brand logotype, headline, and primary CTA. The bottom 60% is enclosed in a massive rounded white sheet, stacked sequentially with an inline booking utility card, a horizontal scrolling 'Popular Coffee' rail, and a promotional discount banner anchored near the bottom edge.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Main light background for sheet container and card fills
- #121316 — Espresso Void: Dominant deep tone of the upper photo backdrop and header space
- #22252A — Charcoal Espresso: Background for table booking CTA and dark badge overlays
- #E07A5F — Warm Terracotta: Primary hero CTA pill, quick-add buttons (+), and link text
- #F4F5F7 — Soft Input Gray: Fill for booking filter tags, guest count, and card image backgrounds
- #EBECEF — Border Stone: Outlines around the reservation card and product tiles
- #1A1A1E — Primary Text: High-contrast headings, section titles, and item labels on white canvas
- #8A8D96 — Muted Text: Secondary descriptors, subtitle hints, and inactive icon states
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, Inter, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 30px display. Tracking -0.02em on headings, 0 on body. The type choice is modern, warm, and inviting without feeling rustic or vintage. It uses clean geometric sans-serif anatomy with generous aperture and gentle curvature, avoiding clinical tech sterility. Headlines speak with confident friendliness ('Coffee is always a good idea') balanced by ultra-clean, legible tabular numbering for prices and reservation metadata.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 10px, buttons 12px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Elevation is achieved through layered structural overlapping rather than heavy drop shadows. The pure white content sheet physically overlaps the dark photo backdrop with dramatic top-corner rounding. Interactive elements like product cards and booking containers rely on crisp 1px borders (#EBECEF) and clean background tint shifts (#F4F5F7) to show segregation.
IMAGERY
Photographs emphasize sensory, macro details of coffee culture: roasted dark beans with warm highlights, rich espresso crema in charcoal ceramics, and delicate foam latte art. All catalog products are captured from a strict 90-degree top-down perspective against clean neutral backgrounds. Studio stock with generic coffeehouse interiors or human faces is entirely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The dramatic visual transition where an ultra-dark, textured hero photo is swallowed by a hyper-clean, 32px-radius pure white sheet. This split-tone composition bridges sensory craft appeal with utilitarian e-commerce efficiency. Misusing it by fading with gradients instead of a crisp overlapping radius breaks the physical paper-over-surface aesthetic.
MUST
- Use deep, tactile dark coffee photography in the top third behind transparent nav.
- Overlap the white lower content sheet onto the dark hero using 32px top radii.
- Reserve the warm terracotta tone (#E07A5F) strictly for high-value transactional actions.
- Present product photography uniformly as top-down overhead shots on soft gray bases.
AVOID
- Never replace the terracotta accent with cold blues, greens, or high-saturation primaries.
- Do not drop sharp 90-degree corners into the lower sheet or product tiles.
- Avoid heavy drop shadows; rely on clear hairline borders (#EBECEF) and tonal contrast.
- Do not use transparent overlays for the booking card; keep its body clean white.
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 中尝试 
