Design a light-mode website section: structured side-by-side product comparisons anchored by an oversized floating hero card in brilliant cobalt blue.
LAYOUT
Two-zone horizontal layout. Top row splits between a left-aligned heavy 2-line title with pill tag, and right-aligned intro copy flanked by dual CTA buttons. Below, a 4-column comparison matrix organizes features: column 1 lists feature criteria with category icons, column 2 is the elevated hero card, while columns 3 and 4 present legacy and manual alternatives.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global background canvas providing subtle contrast against pure white cards
- #FFFFFF — Surface Card White: Background for secondary comparison columns and primary elevated column
- #0265FF — Electric Brand Blue: Key primary button, brand card border, checkmark badges, and spark icons
- #EFF6FF — Soft Brand Tint: Background fill for champion summary footer pill and feature badge tags
- #0F172A — Text Primary: Hero heading text, column headers, and feature row titles
- #64748B — Text Secondary: Subtext descriptions below row headers, competitor details, and intro body copy
- #F1F5F9 — Subtle Gray Surface: Competitor bottom footer pill tags and category row icon backgrounds
- #E2E8F0 — Border Subtle: Light borders on secondary competitor cards and pill chips
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 18px heading, 38px display. Tracking -0.03em at display, -0.01em at body. Clean, authoritative, and direct. The bold display title ('Built for deskless work...') has tight negative tracking (-0.03em) conveying modern SaaS confidence, while high-legibility body sizes (11-14px) guarantee clarity inside dense comparative data grids. Inter or Plus Jakarta Sans are ideal replacements.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 8px, buttons 10px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved purely by contrasting the champion card against the flat matrix. The champion column has a subtle y-offset and a dispersed box-shadow (0 20px 35px -10px rgba(2, 101, 255, 0.12)), while secondary columns have no shadow, relying entirely on 1px borders.
IMAGERY
This interface avoids raster photos, relying solely on structured micro-icons (rounded chat bubbles, sparkles, user avatars, bar charts, shields, and price tags) contained within soft rounded squircle badges. Icons are clean, minimal, monochrome or subtle dual-tone.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the vertically protruding champion column: an elongated card that breaks the top and bottom boundaries of the comparison table, framed in a vivid blue outline with a soft ambient blue glow that magnetically pulls focus from the flatter competitor cards.
MUST
- Offset the champion card vertically by 16px to 24px above secondary competitor cards.
- Use solid #0265FF checkmark circles exclusively for the champion product.
- Keep secondary card borders minimal (1px solid #E2E8F0) and background solid white.
- Pair every feature header with a one-sentence descriptive subtitle in #64748B.
AVOID
- Do not apply red or aggressive danger colors to competitor negative points; use neutral grey.
- Do not give competitor cards dark shadows or contrasting colored borders.
- Do not alter the vertical height between corresponding rows across different columns.
- Do not use dark backgrounds; the high-contrast light mode clarity is essential.
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 
