Design a light-mode mobile app interface screen: editorial organic market with warm stone surfaces, literary serifs, and farm-fresh still life photography.
LAYOUT
The mobile layout follows a rhythmic vertical cascade: utility greeting header, pill-shaped search cluster, a high-impact 16:9 dark hero banner, a 4-column horizontal category shelf, an asymmetrical bento promo grid (tall card left, stacked cards right), and product carousels beneath. Spacing is tightly disciplined around 12px gutters and 20px section boundaries.
PALETTE (use these exact hex values)
- #F9F8F6 — Canvas Oyster: Global application background setting a warm, tactile, artisanal tone.
- #FFFFFF — Surface Pure: Search bar interior and clean white elevated card backgrounds.
- #E8EBE4 — Soft Sage: Muted agricultural tint used for organic promotional cards.
- #EFECE6 — Warm Linen: Background for secondary promotional card blocks.
- #E6E2D8 — Delicate Rule: Hairline borders on inputs, category tiles, and outline buttons.
- #6E2628 — Terracotta Merlot: Primary hero CTA fill and cart badge counter pill.
- #1C241E — Forest Charcoal: Primary headings, high-priority labels, and editorial serif titles.
- #384B3D — Earthy Olive: Iconography tint inside category selector cards.
- #7B8378 — Muted Moss: Subtitles, placeholder text, and muted contextual labels.
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Freight Text, DM Serif Display), weights 400/500/600. Sizes 11px caption, 12px body-sm, 13px body, 16px subheading, 18px heading, 22px heading-lg, 30px display. Tracking -0.01em at display, 0 at text. The typography exudes literary sophistication and rustic elegance through a high-contrast serif (Playfair Display or Cormorant Garamond). It evokes a high-end farmers' market journal or an artisanal cookbook. Pair with a clear, unpretentious modern sans (Plus Jakarta Sans or Inter) to keep utility controls readable at sub-12px scales.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 24px, buttons 8px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Elevation is practically flat, eschewing drop shadows entirely. Depth is achieved strictly through photographic contrast, layered tonal cards (#E8EBE4 and #EFECE6), and subtle 1px border strokes (#E6E2D8). The dark hero card provides the visual weight that anchors the upper half of the screen.
IMAGERY
Photography follows farm-to-table editorial styling: deep, dramatic natural lighting, rustic wicker baskets, dark slate surfaces, and dewy, raw garden produce. Vector graphics are restricted strictly to minimalist line icons in dark forest green. Flat vector illustrations or sterile stock photos on white backgrounds are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of dark editorial still-life photography featuring Playfair Display typography directly above delicate, warm-paper category tiles and ghost-bordered buttons. This distinct balance of a moody dark hero with an airy, stone-colored shopping catalog creates an instant boutique culinary identity. Misusing it by adding vivid tech colors or flat vector artwork instantly destroys the crafted organic atmosphere.
MUST
- Use warm oyster tones (#F9F8F6) instead of sterile 100% digital white for page backgrounds.
- Pair high-contrast transitional serifs for titles with crisp, low-contrast sans-serif for UI labels.
- Rely on real agricultural and culinary still-life photography to supply color saturation.
- Enclose secondary cards with subtle hairline borders (#E6E2D8) on 16px corner radii.
AVOID
- Never use neon greens, harsh emeralds, or tech-startup saturated primaries.
- Avoid thick drop shadows; depth must come from photographic tone and tonal cards.
- Do not set UI microcopy, inputs, or system buttons in serif typefaces.
- Avoid hard square corners; maintain generous 16px to 24px curves throughout.
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 
