Design a light-mode website section: monochrome friction exploding into high-velocity chromatic relief across crisp modern surfaces.
LAYOUT
The hero section is organized as an asymmetrical two-column layout on an eight-column invisible grid. The left column (approx. 45% width) holds the kicker pill, bold headline, lead copy, dual CTA group, trust ticks, and enterprise social proof card. The right column (approx. 55% width) hosts the side-by-side comparative UI showcase suspended in the chromatic particle explosion, supported below by a horizontal quartet of compact metric cards.
PALETTE (use these exact hex values)
- #fbfbfe — Canvas Ground: Global page background providing light, airy contrast
- #ffffff — Card Surface Clean: Primary light card surfaces and secondary button fills
- #15181e — Dark Friction Base: The 'Before' card canvas illustrating manual, painful workflow
- #0f172a — Deep Charcoal Ink: Primary heading typography, logos, and high-emphasis labels
- #64748b — Muted Slate: Body paragraphs, metadata, micro-copy, and feature checklist items
- #2563eb — Brand Cobalt Blue: Primary CTA button fill, link highlights, and chart accents
- #7c3aed — Electric Violet: Gradient destination, tag highlights, and metric icon accents
- #06b6d4 — Success Cyan Green: Micro metric highlight and checkmark ring details
- #f1f1fc — Subtle Pill Tint: Background tint for pill badges and inactive status chips
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,SF Pro Display,General Sans), weights 400/500/600/700/800. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 54px display. Tracking -0.03em at display, -0.01em at body. Bold, authoritative, yet approachable tech-native voice driven by a modern grotesque sans-serif. The high-contrast letterforms at large scale convey decisive execution, while balanced neutral proportions in body text ensure maximum legibility. Inter Display or Plus Jakarta Sans represent accurate free Google Font equivalents for this aesthetic.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 12px, buttons 12px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created primarily through atmospheric particle blast effects and subtle diffused drop shadows (0 20px 40px rgba(0,0,0,0.06)). Elements appear to float cleanly above an off-white canvas without aggressive dark drop shadows. The before/after cards use layering and contrasting background luminosity to establish visual hierarchy.
IMAGERY
Features high-energy, hyper-detailed chromatic dust/powder dispersion bursting from the transition between the dark 'Before' card and the glowing white 'After' card. The dust shifts dynamically from black/gray smoke into cyan, cobalt, and magenta specks. Stock photography and flat vector illustrations are avoided in favor of this kinetic, transformative physical metaphor.
SIGNATURE DETAIL — the thing that makes this design itself
The explosive chromatic powder dissolution bridging a matte charcoal 'Before' card to a luminous white 'After' card. To execute it faithfully, render the left workflow card in dark charcoal and disintegrate its outer boundary into vibrant magenta, cobalt, and cyan micro-particles surrounding the target card. It is ruined if treated as a generic flat background gradient instead of an active particulate explosion.
MUST
- Use deep dark cards exclusively to signify friction, delay, or manual work in comparative layouts.
- Apply the gradient headline treatment solely on the core transformational phrase (e.g., 'everything your team ships').
- Keep container radius consistently rounded between 20px and 28px for modern approachable warmth.
- Pair heavy display typography with ample negative canvas space around primary callouts.
AVOID
- Do not tint the entire canvas dark; the visual power relies on light-to-dark contrast against white.
- Never use sharp 0px or 4px boxy corners on core container cards or hero elements.
- Avoid solid flat colors for primary hero impact; use the dynamic blue-to-violet linear gradient.
- Do not clutter the before/after cards with more than 5 list rows per column.
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. 在 DraPub 中尝试 
