Design a light-mode website section: structured fintech contrast dividing painful legacy friction from purple-hued automated precision.
LAYOUT
Centered single-column page structure with a centralized hero headline and subhead block. Below sits the main comparison grid consisting of two 50/50 columns flanked by a centered flow arrow. The page concludes with a horizontal, full-width CTA utility banner anchored with balanced left-aligned content and right-aligned buttons.
PALETTE (use these exact hex values)
- #fbfbfd — Canvas Background: Primary page background providing clean high-contrast isolation for content modules.
- #ffffff — Card Surface: Background for comparison cards and hero bottom banner.
- #e9ebf2 — Border Subtle: Outlines and dividing strokes for cards, divider lines, and inputs.
- #5c4cf4 — Brand Violet: Primary CTAs, directional arrow node, solution highlights, and gradient stems.
- linear-gradient(135deg, #7c6cfc 0%, #5444ec 100%) — Brand Gradient Violet: Feature illustration backplate and primary product icon tile.
- #e05d52 — Problem Coral: Warning badge icons, problem tag header, and error status cues.
- #fdf1f0 — Problem Tint: Background fill for problem state icon squares.
- #f3f2fe — Solution Tint: Background fill for solution state icon squares.
- #11141a — Text Primary: Main headers, section titles, and emphatic feature names.
- #626773 — Text Secondary: Explanatory body copy and subordinate item descriptions.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 22px heading, 28px heading-lg, 44px display. Tracking -0.03em at display, -0.01em at body, 0.08em at overline. The voice is confident, technical, and executive-ready. The clean geometry of Inter (or Plus Jakarta Sans) gives the financial workflow tools an air of modern algorithmic efficiency, eliminating visual clutter in favor of scannable precision.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated primarily through structural framing rather than heavy shadows. Cards use a faint 1px border (#e9ebf2) against an off-white canvas (#fbfbfd). The floating product preview card relies on a soft blur shadow (0 12px 32px rgba(92, 76, 244, 0.08)) to elevate it cleanly above the lavender backdrop.
IMAGERY
Vector line icons rendered in consistent 1.5px stroke weight enclosed within softly tinted rounded squares. The product preview is an idealized UI card with clean geometry, micro-pills, and smooth vector sparklines. Photographic assets or photorealistic 3D renders are prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The central circular arrow node pinned directly over the vertical dividing border between the red-tinted Problem card and the violet-tinted Solution card, visualizing an instant operational shift.
MUST
- Strictly maintain the coral-red vs brand-violet color assignment between problem and solution columns.
- Use 20px radius on macro outer containers and 10px on inner actionable buttons.
- Keep text hierarchy stark: black for titles (#11141a) and slate grey (#626773) for subtext.
- Anchor the center divide with a circular transition badge to communicate directional progression.
AVOID
- Never mix the red and violet accents within the same column.
- Do not use dark backgrounds; the system relies heavily on luminous high-key white and pale slate.
- Avoid harsh black drop shadows; keep elevation subtle via 1px tinted borders.
- Never display the comparison columns without an explicit visual divider.
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 
