Design a light-mode web interface screen: sunlit culinary editorial with refined serif typography, organic sage accents, and warm ivory card enclosures.
LAYOUT
The page follows a structured vertical cadence anchored by large 1200px max-width rounded island cards. It starts with an announcement utility strip and header navigation, descending directly into an asymmetrical split hero card. Below sits a centered editorial title introducing a three-column category grid, followed by a wide-enclosure containing recipe filter controls, a four-column recipe card grid, and a bottom pagination trigger.
PALETTE (use these exact hex values)
- #ffffff — Canvas Background: Global background fill for the entire page viewport
- #f8f8f7 — Card Soft Neutral: Subtle container fill for the hero banner and recipe category section
- #152620 — Deep Forest Slate: Top announcement banner, primary solid buttons, and darkest text
- #637d57 — Sage Green Accent: Italic headline accents, category badge fills, and active filter pill background
- #e9efe6 — Soft Sage Tint: Circular icon backplates for category navigation cards
- #1a1d1c — Text Primary: Display titles, section headings, and primary navigation links
- #6b726d — Text Secondary: Subheadings, descriptive body paragraphs, metadata, and inactive tags
- #b4533c — Text Category Terracotta: Uppercase meal category labels such as Dinner and Dessert
- #ecebe8 — Border Subtle: Delicate borders on feature cards, search inputs, and inactive pill buttons
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Freight Display, EB Garamond), weights 400/500/600. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 40px heading-lg, 52px display. Tracking -0.015em at display, normal at subheadings. The typography blends high-end print editorial sophistication with modern accessible web utility. The Cormorant Garamond serif brings romantic, literary culinary charm through delicate serifs and warm italic flourishes. Inter provides neutral, highly readable structure for metadata, tags, and microcopy, preventing the layout from feeling archaic.
GEOMETRY & SPACING
Corner radii — cards 24px, links 2px, inputs 999px, buttons 999px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely through surface nesting and subtle border contrast rather than drop shadows. Flat, softly tinted backgrounds (#f7f7f6) sit directly on the pure white body canvas, establishing content 'islands'. Crisp 1px borders in pale beige-gray (#ecebe8) delineate individual floating cards without visual noise.
IMAGERY
Photography is bright, naturally lit, and shot macro top-down or three-quarters angle with vivid, authentic textures of fresh food (artisan bread, berries, pasta). Composition is clean and unpretentious, celebrating wholesome raw ingredients. Unnatural studio gradients, dark moody chiaroscuro, or heavily processed stock images would severely break brand harmony.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the deliberate, fluid italic serif emphasis word—rendered in earthy sage green (#637d57)—nested right inside an otherwise upright, dark serif display headline (e.g., 'Healthy cooking for real life'). This typographic touch instantly delivers warmth, artisanal craft, and human editorial personality. It is misused if applied to entire sentences or repeated multiple times in a single heading block.
MUST
- Always set display serif headlines with generous line spacing and intentional italic emphasis on emotional words.
- Maintain high border-radius uniformity: strictly 24px for modular cards and 999px for interactive pills.
- Frame multi-card sections within an encompassing pale neutral background (#f7f7f6) to maintain island hierarchy.
- Pair food photography with clean, ample whitespace to evoke editorial publication standards.
AVOID
- Do not apply heavy multi-layer box shadows; surfaces rely on soft tints and delicate outlines.
- Do not use sharp, unrounded corners on cards or primary action buttons.
- Do not use saturated primary greens; always desaturate toward earthy sage (#637d57).
- Do not render recipe titles in sans-serif fonts; they must consistently appear in transitional serif.
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 中尝试 
