Design a dark-mode website section: a dramatic shift from stormy dark-mode friction into sunlit automated clarity across a jagged alpine threshold.
LAYOUT
The header spans full width with a left-aligned brand mark and right-aligned compact navigation. The hero follows an asymmetrical 50/50 visual split: the left half hosts the headline, descriptive copy, primary CTA cluster, and a 3-part telemetry pill. The right half—straddling the central seam—presents the Before/After comparative UI cards linked by radiating vector traces, anchored at the bottom by an encroaching white container shelf.
PALETTE (use these exact hex values)
- #0d141b — Storm Obsidian: Dominant left canvas background representing manual bottleneck friction and stormy atmosphere
- #4ee388 — Kinetic Mint: Primary call-to-action fill, italic display text highlight, and radiant interface energy accents
- #ffffff — Signal White: Hero headline text, pill badges, primary button labels, and secondary ghost outlines
- #94a3b8 — Vapour Slate: Sub-headlines, muted card labels, table row descriptions, and passive metadata
- #0f2e1a — Meadow Canopy: High-contrast dark typography within the light-themed API preview card and green CTA
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif,Editorial New,Fraunces), weights 400/500. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 64px display. Tracking -0.02em. The display typography uses an editorial, high-contrast serif that feels historic, human, and authoritative, directly referencing the 'human' element of the offering. In contrast, the microcopy and API card leverage a razor-sharp, objective grotesque sans-serif that communicates machine precision and API speed. This deliberate clash mirrors the product's premise: human craft unlocked through technical infrastructure.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through photographic atmospheric haze combined with real-time backdrop blur on cards. Subtle 1px translucent borders (white on dark, dark mint on light) give cards edge definition without heavy box shadows. The central arrow node features a soft radial glow, visually floating above both mountain ridge and valley.
IMAGERY
A custom photographic composite merging a dark, moody Scottish-highlands cliff edge on the left with a radiant, flower-dappled Alpine meadow on the right. Both scenes align at a realistic vertical ridge line to suggest an impassable boundary conquered only by the product's API bridge. Any generic flat 3D render or vector illustration would completely break this physical metaphor.
SIGNATURE DETAIL — the thing that makes this design itself
The ragged geographical boundary line slicing down the screen that literally separates a dark stormy mountain from a bright blooming meadow, tied together by an illuminated central transfer arrow.
MUST
- Use lush, organic green accents (#4ee388) exclusively to indicate the automated, optimized future state.
- Pair classic serif display type with clean neo-grotesque sans-serif for interface data to maintain tension.
- Ensure the central cliff seam exactly bisects the manual problem card and automated solution card.
- Maintain high backdrop-filter blur (minimum 16px) on all floating glassmorphic cards.
AVOID
- Do not use flat solid backgrounds; the atmospheric landscape gradient is required for contextual storytelling.
- Never invert the layout by placing the green meadow on the left; friction must precede leverage chronologically.
- Avoid high-contrast saturated reds or oranges; error/manual states should remain muted and shadowy slate.
- Do not use sharp right-angle corners on floating UI components.
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. Try in DraPub 
