Design a light-mode mobile app interface screen: sunlit pastoral warmth shaped with botanical serenity and airy organic cards.
LAYOUT
The mobile interface uses a continuous vertical rhythm anchored by a 16px side margin. Content descends logically: top bar with brand badge and notification, full-bleed rounded hero carousel, 5-column horizontal category grid, 'Why choose us?' trust card carousel, secondary curated box promo banner, and ending with featured products.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary mobile screen background and base surface.
- #2A533E — Forest Moss: Primary brand colour, key action buttons, and highlighted header typography.
- #1E2420 — Deep Charcoal: Headings, titles, and high-contrast iconography.
- #637368 — Muted Sage: Subtitles, body descriptions, and auxiliary labels.
- #F4F6F4 — Card Mist Tint: Subtle circular button backgrounds and banner underlays.
- #EAECE9 — Border Tint: Outlines on feature value cards and category tiles.
- #E87A5D — Warm Apricot: Promotional highlight circle badge on marketing banners.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, DM Sans, Nunito), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 17px subheading, 20px heading, 24px heading-lg, 28px display. Tracking -0.02em on titles, 0em on body. The voice is optimistic, wholesome, and approachable, conveyed through a clean geometric sans with open apertures and friendly curves like Plus Jakarta Sans or Outfit. Weight contrast (700 for headlines, 400 for descriptors) guides the eye swiftly without feeling aggressive. If substituting, ensure the alternative retains rounded terminals and clear legibility at 11-13px.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 12px, buttons 10px. Spacing on a 4px unit, 16px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Depth is strictly planar and surface-driven rather than relying on drop shadows. Separation occurs via faint 1px border outlines (#EAECE9), muted background tints (#F4F6F4), and layered photo compositions. Floating circular badges create lightweight tactile hierarchy without blur filters.
IMAGERY
Photography emphasizes pastoral, farm-to-table aesthetics: lush rolling green fields under soft morning skies and crisp wooden crates packed with vibrantly coloured, untreated produce. Artificial studio graphics, heavy vignettes, or saturated commercial packaging are strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the circular line-art icon capsule paired with the deep forest green (#2A533E) pill button against pastoral scenery. Misusing it by replacing the light green circles (#F4F6F4) with solid dark backgrounds or high-contrast fills destroys the gentle organic baseline of the design.
MUST
- Use warm, soft-edge photography featuring organic produce, fields, and natural sunlight.
- Keep card corners rounded between 16px and 22px to retain organic friendliness.
- Reserve the warm apricot badge (#E87A5D) strictly for discounts and special offers.
- Maintain high white space margins (minimum 16px) around all interactive elements.
AVOID
- Never use sharp, squared corners (radius < 8px) on cards or buttons.
- Avoid heavy dark drop shadows; rely on 1px borders or subtle tints for depth.
- Do not saturate primary backgrounds with bright artificial greens or neon tones.
- Do not mix serif display typefaces into this clean modernist botanical system.
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 中尝试