Design a light-mode mobile app interface screen: sunlit bakery storefront with creamy pastels, warm coral accents, and tactile pastry photography.
LAYOUT
The mobile layout follows an intuitive vertical scroll: 56px top header, horizontal category icon bar, prominent hero marketing card (aspect ratio ~16:10), a 4-column quick-category horizontal carousel, followed by a 'Top Picks' product grid. Horizontal margins stay rigid at 16px, with internal card spacing at 12-14px.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary screen canvas and card container background
- #FFF4EE — Banner Peach: Soft warm cream-peach background for the top promotional carousel card
- #FDECE7 — Category Peach: Pastel tint background for All Products collection card
- #EBF5E7 — Category Mint: Pastel soft green background for Mochi category card
- #F1EEFC — Category Lilac: Pastel lavender background for Bakery category card
- #EBF3FB — Category Ice: Pastel sky-blue background for Others collection card
- #18191F — Charcoal Black: Dominant color for headlines, brand logotype, and product titles
- #8C9199 — Muted Slate: Secondary product metadata, review counts, and category item counts
- #F7664D — Vibrant Coral: Primary call-to-action buttons, discount tags, active tab underlines, and add buttons
- #FBBF24 — Star Gold: Star rating icon color in product review rows
TYPOGRAPHY
Typeface Playfair Display (or Fraunces, Recoleta, DM Serif Display), weights 700/800. Sizes 11px caption, 12px body-sm, 14px body, 15px subheading, 17px heading, 20px heading-lg, 26px display. Tracking -0.01em. The typographic tone balances warm, artisanal craft with modern digital utility. The display serif feels like a high-end gourmet magazine, while the clean geometric sans ensures fast price scanning and effortless ordering. Playfair Display or Fraunces can freely stand in for the editorial voice, while Plus Jakarta Sans or Inter anchors the commerce engine.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 12px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is achieved through crisp white cards floating faintly over warm tinted surfaces with soft ambient drop shadows (0 8px 24px rgba(0, 0, 0, 0.04)). The imagery itself provides realistic depth via soft baked ground shadows rather than artificial UI borders.
IMAGERY
Photography consists of pristine, studio-lit artisan pastries, cakes, and biscuits isolated on pure white with subtle, natural contact shadows. Food looks freshly baked, golden, and tactile; non-food props or busy studio backgrounds are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious contrast between soft confectionery pastel card fills (#FFF4EE, #EBF5E7) and snappy coral interactive points (#F7664D) framed around studio-cut bakery photography. Misusing it means making pastels too vibrant or stripping out the warm editorial serif in banners, which turns an artisan patisserie into a generic supermarket app.
MUST
- Use soft, unsaturated pastel tints for category backgrounds to keep the layout friendly and light.
- Pair high-contrast serif headlines in marketing banners with crisp geometric sans for UI metrics and titles.
- Isolate all baked good photography with transparent backgrounds and natural ground drop shadows.
- Reserve vibrant coral #F7664D for high-priority user actions and conversion touchpoints.
AVOID
- Do not use dark, saturated container backgrounds that fight with delicate baked goods.
- Do not apply drop shadows with high opacity; maintain soft, nearly invisible elevation (< 8% black).
- Never replace the editorial serif headline in promotional spaces with standard sans-serif.
- Avoid sharp rectangular corners; no card in this system should drop below 16px radius.
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 中尝试 
