Design a dark-mode website section: deep void telemetry channeling raw multi-channel commerce streams into a single crystalline beacon of predictive intelligence.
LAYOUT
The layout features a fixed or sticky top navigation spanning 1280px with logo left, four utility links center, and secondary action right. The hero splits horizontally into a left-side typographical block occupying 50% width and a right-side graphic engine occupying 50%. On the right, twelve node tags are arranged into two tidy vertical columns flanking the central luminous emitter.
PALETTE (use these exact hex values)
- #040711 — Void Abyss: Root background canvas providing high-contrast depth for radiant lighting effects
- #0C1220 — Translucent Shroud: Background fill for data pill badges and navigation interactive targets
- #4361EE — Cobalt Action: Primary conversion button fill and central brand mark emblem tint
- linear-gradient(90deg, #3B82F6 0%, #8B5CF6 60%, #D946EF 100%) — Prism Gradient: Hero headline accent emphasis and volumetric particle stream glow
- #38BDF8 — Cyan Spark: High-energy particle threads channeling input signals toward the central prism
- #FFFFFF — Pure Stark: Display headline primary line, logo text, and primary action labels
- #8F9CAE — Slate Muted: Descriptive body copy, navigation links, and connector pill label text
- #1E293B — Ghost Stroke: 1px hairline borders for badges, secondary button, and input/output nodes
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Satoshi), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 20px heading, 54px display. Tracking -0.02em at display, 0 at body. The typographic tone is precision-engineered, modern, and restrained, relying on Plus Jakarta Sans or Inter to convey scientific authority without sterility. Tight negative tracking (-0.03em) on the 54px display heading establishes a confident enterprise posture. Generous line-height in the subhead balances technical density with effortless legibility.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely optically through bioluminescent emission and radial falloff rather than structural drop shadows. Ambient light radiates from the central crystal core, scattering into fine particles that illuminate the dark obsidian floor mesh. Foreground pills float on a plane defined solely by translucent fills and crisp 1px strokes.
IMAGERY
The visual centerpiece is a hyper-detailed 3D crystalline prism rendering that refracts cobalt and violet internal light. Vertical fiber-optic plumes fan outward in fine cyan and purple dust particles, conveying massive processing bandwidth. Ground planes feature sparse wireframe particle topography; human photography or traditional UI screenshots are strictly absent.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the glowing multi-faceted crystal prism channeling delicate circuit connector traces into an upward burst of dual-color fiber-optic particles. It visually translates messy fragmented SaaS inputs (left) into clean business telemetry outputs (right). Misuse occurs when this metaphor is flattened into generic 2D iconography or surrounded by messy, unaligned connector noodles.
MUST
- Anchor data source badges strictly along clean vertical columns flanking the central illustration.
- Restrict bright saturated colors exclusively to light emission, fiber streams, and the headline emphasis.
- Keep node badges compact with precise 8px border-radii and 1px low-contrast strokes.
- Ensure the display headline breaks across exactly two balanced lines with the second line receiving the gradient.
AVOID
- Never introduce opaque solid card containers or wide drop shadows beneath data tags.
- Do not apply rainbow or multi-color gradients to interactive buttons; buttons remain solid cobalt (#4361EE).
- Never clutter the particle plume with photographic overlays or non-abstract graphics.
- Do not increase the node tag font size above 12px or make the stroke heavier than 1px.
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 中尝试 
