Design a light-mode web interface screen: linens, terracotta earthenware, and late-afternoon terrace sunlight captured in an editorial culinary layout.
LAYOUT
The page flows from a clean top masthead directly into an asymmetric 50/50 hero split: left-aligned editorial thesis and CTAs balanced against a geometric circular food collage on the right. Below the fold, layout alternates between a full-width warm sand container for nonprofit metrics and a balanced 2-column card grid for the weekend itinerary. Content sections open consistently with an uppercase tracked eyebrow tag.
PALETTE (use these exact hex values)
- #FAF8F5 — Canvas Linen: dominant page background providing warmth without pure white glare
- #F4EFEB — Warm Sand: contained background for impact metrics section and secondary containers
- #FFFFFF — Card White: crisp card backgrounds and floating date badge in hero
- #B8533C — Terracotta Rust: primary call-to-action buttons, hero geometric accent arcs, and Friday badge
- #3C5D73 — Slate Blue: secondary geometric backdrop shape and Saturday event badge
- #1F2022 — Gala Charcoal: primary headlines, brand wordmark, and high-emphasis display figures
- #68645F — Muted Truffle: body copy, navigation items, metadata timestamps, and supporting labels
- #E7DFD5 — Divider Sand: subtle card borders and light outline separations
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Canela, Domaine Display), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 22px subheading, 28px heading, 38px heading-lg, 56px display. Tracking -0.015em at display, 0 at headings. The typographic tone is culturally literate, warm, and distinctly Manhattan. The high-contrast serif (closely matching Cormorant Garamond) delivers the historic prestige of Lincoln Center and heritage dining reviews, while the modern geometric sans (DM Sans) keeps functional information legible and approachable. Any replacement must maintain high stroke contrast in the serif without tipping into rustic country aesthetics.
GEOMETRY & SPACING
Corner radii — cards 14px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, airy density.
DEPTH
Depth is restrained and editorial. The page relies almost entirely on surface contrast between the canvas linen (#FAF8F5) and card white (#FFFFFF). Where physical elevation occurs—such as the hero date placard—it uses an ultra-diffused shadow (0 12px 32px rgba(31,32,34,0.06)) to float naturally without breaking print-like flat elegance.
IMAGERY
Imagery celebrates tactile fine dining, natural ambient restaurant lighting, and authentic candid human interaction. Food photography features shallow depth of field, artful plating, and organic textures like fresh herbs and ceramic glaze. Cold studio packshots or heavily saturated stock photography with artificial neon lighting are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The defining gesture is the geometric circular montage in the hero: a round gastronomic photo sliced and cradled by bold terracotta (#B8533C) and slate (#3C5D73) arcs, punctuated by a floating rounded date card and fine dot grid. To use it correctly, ensure circular elements overlap organically with at least one overlapping text badge. Misusing it involves separating the shapes into isolated icons or using harsh polygonal cutouts.
MUST
- Use generous vertical breathing room (minimum 88px) between editorial sections to retain gala prestige.
- Enforce uppercase 11px lettering with 0.08em tracking for all section eyebrow categories.
- Pair Cormorant Garamond display headings strictly with neutral geometric sans-serif for body and captions.
- Maintain the warm linen canvas (#FAF8F5); never replace it with clinical #FFFFFF except on cards.
AVOID
- Do not apply heavy drop shadows; use soft, diffused ambient diffusion (blur >= 20px, opacity <= 0.08).
- Avoid harsh black (#000000); always render deep darks in Gala Charcoal (#1F2022).
- Do not set long paragraphs or multi-sentence body text in serif fonts.
- Avoid sharp 0px corners on interactive cards and CTA buttons; maintain a 6px to 14px radius language.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1632:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试