Design a light-mode website section: crisp comparative duality balancing magenta pain points against electric blue automated product velocity across generous frosted light canvases.
LAYOUT
The layout is a balanced two-column comparative architecture. The left column presents the negative status quo across four vertically stacked friction cards, while the right column showcases the solution via an interactive vertical workflow stepper coupled to a detailed simulated product cockpit. Both cards culminate in distinct visual anchors, with the right column concluding with a prominent CTA stack and reassurance badges.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ground: Global page background providing subtle tint behind floating white cards
- #FFFFFF — Card Surface: Primary container surface for the problem and solution comparison cards
- #F8FAFC — Nested Panel Surface: Sub-card background for problem list items and unselected workflow panels
- #2563EB — Brand Electric Blue: Solution accents, active workflow states, primary action buttons, and highlighted keywords
- #DB2777 — Problem Magenta: Emphasized negative headline copy and pain-point highlight accents
- #10B981 — Metric Positive Green: Uplift indicators and positive growth delta percentages inside preview cards
- #0F172A — Text Primary: Main headers, pain point titles, and high-emphasis metric values
- #64748B — Text Secondary: Body copy, subheaders, workflow descriptions, and supporting label text
- #E2E8F0 — Border Subtle: Hairline container borders, nested module outlines, and divider lines
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Satoshi), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 36px display. Tracking -0.03em at display, 0.08em at uppercase tags. The typographic tone is authoritative, concise, and modern B2B SaaS. Plus Jakarta Sans provides high geometric legibility with humanist warmth in lowercase terminals, perfectly suited for rapid feature comprehension. For production fallbacks, Inter or General Sans maintain identical vertical metrics and punchy tracking.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is subtle and atmospheric. Cards float above the #F8FAFC canvas with an ultra-soft dual shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.03) and 0 20px 25px -5px rgba(15, 23, 42, 0.05). Nested items rely purely on 1px borders and distinct surface tones rather than elevation.
IMAGERY
Avoids photographic imagery entirely in favor of schematic product abstractions and clean vector line icons. Visual interest is driven by simulated product dashboards, sleek wave charts with blue-to-purple linear gradients, and clean rounded platform logos (Slack, X, LinkedIn).
MUST
- Reserve #DB2777 strictly for the problem card and #2563EB strictly for the solution card to maintain polarity.
- Keep outer card border radii at 24px and nested sub-modules consistently at 12px to 16px.
- Maintain high headline contrast by highlighting exactly one critical keyword per heading in accent color.
- Use 1px light borders (#E2E8F0) to define module edges instead of saturated outlines or heavy shadows.
AVOID
- Never mix the magenta problem accent into the solution side or vice versa.
- Do not use saturated backgrounds; surfaces must remain pure white or soft slate tint (#F8FAFC).
- Avoid generic black shadows; keep card drop shadows diffuse, long, and low-opacity (<0.06).
- Never omit the uppercase tracking on eyebrow labels; without 0.08em tracking they appear heavy.
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 
