Design a light-mode mobile app interface screen: sun-warmed flour, rich forest greens, and rounded parchment cards for an organic modern patisserie.
LAYOUT
The mobile viewport follows an organic vertical feed hierarchy optimized for swift one-thumb browsing. A balanced header anchors the top with utility icons and centered branding, followed immediately by a prominent full-width search input. Next, a hero promotional carousel leads into a three-column horizontal category scroll, followed by structured 'Top Picks' shelves showing multi-column product cards with quick purchase indicators.
PALETTE (use these exact hex values)
- #F9F8F6 — Canvas Warm Tint: Global application background setting a warm, unbleached parchment baseline.
- #FFFFFF — Clean White: Card containers, search inputs, icon buttons, and circular badge backgrounds.
- #F7EBE1 — Banner Peachy Mist: Warm, light peach-toned background filling the primary promotional hero banner.
- #1C3B34 — Spruce Forest: Hero titles, brand wordmark, active pagination dots, and primary CTA buttons.
- #1A1A1A — Charcoal Black: Section headers, product titles, and active monetary prices.
- #7B7774 — Warm Muted Taupe: Subtitles, brand tagline, search placeholder, and strikethrough original prices.
- #ECA338 — Warm Gold Star: Rating star icons next to review counts.
- #EFECE8 — Subtle Border Wash: Outlines around search inputs and structural divider surfaces.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, DM Sans, Inter), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 15px subheading, 17px heading, 20px heading-lg, 24px display. Tracking -0.01em at display, 0.05em on uppercase caps. The typography relies on a modern geometric sans with warm humanist curves (best matched by Plus Jakarta Sans or Outfit). It feels artisanal, approachable, and refined, trading corporate stiffness for culinary warmth. Headings use strong weights with slight negative tracking, while brand badges and subheaders use generous positive tracking in all-caps.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 14px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is communicated almost exclusively through flat tonal layering rather than cast drop shadows. White cards and inputs sit softly atop a warm parchment (#F9F8F6) base canvas with extremely faint 2-4px blurred ambient occlusion. The hero banner relies on warm peachy tints (#F7EBE1) and high-resolution isolated product photography to appear physically tangible.
IMAGERY
Photography is rich, tactile, and naturalistic, showing artisanal baked goods with visible crumbs, golden crusts, and vibrant fruit toppings. Shots alternate between rustic wooden boards for category tiles and cleanly cutout tabletop arrangements with soft natural cast shadows for catalog cards. Highly stylized 3D graphics, neon renders, or generic corporate clip art would violently rupture the artisan craft tone.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dark spruce green pill CTA with an embedded white circular arrow icon, set against pale peach and warm parchment surfaces. This high-contrast pairing grounds the soft bakery aesthetic with decisive, tactile e-commerce utility. To preserve the identity, keep the pill button compact and dark forest green, never expanding it into a full-width flat rectangle.
MUST
- Use warm tinted canvas (#F9F8F6) instead of sterile harsh white (#FFFFFF) for page background.
- Render primary buttons and key focal points in dark spruce green (#1C3B34).
- Keep product images isolated on clean surfaces or styled with natural warm overhead light.
- Enclose discount percentages inside compact two-line circular badges anchored at card top-left.
AVOID
- Do not use sharp 0px or small 4px corners; everything must feel soft, rounded, and baked.
- Never introduce saturated bright primary reds or blues; palette relies exclusively on spruce, peach, and wheat.
- Do not use heavy black dropshadows; rely on surface tone differentiation and very soft ambient diffusion.
- Never center-align product card metadata; keep product titles, pricing, and ratings left-aligned.
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 中尝试 
