Design a light-mode website section: crystalline precision meeting deep petrol depths through particle mist and controlled botanical emerald typography.
LAYOUT
The screen operates on a strict center-anchored hierarchy flowing into a structured multi-column base. It opens with an auto-centered pill badge, cascades into a massive two-line centered display heading, centered paragraph, and dual button cluster. Directly underneath lies an unboxed four-column feature row spanning 1140px. The page abruptly terminates into a full-width dark petrol container holding a left-aligned brand identity, four nav columns, an inline newsletter module, and a thin bottom legal copyright strip.
PALETTE (use these exact hex values)
- #ffffff — Canvas Light: Primary hero and CTA section background allowing textural watercolor plumes to breathe.
- #041c22 — Petrol Abyss: Deep grounding footer background providing high-contrast anchor to the page termination.
- #0a6c55 — Pine Emerald: Primary action button background, secondary line of hero headline, and badge shield icon.
- #50b88c — Seafoam Accent: Newsletter submission button fill and subtle icon accent highlights.
- #0e1e24 — Ink Slate: First line of hero title, section subheaders, and dark canvas typography.
- #4a5e65 — Muted Sage: Hero body paragraph and feature strip descriptions on the light canvas.
- #d5e2e5 — Frost Cyan: Footer navigational links and logo text on dark petrol background.
- #7b979e — Submerged Slate: Footer column headers, brand summary text, and copyright disclaimer.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 52px display. Tracking -0.025em for display titles, 0.05em for uppercase labels. Plus Jakarta Sans gives the interface an engineered, confident, yet modern finish. The tight tracking (-0.025em) and heavy weight in the 52px headline command authority without feeling brutalist. The subtle dual-color split (slate and pine emerald) directs cadence and vocal inflection, perfectly tuned for high-assurance developer infrastructure tooling.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Elevation is rigorously suppressed across structural components, avoiding card drop shadows or floating header bars. The sole locus of dimensional depth is the primary CTA button, which utilizes a saturated teal-emerald ambient glow (0 12px 24px -6px rgba(10,108,85,0.35)) to pull forward. The footer remains strictly flat, relying on raw value contrast against the white canvas rather than layered Z-indices.
IMAGERY
Flanked by airy, generative watercolor-like stipple mist that bleeds inward from both edges: cool cyan-emerald grains on the left, warm terracotta and amber dust on the right. The center canvas is kept pristine white to safeguard headline legibility. Stock photography or heavy realistic 3D shapes are strictly prohibited; only abstract granular particulate plumes and fine linear vector iconography are allowed.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone display title ('Validate every action.' in Ink Slate, 'Ship with confidence.' in Pine Emerald) balanced between peripheral aerosol particle plumes and an immediate plunge into a dense petrol footer. Replicate by anchoring a centered, colored two-phrase header on clean white and grounding it instantly with a deep petrol teal multi-column footer.
MUST
- Use two distinct headline colors: dark slate for line one, pine emerald for line two.
- Pair the primary green CTA with a diffuse teal shadow while keeping secondary links flat.
- Place the four feature blocks in a clean horizontal flex line without card borders or backgrounds.
- Maintain high uppercase letter-spacing (0.06em to 0.08em) for all footer category headings.
AVOID
- Do not add full background cards or bounding boxes around the four mid-page feature columns.
- Do not use generic gray drop shadows; keep CTA elevation strictly chromatic and emerald-tinted.
- Do not make the footer background neutral gray or pure black; it must remain cyan-infused petrol.
- Do not center-align the footer columns; keep them strictly left-aligned under category labels.
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 
