Design a light-mode website section: a side-by-side architectural crucible converting legacy operational friction into illuminated algorithmic efficiency.
LAYOUT
The layout leads with an asymmetrical header block: left-aligned eyebrow kicker and bold dual-tone display title, countered by a brief right-aligned introductory paragraph. Below lies a balanced two-column comparison section with two identical 24px rounded cards separated by a 32px gap. The section terminates in a centered, single-line footnote badge linking out to architectural documentation.
PALETTE (use these exact hex values)
- #F8F9FE — Atmosphere Canvas: ambient viewport background providing faint blue-violet tint behind cards
- #FFFFFF — Card Surface: pure white background for both main comparison panels and bridge node
- #E6EAF2 — Subtle Border: hairline boundary framing comparison cards, diagrams, and floating pill badges
- #0F172A — Obsidian Body: high-contrast headers, card titles, and feature headline copy
- #64748B — Slate Body: explanatory body descriptions, captions, and node label annotations
- #584AE3 — Iris Brand: primary brand punch on title emphasis, eyebrow kicker, and After highlights
- #F1F0FD — Iris Tint: background wash for after-badges, icon squares, and deployment stage panels
- #DE5A46 — Friction Coral: legacy pain indicator across before-badges, icon borders, and dotted flow nodes
- #FDF4F2 — Friction Tint: pale wash behind the Before status badge and friction icon tiles
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px subheading, 18px heading, 20px heading-lg, 36px display. Tracking -0.02em at display, 0 at body, 0.08em at kicker. The typographic register is authoritative, modern, and mathematically poised, leveraging geometric letterforms with neutral neo-grotesque discipline. The tight negative tracking on display weights injects engineering confidence, while generous line heights on body paragraphs ensure dense technical explanations remain scannable.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is restrained and predominantly flat, relying on hairline borders (#E6EAF2) to delineate bounds against the pale canvas. A solitary, subtle dropshadow (0px 4px 12px rgba(15,23,42,0.06)) is reserved for the floating bridge arrow circle, creating physical separation as it hovers above the card boundary line.
IMAGERY
Vector line schematics replace photographic imagery, utilizing clean 1.5px stroke icons, rounded diagram nodes, and a stylized isometric central cube. Graphics are purely abstract and diagrammatic, avoiding realistic hardware renders in favor of clear conceptual pipeline flows.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-state comparative mirror: two identically sized cards featuring contrasting semantic palettes (coral friction vs. iris automation), bridged at the seam by a floating directional arrow medallion. Identity is broken if the cards are stacked vertically or if the central transition medallion is removed.
MUST
- Strictly maintain parallel vertical heights for both comparison cards to preserve visual parity.
- Use desaturated warm coral (#DE5A46) solely for problem/legacy states; never use it as a general accent.
- Reserve iris (#584AE3) for the transformative solution side and high-value brand calls to action.
- Keep icon boxes square (36x36px) with 10px rounded corners and subtle matching tint backgrounds.
AVOID
- Do not introduce dark theme panels; the design depends on high-key luminosity and pastel tints.
- Never replace the bridge arrow circle with a plain line; it conveys dynamic conversion.
- Do not use sharp 0px corners; all cards, badges, and icon envelopes must remain smoothly rounded.
- Never use full-bleed heavy saturated red for the Before card; desaturated coral avoids harsh panic.
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 
