Design a light-mode website section: sun-bleached agricultural clarity grounded in warm paper whites, terracotta crimson, and fine-line telemetry data.
LAYOUT
Structured around a 1240px container starting with an asymmetric two-column hero section. The left column commands attention with a badge, three-tone headline, body copy, and dual CTA stack; the right displays an angled elevated application viewport. Below, a full-width 6-column footer arranges metadata, multi-category link columns, and a compact subscription form above a single-line copyright bar.
PALETTE (use these exact hex values)
- #FCFBF7 — Warm Canvas Base: Global background color establishing an organic, warm paper foundation across sections
- #FFFFFF — Card White: Elevated dashboard preview canvas, input fields, and foreground containers
- #BA2D29 — Terracotta Crimson: Primary call-to-action buttons, brand logo mark, and newsletter submit button
- #111418 — Deep Onyx: Main headlines, primary navigation titles, and prominent metrics numbers
- #5A6570 — Muted Slate: Paragraph descriptions, footer links, labels, and secondary metadata
- #1D68BD — Cobalt Accent: First accent segment in the hero display headline emphasizing scale
- #00875A — Harvest Green: Final segment of display headline, leaf badge icon, and positive metric indicators
- #E8E5DD — Hairline Border: Subtle perimeter strokes around pill badges, inputs, and footer divider rules
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 54px display. Tracking -0.03em for headings, 0 for body. Clean, contemporary neo-grotesque sans-serif with a utilitarian architectural voice. Tight display tracking (-0.03em) lends authority to the headline, while open proportions at 14-16px ensure effortless legibility in dense telemetry metrics and multi-column directory links.
GEOMETRY & SPACING
Corner radii — cards 16px, links 2px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is minimal and strictly reserved for product preview realism. The primary UI card floats on a soft, diffuse multi-stop shadow (0 20px 40px rgba(0,0,0,0.06)) atop the warm canvas, while buttons and inputs remain flat with crisp 1px outline boundaries.
IMAGERY
Vector and interface-driven rather than photographic. Abstract wispy blue topography lines weave delicately behind the hero canvas, while the product UI incorporates simplified GIS heatmaps, clean sparklines, and crisp SVG iconography.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive split-color hero headline where the primary thought is rendered in deep onyx while the concluding phrase shifts into dual cobalt and forest green words, set against a warm paper canvas with terracotta interactive triggers.
MUST
- Retain the warm #FCFBF7 background canvas to maintain the tactile agricultural tone.
- Split hero headlines cleanly into monochrome primary line followed by colored sub-segments.
- Keep CTA buttons in rich terracotta #BA2D29 with crisp 8px rounded corners.
- Use 1px borders in soft beige tones (#E8E5DD) rather than harsh neutral grays.
AVOID
- Do not switch the background to pure sterile white (#FFFFFF); it drains the organic warmth.
- Do not use high-saturation reds; keep the primary hue grounded in earthy terracotta (#BA2D29).
- Do not apply heavy drop shadows or glow effects beneath typography or buttons.
- Do not crowd the floating product mockups; allow at least 48px breathing room.
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. Try in DraPub 
