Design a light-mode website section: clinical light-mode precision colliding with an ethereal vortex of floating frosted glass panels and luminous cyan particle streams.
LAYOUT
The hero uses an asymmetrical two-column desktop arrangement inside a 1340px wrapper. The left column (roughly 45% width) holds a top pill badge, an oversized 4-line display headline, a brief lead paragraph, twin CTA buttons, and a bottom row of four inline stat callouts. The right column (55%) is dedicated entirely to an expansive visual composition of tilted, layered glass panels riding a glowing particle swirl.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Dominant background canvas across the left content column and global frame
- #f6f9fd — Ethereal Mist: Subtle surface tint behind floating glass cards and pill badges
- #1a6aff — Electric Cobalt: Primary action buttons, prominent keyword text highlight, and active search controls
- #0a0f1d — Deep Obsidian: Main display headline, section titles, key metric numbers, and navbar brand
- #5d6b82 — Slate Dust: Descriptive body copy, sub-captions, metric descriptions, and secondary menu items
- #00d2ff — Luminous Cyan: Glowing particle vortex streaks, edge reflections, and glass panel rims
- #10b981 — Active Emerald: Pill indicator badge dot, success rate meters, and verification badges
- #e2e8f0 — Frosted Border: Hairline boundary on secondary buttons, tag chips, and translucent cards
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Public Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 32px heading, 60px display. Tracking -0.035em at display, -0.01em at body. Plus Jakarta Sans conveys engineered authority without cold brutality; its round geometric counters feel modern and technological while maintaining supreme tabular readability in mini data cards. Free alternatives like Inter or DM Sans maintain identical structural hierarchy and high x-height clarity.
GEOMETRY & SPACING
Corner radii — cards 18px, links 6px, inputs 10px, buttons 12px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1340px container, comfortable density.
DEPTH
Depth is created through layered spatial planes rather than dense drop shadows. Frosted glass panels use backdrop-blur(18px) with hairline edges (rgba(255, 255, 255, 0.8)) and faint diffuse shadows (0 16px 36px rgba(10, 25, 60, 0.06)) floating forward from the background vortex.
IMAGERY
The imagery language centers on high-fidelity 3D generative data streams: swirling millions of cyan and blue particulate fibers twisting dynamically through space. Suspended within this slipstream are frosted glass application panels displaying real tabular queries and charts, conveying speed, precision, and verification.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of frosted glassmorphic UI cards suspended in dynamic perspective over an electric cyan particle spiral vortex. It transforms dry enterprise data-verification UI into an exhilarating physical current of real-time intelligence. It is misused if cards become fully opaque white or if the vortex lacks delicate microscopic light grain.
MUST
- Highlight precisely one focal keyword in display headlines using electric cobalt #1a6aff.
- Keep the left content column purely planar 2D and reserve 3D glass perspective strictly for right-side visual assets.
- Use 18px radius on floating glass cards with a delicate 1px translucent highlight border.
- Pair large bold metrics (32px) directly with minimal two-word captions (12px) in muted slate.
AVOID
- Do not place floating cards flat on the left column over standard copy blocks.
- Never use dark-mode card surfaces; the aesthetic relies entirely on high-key luminous translucency.
- Avoid solid heavy drop shadows; use diffused, low-opacity ambient occlusion under floating elements.
- Do not color entire sentences in blue; confine #1a6aff to atomic accents and primary buttons.
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 中尝试