Design a light-mode website section: crisp high-contrast enterprise saas bathed in an asymmetric cobalt aura with paired before-and-after transformation cards.
LAYOUT
The header sits within a 1240px container above an asymmetric two-column hero section. The left column (approximately 50% width) sequences the release badge, 54px headline, paragraph, dual CTA buttons, and credibility metrics vertically with 20-28px spacing. The right column showcases the dual-card transformation artifact aligned with the headline top edge, transitioning downward into a rounded 40px white secondary card block.
PALETTE (use these exact hex values)
- #FFFFFF — Pure White: Primary page background and floating dashboard card base
- #1366FF — Cobalt Blue: Primary CTA button fills, logo glyphs, active stats banner, and headline emphasis
- #0D1527 — Midnight Slate: High-contrast display headlines and section titles
- #5A6881 — Muted Slate: Body descriptions, secondary labels, and navigation links
- #DCEBFF — Atmospheric Sky: Ambient glow and gradient mesh blooming across the right canvas
- #F1F5F9 — Wireframe Ghost: Background fill for the desaturated pre-conversion interface model
- #E2E8F0 — Border Tint: Secondary button outlines and card perimeter strokes
- #10B981 — Vibrant Emerald: New feature status pip and positive conversion percentage indicators
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 36px heading, 54px display. Tracking -0.03em at display, -0.01em at body, 0.08em at caps. Plus Jakarta Sans delivers an assertive, high-growth modern personality. Tight letter tracking at 54px display sizes makes the text punchy and authoritative, while relaxed tracking at 13-15px preserves high legibility in dense product preview labels. General Sans or Inter can be substituted seamlessly if matching geometric proportion.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered through diffused atmospheric elevation rather than sharp drop shadows. The primary product card utilizes a multi-layered shadow (0 12px 32px -4px rgba(19, 102, 255, 0.08), 0 4px 12px rgba(13, 21, 39, 0.04)) creating weightless lift against the atmospheric blue haze.
IMAGERY
Avoid photographic stock entirely. Visuals consist solely of stylized UI components, vector analytics charts, and simplified wireframes rendered with high geometric precision. Icons are consistent 1.5px stroke weight outlines set in soft round containers.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric 'Before vs. After' transformation engine, where a flat, desaturated grey wireframe transitions via an arrow into a luminous cobalt-accented dashboard card beneath a soft radial light aura.
MUST
- Reserve #1366FF for the single core phrase in the display title and primary interactive triggers.
- Maintain high contrast between the #0D1527 text and the clean white background.
- Use 999px pill shapes strictly for metadata pills and contextual labels ('BEFORE PLOY').
- Keep wireframe mockups intentionally monochromatic to direct focus toward the active right card.
AVOID
- Do not fill the entire background with solid blue; rely on atmospheric peripheral gradients.
- Do not mix rounded button radii; stay strictly with 10px for standard rect actions.
- Do not add vivid multi-colored accents to the 'Before' mockup state.
- Do not use heavy, dark drop shadows; stick to soft translucent ambient shadows.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
