Design a light-mode mobile app interface screen: refined farm-to-table culinary mobile interface with deep botanical green and airy stone surfaces.
LAYOUT
The interface operates on a single-column 390px mobile viewport with 16px lateral padding. Vertical rhythm flows logically: Header with brand identity -> Hero promotional carousel card -> Category icon dock -> Section title with action link -> Horizontal carousel of culinary product cards. Spacing between major blocks is held reliably between 20px and 24px.
PALETTE (use these exact hex values)
- #FAFAFA — Canvas Ground: Primary screen background underlying all modules and scroll containers
- #FFFFFF — Card Surface: Raised surface for dish cards and category tray
- #1A3A34 — Deep Botanical Green: Icon button fills, brand wordmark, hero card background, and primary headings
- #CDE0D2 — Fresh Sage Mint: Hero CTA button fill and active category icon background badge
- #1E2221 — Text Charcoal: Headings, dish titles, and active category label text
- #767E7B — Text Slate: Subtitle tagline, ingredient descriptions, and inactive category labels
- #EDEDED — Subtle Border: Delicate borders on category containers and dish cards
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700/800. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 15px subheading, 17px heading, 20px heading-lg, 24px display. Tracking -0.01em on titles, 0.05em on small uppercase caps. The typographic tone is sophisticated, European-editorial, and modern-utilitarian. Utilizing a clean geometric neo-grotesque (Plus Jakarta Sans or Inter) balances tight legibility at 11-13px with punchy confidence at display sizes. Clean letterforms without ornate serif flourishes ensure that photography remains the emotional focus of the culinary experience.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 999px, buttons 999px. Spacing on a 4px unit, 16px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Elevation is achieved through crisp layer separation rather than heavy diffusion. Pure white cards (#FFFFFF) sit upon a warm stone canvas (#FAFAFA) bordered by razor-thin hairline strokes (#EDEDED). The only photographic shadows exist naturally beneath top-down plating within the dish photography.
IMAGERY
Photographs must be premium, high-resolution top-down flat lays with rich organic textures like fresh herbs, textured garlic bulbs, and dark slate backgrounds. Food must look fresh, artisan, and plated on minimalist off-white ceramic dishware. Stock studio imagery with artificial backdrops or angled fast-food compositions is strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The signature motif is the dark botanical green (#1A3A34) circular control paired with pale mint (#CDE0D2) pill buttons and high-contrast overhead food photography. It grounds an otherwise airy white-and-stone layout with rich, earthy weight. Misusing it by switching the circular controls to pale gray or adding harsh drop shadows instantly collapses the fine-dining boutique feel into a generic food delivery app.
MUST
- Always use authentic overhead top-down food photography against clean slate or white plates.
- Maintain high-contrast circular button navigation at exactly 40px with deep dark botanical green #1A3A34.
- Pair bold dish titles with light, desaturated two-line descriptions in #767E7B.
- Keep card corners generous with consistent radii between 20px and 24px.
AVOID
- Never introduce neon accents or saturated secondary colors like electric red or bright orange.
- Do not use square or sharp corners anywhere in buttons, cards, or icon backdrops.
- Avoid multi-layered dropshadows; depth must remain flat, crisp, and editorial.
- Do not center-align the main hero headline; keep it left-aligned within the banner.
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. Try in DraPub 
