Design a light-mode website section: weightless glass surfaces adrift in glowing periwinkle particle swirls and structured enterprise typography.
LAYOUT
The page adheres to a crisp 1240px container anchored at the top by a balanced three-part header. The hero unfolds in an asymmetrical two-column split: 52% allocated to headline copy, pill badges, and dual CTAs on the left, and 48% reserved for the dynamic floating 3D glass card. The composition concludes with a strictly symmetrical 4-column horizontal stat tier spaced 64px below the main fold.
PALETTE (use these exact hex values)
- #F8F9FE — Canvas Ground: ambient background tint providing a luminous cool white atmosphere across the hero
- #131938 — Primary Ink: high-contrast midnight tone for primary headlines, logos, and critical statistics
- #5B627E — Muted Slate: soft neutral used for body copy, navigational links, and supplementary metadata labels
- #345DED — Electric Indigo: core actionable accent applied to primary CTA buttons, active badges, and logo glyphs
- #8561F6 — Spectral Amethyst: secondary terminus for the hero text gradient and luminous ethereal particle trails
- #D9DFEC — Outline Subtle: crisp structural hairline boundary on secondary buttons, pill badges, and input dividers
- #D7F4EB — Mint Tint: background fill for the efficiency metric icon tile representing planning speed
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 28px heading, 56px display. Tracking -0.03em at display, -0.01em at body. The typography speaks with authoritative Silicon Valley clarity through clean geometric neo-grotesque forms. The tight letter-spacing (-0.035em) on display sizes ensures headlines feel punchy and compact, countering the airy canvas. Plus Jakarta Sans or Inter are the designated choices for their tall x-height and clinical readability in technical SaaS contexts.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, airy density.
DEPTH
Elevation is achieved through light dispersion rather than dark shading. The central preview card floats via a multi-layered, ultra-soft shadow cast in periwinkle (0 24px 48px rgba(58, 99, 243, 0.12)) supplemented by an inner 1px specular highlight. Surrounding particle effects and diffuse radial gradients simulate an illuminated volumetric backdrop.
IMAGERY
Imagery relies entirely on abstract, synthetic 3D rendering of particle vortexes, luminous stardust, and translucent glass panels. Light flows clockwise in electric cyan and lilac ribbons. Stock photography, literal screenshots with raw OS borders, or flat 2D editorial illustrations are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the dual-tone hero headline directly entering into an angled frosted-glass card encircled by a swirling luminous particle vortex. This visual bridge fuses solid corporate confidence on the left with ethereal, futuristic AI automation on the right. Misusing it by stripping the glassmorphism or flattening the particle ribbon into a 2D vector destroys the core identity.
MUST
- Keep the first line of the display headline dark solid navy before transitioning into the color gradient.
- Render the main 3D product card with frosted translucency (backdrop-filter: blur(20px)) and a soft white highlight rim.
- Use pill borders (999px) strictly for badges and status tags, while reserving 10px rounding for CTA buttons.
- Isolate the kinetic swirl graphic to the right visual hemisphere so left-column text remains instantly legible.
AVOID
- Never make primary CTA buttons fully pill-shaped; keep button corners consistently clamped at 10px.
- Do not apply heavy dark drop shadows; all elevation must be diffuse, luminous, and colored.
- Avoid applying gradient text treatment across the entire display headline—only accent the second clause.
- Never replace the custom particle-ribbon visual with standard flat vector shapes or realistic photographic assets.
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 中尝试 
