Design a light-mode web interface screen: earthy editorial warmth meets modern pet nutrition with gentle pastels and a decisive royal blue punch.
LAYOUT
The page follows an editorial top-to-bottom rhythm: sticky utility header, asymmetrical split hero (text left, product still-life right), a horizontal 4-column trust strip, a centered 4-column feature card grid, and a full-width promotion block with an integrated cat cut-out.
PALETTE (use these exact hex values)
- #FAFAF7 — Warm Canvas: dominant page background providing an organic, unbleached paper backdrop across all sections
- #FFFFFF — Surface Pure: card containers, header background, and input field surfaces
- #1B2723 — Deep Forest Text: primary headlines, subheadings, and dark graphic icons
- #195244 — Flora Green: accent headline phrasing, brand logo text, and eco-messaging highlights
- #3B72CE — Cobalt Blue: primary call-to-action buttons, active badges, and interactive navigation elements
- #63706B — Earthy Muted: body copy, secondary labels, micro-disclaimers, and metric descriptions
- #E8F4F1 — Mint Banner Tint: background for the promotional newsletter card banner
- #E5EAE7 — Hairline Border: subtle outline on cards, stat strips, and pill tags
- #FCEAEF — Blush Accent: soft circular background for pet-love thematic icons
- #FDF4E7 — Ochre Accent: soft circular background for ethical sourcing and star review ratings
TYPOGRAPHY
Typeface Fraunces (or Recoleta, GT Super, Playfair Display), weights 600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 32px heading, 60px display. Tracking -0.02em at display sizes. The typographic pairing speaks with grounded authority and playful warmth; the high-contrast display serif feels like an independent food publication, while the neutral geometric sans ensures high-clarity legibility for scientific claims and benefits. Substitute Fraunces or Recoleta freely to preserve the charming, curved-serif personality.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 12px, buttons 999px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved predominantly through flat layered surfaces, physical shadows cast by photographed objects, and hairline borders (#E5EAE7) rather than digital CSS box-shadows. The hero packaging casts a realistic soft floor shadow onto the canvas, grounding the product physically in the real world.
IMAGERY
Photography combines crisp, high-end studio pack-shots with authentic, cut-out lifestyle animal photography (e.g., an inquisitive tabby cat looking up). Illustrations are charming, nature-inspired, and monoline, avoiding tech-style vector gradients or clinical stock imagery.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone serif headline—where the sustainability clause abruptly pivots into a deep, lush green (#195244)—paired with a sudden, vivid royal blue action button. To execute it correctly, ensure the blue is reserved almost exclusively for conversion, while the green highlights planetary impact words.
MUST
- Use warm, high-contrast forest green (#195244) for brand-specific phrases within serif headlines.
- Rely on fully rounded 999px pills for interactive buttons and micro tag indicators.
- Pair delicate pastel circular backdrops (#EAF5EE, #FCEAEF) behind monoline line icons.
- Maintain a warm off-white canvas (#FAFAF7) rather than defaulting to cold #FFFFFF.
AVOID
- Do not use sharp 0px corners; all interactive and structural containers require 12px to 999px radii.
- Do not apply the royal blue action color to headlines or decorative graphics.
- Avoid cold gray backgrounds; everything must feel organically tinted and warm.
- Do not crowd the hero; maintain clear breathing room around packaging and kibble elements.
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. 在 DraPub 中尝试 
