Design a light-mode website section: structured dual-state contrast balancing warm friction against tranquil emerald resolution.
LAYOUT
The page adheres to a centered single-container grid (max-width 1040px) structured top-to-bottom: category tag, centered hero text block, 2-column comparison layout with central bridge node, 4-column metric strip, and centered reassurance footnote.
PALETTE (use these exact hex values)
- #FAF9F6 — Porcelain Canvas: Primary screen background lending warmth and reducing eye strain compared to stark white
- #FFFFFF — Card Surface: Elevated card background for comparison panels and lower statistic modules
- #0F172A — Ink Primary: High-contrast headings, numeric metrics, and primary feature titles
- #64748B — Slate Muted: Body copy, feature descriptions, and metric subtext annotations
- #EFEBE4 — Hairline Rule: Card outlines and horizontal row dividers separating feature comparisons
- #C86843 — Terracotta Problem: Icon glyphs and indicator dot representing manual, fragmented friction
- #FDF5EE — Terracotta Tint: Background fill for 'Before' icon badges and status pill
- #1F7A56 — Emerald Solution: Icon strokes, stat accents, and indicator dot for streamlined features
- #EBF6F0 — Emerald Tint: Background fill for 'After' icon badges and status pill
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, 'SF Pro Display', Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px heading, 32px heading-lg, 44px display. Tracking -0.025em on display, 0 on body. The voice is confident, quiet, and highly editorial, reminiscent of modern Scandinavian or Swiss SaaS products. The neutral grotesque typeface speaks with objective clarity, letting numerical claims and stark layout clarity convey enterprise competence.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 12px, buttons 999px. Spacing on a 8px unit, 20px gaps, 72px between sections, 1040px container, comfortable density.
DEPTH
Elevation is remarkably flat and relies on boundary definition through subtle 1px outlines (#EFEBE4) against the #FAF9F6 canvas. The only visible shadow is an ethereal 0 4px 14px rgba(0,0,0,0.04) cast by the central circular node to detach it from the comparison panels below.
IMAGERY
The interface strictly avoids photographic imagery, relying entirely on clean, line-based UI icons (mail, doc, users, clock, inbox, book, check, lightning, trend, smiley, star). Icons sit within 40x40px rounded squares with tinted backgrounds matching the column's semantic color.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-pill semantic symmetry: two mirror-image white cards juxtaposed with terracotta versus emerald icon badging, physically bridged by a floating circular arrow node that effortlessly visualizes operational migration.
MUST
- Use semantic pairing: terracotta (#C86843) exclusively for pain points, forest emerald (#1F7A56) for solutions.
- Keep card dividers hairline-thin (#EFEBE4) without high contrast drop shadows.
- Maintain symmetric alignment across both columns so list items correspond horizontally 1-to-1.
- Emphasize metrics with a compact, heavy font-weight (700) directly paired with tiny 12px captions.
AVOID
- Do not use pure red or harsh neon green; keep tones earthy (clay and deep sage).
- Do not let the central comparison node look interactive if it is purely informational.
- Do not drop the hairline borders—without them, white cards bleed into the porcelain canvas.
- Do not exceed two lines in the metric card descriptions to maintain uniform card heights.
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 
