Design a light-mode web interface screen: a warm, grounded tech landing canvas pairing terracotta accenting with calming sage flora and narrative vector geometry.
LAYOUT
Structured top-down starting with a standard 72px fixed-height horizontal navigation bar inside a 1240px container. The hero zone is an asymmetric 50/50 two-column split: left column stacks category eyebrow, display headline, body paragraph, twin CTA buttons, and social proof avatar pile; right column hosts an integrated organic illustration framing an in-situ UI search box. The section terminates with an anchored 4-column feature panel stretching the width of the main content container.
PALETTE (use these exact hex values)
- #FCFCFB — Canvas Warm Base: Primary background tone across the entire viewport for a warm, soft reading environment
- #FFFFFF — Card Surface Clean: Container surface for the bottom horizontal feature row and search input backgrounds
- #C0533C — Terracotta Brand: Primary CTA fill, logo glyph, and active eyebrow indicator dot
- #F7EEEB — Terracotta Subtle: Background fill for the primary search bar icon container and feature iconography
- #1E2432 — Deep Midnight Slate: Primary typographic color for headlines, bold sub-headers, dark chart callout bubble, and character pants
- #6C727F — Muted Slate Gray: Body copy, navigation text links, and secondary metric descriptions
- #7E998B — Earthy Sage: Secondary accent used in botanical foliage, targets, and trend chart icons
- #EDECE8 — Pale Neutral Border: Hairline boundary stroke framing the docked bottom feature bar and input fields
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Urbanist, DM Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 16px body-lg, 16px heading, 58px display. Tracking -0.03em at display, 0 at body. The typographic identity relies on a contemporary geometric grotesque (matching Plus Jakarta Sans or DM Sans) carrying clean open counters, a tall x-height, and precise terminals. Display sizes feel authoritative yet accessible thanks to rounded geometry and snug -0.03em tracking. Inter or Urbanist can serve as dependable web-safe open-source fallbacks without disrupting readability.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is communicated through layered vector planes and boundary strokes rather than diffuse blur shadows. The only floating elevation occurs in the illustration layer where the dark navy analytics speech bubble casts a flat, zero-blur outline over light gear graphics. The bottom feature card rests flatly upon the canvas defined by a crisp 1px neutral border (#EDECE8).
IMAGERY
Vector-based editorial illustration blending humanist character art with organic botanical foliage and clean technical UI schematics (magnifying glass, search input, segmented donut chart, gears). Characters use minimal detail, solid fill palettes matching the brand palette (rust, navy, cream), and organic curves. 3D renders, glossy skeuomorphism, and raw unedited photography would completely break the cohesive brand language.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive pairing of a warm off-white canvas with grounded rust terracotta action buttons and calm, hand-crafted botanical vector illustrations. It achieves a boutique, human-centered SaaS feel that avoids standard generic corporate tech blues. Misusing this pattern by introducing cold cyan tones or heavy drop shadows instantly destroys the warm editorial personality.
MUST
- Reserve the terracotta color (#C0533C) primarily for interactive primary buttons and active markers.
- Maintain generous line height (1.6) and comfortable padding around editorial body text.
- Pair flat editorial vector graphics with soft muted tones like sage (#7E998B) and sand (#E7E6E1).
- Use subtle 1px border outlines (#EDECE8) rather than heavy drop shadows for card definition.
AVOID
- Do not use saturated blues, neons, or glossy gradients anywhere in the interface.
- Do not introduce heavy box shadows; rely on flat surfaces with subtle boundary strokes.
- Do not render primary headings in pure pitch black (#000000); use deep midnight slate (#1E2432).
- Do not let secondary illustrations crowd or overlap the primary headline copy block.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3456:2384. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
