Design a light-mode web interface screen: earthy editorial analytics balancing rich forest greens and warm terracotta washes against crisp data interfaces.
LAYOUT
The page flows along a centered vertical spine bounded by a 1200px container. The hero presents an asymmetric split (headline/CTA left, elevated dashboard preview right), transitioning into an open four-column linear workflow, followed by a structured 3x2 grid of feature cards, and resolving into tiered pricing tables.
PALETTE (use these exact hex values)
- #FAF9F6 — Canvas Warm White: Global page background providing a warm, paper-like editorial alternative to sterile white.
- #FFFFFF — Surface Pure White: Card backgrounds, floating interface preview, and interactive container fills.
- #345D48 — Forest Green: Primary hero CTA background, prominent headline emphasis word, and data metric indicators.
- #C85A32 — Terracotta Ember: Header CTA button, eyebrow section kickers, and high-priority notification badges.
- #111827 — Ink Slate: Primary headlines, high-value metrics, and high-contrast title typography.
- #64748B — Graphite Muted: Body copy, supporting explanations, chart axes, and inactive navigation links.
- #EBF2EE — Pale Sage Wash: Circular icon backgrounds for feature badges and subtle metric card highlights.
- #EAE7E1 — Subtle Line Border: Thin outlines on feature cards, divider lines, and card containers.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans,DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 32px heading, 48px display. Tracking -0.025em at display, +0.1em on uppercase eyebrows, 0 on body. The voice is composed, authoritative, and humanistic, using Plus Jakarta Sans to combine modern Scandinavian geometric restraint with welcoming warmth. If unavailable, Inter or DM Sans provide equivalent clarity and aperture.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 112px between sections, 1200px container, airy density.
DEPTH
Depth is created through ambient, warm-tinted drop shadows rather than harsh grey layers. The floating hero dashboard utilizes an extensive 40px blur with 10% opacity at a 16px downward offset, while grid cards rely on hairline 1px borders (#EAE7E1) with near-zero elevation.
IMAGERY
Imagery pairs precision UI micro-interactions with organic, landscape-inspired watercolor bleeds (olive sage blending into dusty terracotta). Hand-drawn topographic isolines subtly texture section transitions. No stock photography of offices or literal hardware is used.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious clash between hyper-precise modern UI dashboard widgets and fluid, natural watercolor landscape washes—grounded by the dual signature palette of Forest Green and Terracotta.
MUST
- Use Forest Green (#345D48) for the hero CTA and key positive metric signals.
- Style section eyebrow headers in uppercase Terracotta (#C85A32) with wide tracking.
- Keep card backgrounds pure white (#FFFFFF) against the warmer canvas (#FAF9F6).
- Pair minimal, precise data charts with soft organic watercolor bleeds in the hero background.
AVOID
- Do not use high-saturation pure neon greens or generic tech blues for primary buttons.
- Never set section eyebrows in lowercase or zero letter-spacing.
- Avoid harsh black drop shadows; keep elevation blurs soft, warm, and low-opacity.
- Do not place stark white cards directly onto a stark pure white background without borders.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1504:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
