Design a light-mode mobile app interface screen: moody barista craftsmanship meets warm porcelain minimalism in an upscale mobile cafe experience.
LAYOUT
The vertical rhythm follows an editorial mobile story: a top utility bar leads into an immersive 340px dark hero carousel displaying brand essence and primary ordering action. Directly overlapping the hero footer sits the floating 5-item white navigation island. Below, against the warm porcelain ground (#F5F2EE), a structured 24px vertical flow introduces a featured story card, a horizontal circular category slider, and a dense multi-column product card showcase.
PALETTE (use these exact hex values)
- #0E0B0A — Espresso Roast Canvas: Dark base background for the immersive hero banner and top app bar
- #F5F2EE — Porcelain Oat Canvas: Soft warm base background for the body layout and product catalog sections
- #FFFFFF — Pure Milk Surface: Elevated card backgrounds, floating tab containers, and circular icon backdrops
- #DF6B5A — Terracotta Crema: Primary action button background, active pagination pill, active tab indicator, and highlight badge
- #2F5A84 — Slate Denim: Secondary action links and chevron breadcrumbs in light body sections
- #1F1B18 — Charcoal Espresso Text: Primary headings, titles, and price values on light porcelain surfaces
- #FFFFFF — Steamed Foam Text: Hero display typography, action button text, and icon strokes on dark backgrounds
- #7A736E — Warm Muted Gray: Inactive tab labels, descriptive subcopy, and secondary product descriptions
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Montserrat, Inter, Outfit), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 22px heading, 28px display. Tracking -0.01em on body, 0.05em on uppercase headers. The typography speaks with confident, modern hospitality—clean, unpretentious, yet undeniably premium. Plus Jakarta Sans provides crisp geometric geometric proportions that keep compact mobile menus readable while giving display headers an architectural weight. If substituting, avoid quirky display serifs; stick to high-x-height modern geometric sans typefaces like Montserrat or Outfit.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 12px, buttons 12px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is handled subtly through optical contrast rather than heavy drop shadows. Surfaces layer naturally: the deep hero canvas (#0E0B0A) serves as base level, while the white navigation shelf and content cards cast ultra-soft, low-opacity ambient shadows (0px 6px 20px rgba(28,21,18,0.06)). Cutout imagery of cups and pastries breaks card bounding boxes to generate a gentle tactile float.
IMAGERY
Imagery strictly features cinematic, macro-detail specialty coffee and artisanal bakery items bathed in warm natural rim lighting. Foam textures, latte art rosettas, and ceramic glaze reflections must be crisp and authentic. Synthetic flat vector illustrations or low-contrast stock photos without steam and natural depth are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The floating white navigation island (#FFFFFF, 20px radius) seated directly on the seam between the deep espresso hero and porcelain body canvas. It visually anchors the user's focus, transforming an otherwise standard carousel into an architectural, tactile coffee bar experience. It is broken when submerged into a standard sticky bottom bar or when given harsh, high-contrast borders.
MUST
- Anchor primary calls to action with the warm terracotta shade (#DF6B5A) and rounded 12px pill shapes.
- Use uppercase tracking (+0.05em) on prominent brand headings like 'MISS CAFFÈ' and 'UMA CAFETERIA ESPECIAL'.
- Keep the page base in subtle warm porcelain (#F5F2EE) rather than sterile blue-white (#FFFFFF).
- Enclose secondary descriptive navigation links in Slate Denim (#2F5A84) paired with a trailing chevron.
AVOID
- Do not use harsh cold grays; keep all neutral shades biased toward warm taupe and roasted espresso tones.
- Never replace terracotta accents with bright neon red or generic corporate primary blues.
- Do not eliminate card corner rounding; sharp 0px corners violate the tactile ceramic design language.
- Avoid full black (#000000); use deep espresso (#0E0B0A) to maintain rich photographic integration.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1344:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
