Design a light-mode website section: tactile comparison layout elevating the modern solution with saturated royal blue and floating layered hierarchy.
LAYOUT
The interface operates on a two-column asymmetric split (approx 38% left, 62% right). The left rail vertically cascades the headline, supporting paragraph, four bulleted features, and a pill CTA. The right rail contains the comparative matrix, structured with three columns where the center track is visually dominant, projecting upward past the top boundary.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Base canvas and primary card background fill across the entire viewport.
- #0d6efd — Electric Royal Blue: Brand hero header tab, active check badges, CTA borders, and primary eyebrow text.
- #0f172a — Slate Heading: Used for main display title, table row headers, and column titles.
- #64748b — Slate Muted: Body copy, sub-feature descriptors, and secondary metadata under each row title.
- #f59e0b — Warning Amber: Minus icons denoting traditional manual drawbacks in the rightmost column.
- #e2e8f0 — Border Subtle: Outlines and separators enclosing the baseline comparison container.
- #eff6ff — Ice Blue Tint: Background tint for left-hand feature icon blocks and subtle button focus states.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px subheading, 18px heading, 38px display. Tracking -0.02em on display, 0.05em on eyebrows. The geometric sans-serif (Plus Jakarta Sans match) projects engineering precision and modern SaaS clarity. Tightly tracked uppercase eyebrows add architectural structure, while the compact line heights on the large headline create an authoritative, decisive presence. For open-source parity, Inter or Outfit serves as a seamless fallback.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 9999px. Spacing on a 4px unit, 32px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is strictly reserved for the central 'Unisson AI Agents' column, which casts a diffuse, multi-layer shadow (0 12px 32px -4px rgba(13, 110, 253, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.05)). The underlying comparison grid sits flat on Level 1 with a hairline border (#e2e8f0). This binary flat-versus-lifted elevation instantly establishes the recommended choice.
IMAGERY
Vector line icons and colored glyph badges replace photography entirely. Icons in the left column use pastel backdrop chips (blue, mint, lavender, warm amber), while matrix rows use minimalist 20px status dots. Any realistic photography or 3D character illustrations would clash with this crisp, data-first product positioning.
SIGNATURE DETAIL — the thing that makes this design itself
The floating 'chimney' column: the central comparison column rises cleanly above the adjacent table shoulders, topped with a solid royal blue pill-header and wrapped in a gentle blue-tinted drop shadow that visually elevates the new paradigm above legacy alternatives.
MUST
- Extend the promoted comparison column 24-32px above the adjacent column frames.
- Use solid 20px circles with inset white vector glyphs for all matrix status indicators.
- Pair every primary row title with a 12px lighter subtitle to explain concrete business impact.
- Apply subtle colored wave lines only along the bottom periphery to prevent distraction.
AVOID
- Do not use red for negative indicators; use soft amber (#f59e0b) to maintain professional restraint.
- Do not allow the background comparison table border to clip through the promoted card.
- Avoid heavy dark borders; table outlines must remain hairline #e2e8f0.
- Do not set display headings in regular weight; they require bold 700 weight for punchy contrast.
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 
