Design a light-mode web interface screen: sunlit culinary editorial where airy serifs and muted herb tones breathe quiet luxury into wholesome dining.
LAYOUT
The page flows with rhythmic vertical spacing anchored by alternating split-hero sections and structured tri-column grids. A dense top banner sets a clean ceiling, followed immediately by an airy 80px masthead and a wide 50/50 hero pairing left-aligned text with right-aligned overhead photography. Section titles use centered ornamental locks before expanding into three identical 1px-outlined feature cards, which then resolve into left-aligned filter lists and offset photo collages.
PALETTE (use these exact hex values)
- #2E3F2E — Banner Pine: Top announcement bar background delivering high-contrast grounding at the page apex.
- #687B57 — Herb Sage: Primary interactive brand tone used on key CTA buttons, active pill chips, and spot illustrations.
- #FFFFFF — Canvas Pure: Main page surface providing maximum luminance and clean photographic contrast.
- #242824 — Editorial Charcoal: Primary headline text, navigation labels, and major title typography.
- #666864 — Muted Truffle: Secondary descriptive paragraph copy, category tags, and inactive filter labels.
- #E3E0D8 — Linen Hairline: Delicate 1px borders on feature cards, divider lines, and secondary ghost buttons.
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, EB Garamond, Bogart), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px subheading, 15px body, 28px heading, 42px heading-lg, 60px display. Tracking -0.01em at display, normal in titles. The typography balances heritage editorial charm with clean Scandinavian utility. Cormorant Garamond lends warmth, literary sophistication, and culinary craftsmanship—especially when transitioning fluidly between upright roman and delicate italic forms in the main headline. Jost brings structural restraint, keeping recipes and categories orderly, readable, and distinctly modern via generous uppercase tracking.
GEOMETRY & SPACING
Corner radii — cards 6px, links 0px, inputs 4px, buttons 4px. Spacing on a 8px unit, 28px gaps, 96px between sections, 1280px container, airy density.
DEPTH
Depth is rendered entirely through planar contrast and crisp line work rather than elevation shadows. Cards and interactive boundaries utilize a razor-sharp 1px stroke (#E3E0D8) resting directly on the primary white plane. Photographic subjects generate their own soft, organic ambient shadows naturally, eliminating any need for simulated CSS drop shadows.
IMAGERY
Photography consists of pristine, overhead flatlay culinary shots captured under soft morning natural light against neutral marble, ceramic, or linen backdrops. Ingredients are vibrant and fresh—crumbled cheeses, cut kiwi, berries, and sourdough—arranged organically without sterile perfection. Dark, moody, high-contrast, or artificial studio-lit imagery is strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-style headline lockup ('Beautiful meals, / made simple.') uniting upright display serifs with sloped, expressive italic glyphs, paired alongside delicate olive botanical line-art icons and whisper-thin hairline card borders. Overusing this pattern across body copy ruins its impact; it belongs exclusively in primary display anchors and category introductions.
MUST
- Pair roman and italic cuts of the serif font within the same headline for a refined culinary voice.
- Maintain high tracking (at least 0.15em) on all uppercase sans-serif metadata and eyebrows.
- Use overhead, bright natural-light photography shot on textured linen or clean white ceramic.
- Keep card surfaces completely flat without box shadows, relying strictly on 1px #E3E0D8 strokes.
AVOID
- Do not use heavy drop shadows, blurred glows, or multi-layered skeuomorphic elevations.
- Do not set long-form body text in serif; reserve serif strictly for headers and display titles.
- Do not collapse letter-spacing on uppercase sans-serif text labels or button labels.
- Do not use saturated yellow, bright red, or artificial neon accents that disrupt the herbal palette.
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 中尝试 
