Design a light-mode web interface screen: sunlit kitchen clarity grounded in pressed olive greens, artisanal sourdough textures, and calm editorial whitespace.
LAYOUT
The page opens with a classic split hero: high-impact textual hierarchy and CTA buttons on the left, contrasted by an unconstrained top-down food flat-lay bleeding from the right. Below, a centered category trio is organized in a balanced 3-column grid with generous 24px gutters. The layout then transitions into a subtle warm-linen surface housing an asymmetrical 'Fresh picks' header and a horizontal 4-column recipe carousel with edge controls.
PALETTE (use these exact hex values)
- #4E5D3E — Olive Leaf: Primary interactive buttons, category icons, active accents, and colored emphasis words in titles.
- #1F2421 — Charcoal Black: Display headlines, card titles, navigation items, and high-emphasis textual content.
- #6E776D — Pecan Muted Gray: Body copy, meta badges, secondary subtitles, and secondary iconography.
- #FFFFFF — Pure Canvas: Primary hero background, floating card containers, and carousel arrow surfaces.
- #F9F9F6 — Warm Alabaster: Secondary section canvas background for recipe lists and lower page blocks.
- #EFF2EB — Soft Sage Tint: Circular icon action button background inside the category card component.
- #E7E9E3 — Hairline Gray: Card borders, secondary button outlines, and subtle interface dividers.
- #EAA23B — Amber Apricot: Customer star ratings and small promotional accents.
TYPOGRAPHY
Typeface DM Sans (or Plus Jakarta Sans, Inter, Work Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 22px subheading, 34px heading, 56px display. Tracking -0.02em on headings, 0.12em on uppercase eyebrows. DM Sans delivers an airy, contemporary kitchen aesthetic that balances the warmth of lifestyle cooking with modern functional clarity. Headlines use bold weights with slight negative tracking to feel grounded, while uppercase eyebrow captions feel crafted and curated. In environments lacking DM Sans, Plus Jakarta Sans serves as an ideal replacement.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, airy density.
DEPTH
Depth is created purely through surface shifts and 1px hairlines (#E7E9E3) rather than traditional blur shadows. Moving from the #FFFFFF hero to the #F9F9F6 lower container establishes subtle structural grounding while preserving a flat, clean editorial aesthetic.
IMAGERY
Photography consists of bright, naturally lit overhead table spreads and clean culinary prep bowls on light stone surfaces. Saturated, artificial food photography, dark moody restaurant vignettes, or heavy studio drop-shadow cutouts are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline technique where the final focus word adopts the brand's earthy olive tone ('Let's get cooking'), tied together with the circular #EFF2EB arrow micro-button nestled within minimalist border-stroked cards. Misuse commonly occurs when the colored accent word is overused on entire sentences rather than reserved for single emotional anchors.
MUST
- Reserve #4E5D3E exclusively for brand actions, selected highlights, and category illustrations.
- Pair top flat-lay food photography with seamless pure white boundaries (#FFFFFF).
- Keep card surfaces flat, relying on 1px borders (#E7E9E3) rather than drop shadows for separation.
- Always set eyebrow pre-headers to 11px uppercase with minimum 0.12em letter spacing.
AVOID
- Do not introduce cold corporate blues, pure greens, or saturated neon accent tones.
- Do not use heavy multi-level box shadows; elevation is crisp, flat, and border-driven.
- Do not apply fully round pill shapes to primary text buttons; use an understated 6px radius.
- Do not clutter photography with dark gradient overlays, banners, or centered promotional stamps.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1456:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
