Design a dark-mode website section: deep-space glassmorphism punctuated by fiber-optic luminance bridging autonomous agents to living human intellect.
LAYOUT
The header sits fixed at the top with a balanced tri-part layout: brand on the left, centered navigation, and right-aligned action. The hero area is an asymmetrical two-column grid where the left 45% houses the text stack (kicker, dual-line display heading, paragraph, button row, and metrics strip), while the right 55% hosts the deep 3D cybernetic illustration. The section resolves with a centered uppercase eyebrow and a three-column horizontal feature trust bar.
PALETTE (use these exact hex values)
- #07090E — Deep Space Canvas: Primary screen background absorbing light across the entire viewport canvas
- #1E293B — Subtle Glass Border: Hairline outlines for metric cards, pill badges, and secondary buttons
- linear-gradient(90deg, #4E65FF 0%, #E556DE 100%) — Agent Violet Pink Gradient: Focal accent used for primary CTA fill and headline highlight typography
- #38BDF8 — Expert Cyan Glow: Luminescent highlight for human expert glass pedestal and connecting data streams
- #22C55E — Active Node Green: Status indicator dot marking active network availability inside kicker pill
- #F8FAFC — Text Pure White: Headlines, major metrics, and active primary interactive elements
- #94A3B8 — Text Slate Muted: Body copy, navigation links, and descriptive sub-labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px heading, 60px display. Tracking -0.03em at display, 0 at body. The type selection (Inter match) conveys institutional engineering precision, modern developer tooling, and uncompromised clarity. Its neutral grotesque geometry prevents distraction from the vivid 3D illustration and glowing gradients. High tracking on small uppercase utility labels contrasts with tight negative tracking on the massive display heading to deliver authoritative technical confidence.
GEOMETRY & SPACING
Corner radii — cards 12px, links 999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through volumetric optical glows and luminous 3D renders rather than traditional drop shadows. Ambient light radiates from the isometric cubes and fiber-optic highway, casting diffuse purple and cyan glows onto the matte circuit board plane below. Interface components float at near-zero elevation using fine 1px translucent borders and glass backdrops.
IMAGERY
The visual hero features an elaborate 3D isometric render depicting a futuristic motherboard circuit. Two illuminated crystal cubes representing AI Agent and Human Expert are connected by sweeping, luminous optical data ribbons with floating glass metadata pills. Flat corporate photography, stock vectors, or non-technical imagery would entirely shatter the high-tech infrastructure aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-node isometric fiber optic pipeline: a dark purple AI cube transmitting luminous blue-magenta threads across a physical circuit board into an illuminated cyan human cube. This visual metaphor directly anchors the product thesis, bridging autonomous silicon workloads into authenticated human verification.
MUST
- Use pure white typography for first-level hierarchy against the dark #07090E canvas.
- Restrict the linear blue-to-pink gradient to the single primary CTA and key headline words.
- Keep borders hairline thin (1px) with high transparency to maintain refined glassmorphism.
- Use high-contrast bioluminescent cyan (#38BDF8) selectively for downstream expert actions.
AVOID
- Never introduce opaque light-colored card backgrounds that break the dark room immersion.
- Do not apply the multi-color gradient to body copy or secondary buttons.
- Avoid loud solid borders; keep boundary lines under 1px and semi-translucent.
- Do not place floating task pills without directly connecting them to the fiber-optic path.
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 中尝试 
