Design a light-mode mobile app interface screen: farm-to-table freshness rendered in soft organic pastels, rounded tactile cards, and editorial serif headlines.
LAYOUT
The mobile viewport follows an organic vertical stack with 16px side padding. Navigation controls sit flush at the top followed immediately by a prominent single-card hero carousel. Beneath the pagination dots rests a unified white category selector bar, which transitions into a multi-column horizontal deal scroll before concluding with a categorized grocery grid.
PALETTE (use these exact hex values)
- #FAF8F5 — Canvas Warm Tint: Primary mobile viewport background providing an earthy, organic foundation.
- #FFFFFF — Surface White: Elevated containers such as category navigation pill bar and header icon blocks.
- #2C4035 — Hero Forest Slate: Dominant deep organic green used as backdrop in the main showcase carousel card.
- #EE6B56 — Coral Accent: Action color for primary buttons, active carousels, and view-all triggers.
- #EBF2E8 — Pastel Sage: Background fill for the 30% OFF produce deal card.
- #EFEFF9 — Pastel Lavender: Background fill for the 25% OFF organic picks deal card.
- #F9EFE6 — Pastel Peach: Background fill for the local farmer highlight deal card.
- #1E3329 — Deep Forest Text: Primary headings, headline pricing, and active tab labels.
- #707873 — Muted Slate Gray: Descriptive copy, subheadings, and inactive navigational labels.
TYPOGRAPHY
Typeface Playfair Display (or EB Garamond,DM Serif Display,Baskerville), weights 500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 20px heading, 24px heading-lg, 30px display. Tracking -0.01em. The type system strikes an artisanal, high-end culinary tone by contrasting Playfair Display with Plus Jakarta Sans. The serif conveys heritage, quality, and boutique freshness, while the clean geometric sans ensures operational clarity and readability on mobile viewports. For open-source setups, DM Serif Display and Inter serve as seamless 1:1 drop-in alternatives.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 12px, buttons 14px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is achieved through gentle, wide-spread ambient shadows (rgba(40, 50, 40, 0.04) with 12px to 20px blur) cast by pure white containers onto the warm background. Promotional cards rely on tonal surface differentiation (tinted pastels) rather than heavy drop shadows to communicate hierarchy. Interactive circular arrow chips sit elevated atop product imagery using a crisp white surface with a slight 2px vertical lift.
IMAGERY
Photography emphasizes studio-shot, farm-fresh produce with glistening droplets, earthy wicker baskets, and vibrant natural color palettes. High-angle flatlays with generous negative space allow seamless text overlay inside the hero unit, while partial product cutouts overflow card baselines naturally. Avoid synthetic, hyper-processed food photography or generic 3D glossy icons.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of deep forest green and soft organic pastels anchored by an editorial serif discount typography. The deal cards combine a delicate pastel fill (#EBF2E8), a bold Playfair Display discount headline, and photographic produce spilling over the lower edge with a floating circular arrow trigger.
MUST
- Pair rich high-contrast photographic cutouts with muted pastel container surfaces.
- Use Playfair Display or equivalent editorial serif exclusively for headings and major discount percentages.
- Reserve vibrant coral (#EE6B56) strictly for interactive touchpoints, pills, and indicators.
- Maintain generous 20px to 28px border radii across all prominent container surfaces.
AVOID
- Do not use pure cold black (#000000) for body text; use deep slate green (#1E3329).
- Do not use geometric sans-serif type for the primary hero and promotional discount numbers.
- Avoid sharp 90-degree corners or tight radii below 10px on buttons and surfaces.
- Do not saturate promotional card backgrounds; keep them in delicate pastel registers.
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 中尝试 
