Design a light-mode website section: crisp modern enterprise software breathing open air against a soft rolling meadow horizon.
LAYOUT
The header spans full width with a left-aligned wordmark and icon, center-left text links, and right-aligned dual action buttons. The hero follows a two-column distribution: left column houses an eyebrow badge, two-tone display headline, explanatory paragraph, CTA pair, and a three-column trust footer. The right column showcases the centered SMS composer mockup linked via dotted vectors to a vertical stack of four feature cards over the landscape.
PALETTE (use these exact hex values)
- #FFFFFF — Pure White: Primary background for the left pane, cards, modals, and input fields
- #1865F2 — Vivid Cobalt: Primary CTA buttons, text headline accents, brand logo, and active focus states
- #0C1527 — Ink Navy: High-contrast headings, body titles, and active input labels
- #5D6A83 — Muted Slate: Body copy, navigation links, metadata descriptions, and placeholder text
- #E3FAF2 — Mint Glaze: Background fill for the top AI tag and circular send button
- #0D9668 — Mint Pine: Label text and icon color for the top AI badge and online status ring
- #D97706 — Warm Gold: Icon container background and border for the compliance callout pill
- #E6EBF2 — Border Subtle: Secondary button outlines, card boundaries, and divider rules
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 48px display. Tracking -0.03em on headline, 0 on body, 0.05em on uppercase tags. Plus Jakarta Sans delivers a contemporary, clean-tech aesthetic with subtle geometric flair that feels both approachable and enterprise-ready. The heavy weight in the display heading gives frontline operations authority, while the lower-contrast body copy keeps long reading effortless. Inter or DM Sans serve as seamless drop-in open-source alternatives without losing proportional balance.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using wide-dispersion, low-opacity ambient shadows (0 16px 40px rgba(12, 21, 39, 0.08)) rather than hard outlines or multi-tiered surfaces. The message card visually hovers several virtual pixels above the blended meadow background, establishing it as an actionable layer. Subtle z-index layering is reinforced by delicate dotted connecting lines tethering the central card to peripheral satellite nodes.
IMAGERY
The imagery features an authentic, sunlit shot of rolling alpine or meadow hills dotted with small yellow flowers under a soft blue sky. The image sits flush on the right half of the hero and gently feather-gradients into clean white toward the center-left. Heavy corporate photography, urban architecture, or 3D isometric tech graphics would break the serene, outdoor-worker ethos.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal cross-fade connecting a clinical, high-productivity white SaaS layout directly into a tranquil sunlit field of wildflowers. This visual juxtaposition immediately signals 'deskless' and 'frontline' without relying on cliché hardhat or warehouse imagery. It is commonly misused by hard-cropping the landscape image rather than feathering it into pure background white.
MUST
- Use high-contrast electric blue (#1865F2) selectively for key terms in display headings and primary CTAs.
- Blend the background photographic landscape into pure white using a soft horizontal gradient mask.
- Keep typography tight on display headings with -0.03em tracking and 1.1 line-height.
- Ensure feature pills on the right side retain pure white backgrounds and crisp micro-shadows over the photo.
AVOID
- Never let the background nature photo extend under the main copy with full opacity.
- Do not use dark or heavily bordered containers for the floating product card mockup.
- Avoid sharp 0px border radii anywhere; everything must be softened with 8px to 999px curves.
- Do not clutter the top navigation with filled background pills or heavy dividers.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
