Design a light-mode website section: pastoral warmth meets enterprise voice infrastructure through classical serifs, washed landscapes, and terracotta accents.
LAYOUT
The layout is divided into two balanced modules separated by generous whitespace and subtle borders. The upper CTA module pairs a left-aligned editorial content block with a right-aligned landscape fade, completed by a horizontal divided metadata strip. The lower footer presents an asymmetric layout: brand intro on the left, four equidistant link columns in the center, a contained utility card on the right, and an expansive legal/copyright baseline.
PALETTE (use these exact hex values)
- #F7F4EE — Warm Parchment: Global background canvas providing an organic, paper-like foundation across hero and footer.
- #FCFBF9 — Card Surface: Elevated white-adjacent background for the newsletter subscription box.
- #BA261E — Terracotta Crimson: Primary conversion button background, submit button, and uppercase tracking eyebrows.
- #181816 — Ink Charcoal: Main editorial headings, logo typography, and primary button label text.
- #5A5753 — Muted Truffle: Body copy, subheaders, footer navigation links, and input placeholder text.
- #E3DED6 — Warm Neutral Border: Dividers between bullet items, horizontal separator lines, and newsletter card borders.
- #4D7A4A — Sage Meadow: Dot markers beside feature bullet labels across the horizontal trust bar.
- #EAE5DC — Watermark Ghost: Ultra-light decorative typography embedded deep in the footer background.
TYPOGRAPHY
Typeface Newsreader (or Canela,Editorial New,Baskerville), weights 400/500. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 36px heading, 44px display. Tracking -0.02em at display sizes. The typography communicates institutional weight, heritage, and modern software clarity simultaneously. Pairing a classical, high-contrast transitional serif (Newsreader) with an ultra-clean, neutral neo-grotesque sans (Inter) generates an editorial presence akin to a literary journal or financial dispatch. If Newsreader is unavailable, Canela or Baskerville faithfully reproduce the authoritative tone.
GEOMETRY & SPACING
Corner radii — cards 8px, links 2px, inputs 6px, buttons 6px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is flattened and physical, relying on 1px subtle hairline borders (#E3DED6) and tonal shifts rather than cast shadows. Minimal elevation is expressed solely by the crisp, paper-white surface of the newsletter card sitting upon the linen canvas. The design conveys prestige through print-like composition instead of layering and z-axis floating effects.
IMAGERY
Photography features soft-focus, cinematic natural landscapes (sunlit hills, morning mist, wild flora) captured with warm golden hour sidelight. The imagery is horizontally graduated into the solid cream canvas on the left, completely avoiding tech hardware, servers, or generic corporate stock. Visuals must evoke calm stability, territory, and natural resilience.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious clash between a romantic, sun-drenched pastoral landscape and an austere enterprise typography layout. It is executed specifically by graduating the landscape into a solid #F7F4EE parchment canvas where classical serif headlines meet terracotta hardware buttons. If you replace the meadow photo with a 3D isometric render or change the background to stark white, the entire soul of the brand dissolves.
MUST
- Use Newsreader or equivalent high-contrast serif exclusively for high-level editorial headers.
- Maintain the warm linen background (#F7F4EE) across light-themed modules rather than pure #FFFFFF.
- Reserve the terracotta red (#BA261E) strictly for interactive primary actions and uppercase kicker labels.
- Fade photographic backdrops with a horizontal alpha gradient to seamlessly disappear into the canvas.
AVOID
- Do not apply heavy dropshadows or dark elevation blurs to cards or buttons.
- Avoid harsh high-tech cyber aesthetics or glowing neon accents.
- Never substitute the warm cream base with cold neutral grays like #F3F4F6.
- Do not set footer directory navigation links in serif typography; keep them in utilitarian sans.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
