Design a light-mode mobile app interface screen: editorial dessert catalog blending rich burgundy accents, condensed modern serifs, and appetizing layered ingredient storytelling.
LAYOUT
The mobile layout follows a top-to-bottom editorial flow starting with a transparent 56px utility bar. The hero section splits horizontally with left-aligned typographic pitch and CTA pill, visually balanced on the right by an overflowing diagonal beverage cutout. Beneath the hero, a four-unit metric strip introduces quick brand claims, transitioning directly into a rounded white bottom sheet containing a horizontal card reel.
PALETTE (use these exact hex values)
- #521B23 — Burgundy Plum: Dominant brand identifier used on primary pill CTA button, wordmark logo, and select feature metrics.
- #F8F6F3 — Warm Almond Cream: Base page canvas providing a soft, confectionery warm ground across top screen zones.
- #FFFFFF — Pristine White: Elevated sheet background for category carousels and high-contrast section separation.
- #D2E3ED — Soft Sky Tint: Asymmetrical hero backdrop blob offering cool temperature contrast behind warm beverages.
- #F1ECE6 — Pecan Shell: Background fill for circular feature icon chips and subtle decorative container pads.
- #1A1817 — Espresso Charcoal: High-contrast primary typographic color for display headlines and main feature titles.
- #6C6661 — Hazelnut Dust: Secondary typographic color for explanatory body text, category kickers, and ingredient labels.
TYPOGRAPHY
Typeface Playfair Display (or DM Serif Display, Canela, Abril Fatface), weights 600/700. Sizes 10px caption, 12px body-sm, 12px subheading, 14px body, 22px heading, 34px display. Tracking -0.02em at display. The typography blends luxury artisanal charm with modern readability. The heavy, condensed serif brings high-fashion editorial gravitas to casual fast-food desserts, elevating milkshakes into gourmet culinary creations. If proprietary fonts are unavailable, Playfair Display Bold offers an exact thematic substitute when set with snug letter-spacing.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 16px gaps, 32px between sections, 390px container, comfortable density.
DEPTH
Depth is created almost entirely through optical layering rather than box-shadows. The product silhouette and raw ingredients sit above a soft pastel blob, casting delicate contact shadows directly onto the background plane. The lower card container relies on crisp geometry (28px rounded top corners) and a pure white fill against warm cream to lift off the screen.
IMAGERY
Photographic direction is macro, hyper-tactile, and appetite-inducing, emphasizing luscious textures like thick chocolate swirls, condensation beads on chilled plastic cups, and glistening cut strawberries. Lighting is bright but warm with directional daylighting. Cartoonish illustrations or clinical flat vectors are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the hero ingredient constellation: an artisanal beverage surrounded by floating, condensation-beaded ingredients that connect to discreet text labels via elegant, curved dashed lines. This transforms standard fast food into a craft experience; it fails if the lines are made straight, solid, or heavy.
MUST
- Always set eyebrow captions in uppercase sans-serif with at least 0.12em tracking.
- Retain the high-contrast serif font strictly for primary marketing and section headings.
- Use deep burgundy (#521B23) exclusively for critical CTA buttons and identity accents.
- Isolate product photography cleanly and surround with orbiting raw ingredient cuts.
AVOID
- Do not introduce sharp rectangular buttons; maintain the strict 999px pill form.
- Avoid cold grays or stark black backgrounds; keep all neutrals warm and creamy.
- Never substitute the editorial serif headlines with plain corporate geometric sans-serifs.
- Do not clutter hero photography with solid bounding boxes or heavy drop shadows.
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 中尝试 
