Design a light-mode website section: high-contrast comparative storytelling pitting fragmented manual drudgery against glowing, automated midnight precision.
LAYOUT
Centered vertical progression beginning with a kicker badge, headline, and subtitle block. The midsection features a two-column 50/50 card comparison bridged by a central circular vector arrow. Directly below, an expansive horizontal shelf splits into a four-column grid highlighting enterprise readiness.
PALETTE (use these exact hex values)
- #f8fafc — Canvas Background: Outer page background providing sterile contrast for foreground elements
- #ffffff — Light Card Surface: Background for the legacy friction card and the bottom trust shelf
- #0c1527 — Dark Card Surface: Hero comparison card representing the autonomous AI layer
- #e2e8f0 — Card Outline Stroke: 1px hairline borders around light cards, bottom shelf, and pills
- #0a0f1d — Text Primary: Display headings, dark labels, and primary light-card titles
- #64748b — Text Muted: Secondary step descriptions, metadata, and supporting body copy
- #ef4444 — Friction Red: Slow task indicators, high duration labels, and total latency sum
- #fef2f2 — Friction Red Soft: Background tint for manual latency duration badge pills
- #10b981 — Velocity Emerald: Fast mitigation badges, success nodes, and mitigated duration copy
- #064e3b — Velocity Emerald Soft: Dark tinted pill background for automated timing chips
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 40px display. Tracking -0.02em at headlines, 0.01em at body. The typographic tone is calculated, technical, and objective. Plus Jakarta Sans or Inter delivers crisp geometric clarity with neutral terminals, conveying computational speed and zero-friction operational control without stylistic gimmickry.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1180px container, comfortable density.
DEPTH
Depth is created through contextual isolation rather than traditional layered card shadows. The left card sits flush with a crisp 1px stroke, while the right card emits an ethereal, diffused blue radial glow (blur 48px, spread 0, opacity 25%) that draws immediate visual gravity.
IMAGERY
Iconography is strictly vector, monoline, and functional, rendered at 16px to 20px within unified circular frames or bare glyphs. Abstract illustrations, mascot graphics, and photographic textures are avoided to maintain enterprise engineering credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric bimodal side-by-side card pattern: pairing an unstyled, friction-laden white card with a luminous midnight-blue automation card linked by an arrow pivot node. Misusing this by flattening both cards to light mode completely destroys the emotional narrative.
MUST
- Anchor the manual workflow in sterile light mode and autonomous workflow in technical midnight navy.
- Use exact 999px pills for all micro-timing duration tags across both states.
- Connect automated nodes with a continuous vertical 1px hairline stroke centered beneath circular icons.
- Maintain strict symmetry between left and right cards in outer height, padding, and row count.
AVOID
- Do not give both cards the same background shade; the bimodal contrast is essential.
- Do not omit the bottom summary rows; the direct time delta (42m+ vs 7-8m) is the conversion payoff.
- Do not use sharp square corners on duration badges; always enforce full pill radii.
- Do not saturate the manual red badges; keep backgrounds pastel #fef2f2 to prevent visual overwhelm.
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 
