Design a dark-mode website section: deep space canvas sculpted by violet and electric cyan luminescence, turning candidate noise into crystalline order.
LAYOUT
The header spans the full width with navigation grouped centrally and auth actions pinned right. The hero divides into an asymmetrical two-column composition: left column (approx. 45% width) holds badge, two-line headline, description, dual buttons, and metric stat; right column (55%) showcases the funnel illustration with right-anchored pointer cards. A centered micro-headline sits above the bottom viewport edge to lead into client logos.
PALETTE (use these exact hex values)
- #06080F — Obsidian Base: Deepest canvas background providing absolute contrast for glowing light effects
- linear-gradient(90deg, #BA43F6 0%, #2968FF 100%) — Primary Gradient Fill: High-intent primary action buttons and prominent brand accents
- #4FA7FF — Cyan Glow Accent: Particle nodes, start of text gradient, and volumetric lighting center
- #E25CEB — Magenta Violet Accent: End of text gradient, rim lighting on funnel metal, and button hues
- #34D399 — Live Status Mint: Active indicator dot and metric trend icon ring fill
- #FFFFFF — Text Stark White: Primary headings, active link labels, and high-emphasis data points
- #94A3B8 — Text Slate Muted: Body copy, inactive nav links, and secondary metric descriptions
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Montserrat), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 56px display. Tracking -0.03em at display, 0.08em at micro uppercase. The typography relies on a clean, modern neo-grotesque sans-serif with geometric roundness (similar to Plus Jakarta Sans). It communicates enterprise authority, speed, and algorithmic precision. Generous tracking on uppercase metadata counterbalances the tight, impactful headline display.
GEOMETRY & SPACING
Corner radii — cards 10px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered entirely through luminescence rather than drop shadows. Bright cyan and magenta directional light catches the metallic edges of the funnel and pedestals, while a low-frequency radial indigo pool isolates the hardware from the pitch-black void.
IMAGERY
Features a photorealistic, dark-metallic 3D funnel with precision-machined stepped base rings, illuminated by violet and teal rim lights. A galaxy of blue glowing candidate avatars is sucked into the vortex, outputting three polished blue candidate cubes. Any flat illustrations or warm-toned photography would immediately destroy the premium cyber-industrial feel.
SIGNATURE DETAIL — the thing that makes this design itself
The luminescent 3D metallic funnel funneling a cloud of avatar particles into crystal talent cubes, accented by the two-tone white-to-magenta gradient headline.
MUST
- Keep background canvas pitch black (#06080F) so volumetric lighting shines with maximum vibrancy.
- Restrict the cyan-to-magenta gradient exclusively to the secondary headline line and primary CTA button.
- Use 1px borders with low-opacity white (10-15%) on all dark floating cards and ghost buttons.
- Pair each diagram callout box with a fine 1px dashed leader line ending in a ring node.
AVOID
- Do not apply solid saturated backgrounds to callout cards; they must remain translucent glass.
- Do not use generic drop shadows; use color-tinted radial ambient light behind hardware elements.
- Do not mix serif or rounded casual typefaces into this crisp technical aesthetic.
- Do not place bright colored borders on cards; border opacity must never exceed 20% white.
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 中尝试 
