Design a dark-mode website section: deep darkness illuminated by vertical auroral streams, focusing complex telemetry into sharp kinetic clarity.
LAYOUT
The viewport uses a two-column 60/40 visual split over a 1360px container. The left column stacks metadata pill, display headline, body narrative, and dual CTA buttons with consistent 20px-24px vertical rhythms. The right column centers an intelligence graph comprised of an 88px glowing core connected via angled vectors to five surrounding glass cards. The page terminates at the bottom with the rounded crest of a stark white transition sheet.
PALETTE (use these exact hex values)
- #060d13 — Abyssal Slate: Deep background surface underpinning the entire hero viewport
- #d4f040 — Electric Chartreuse: Primary interactive fill, display title emphasis, and active indicator dot
- #27c4b5 — Cyan Aurora: Atmospheric streak highlights and dynamic energy glow in backdrop art
- #ffffff — Pure White: Primary headline text, top navigation active state, and inverted button text
- #9ab3bd — Muted Cyan Text: Hero body copy and inactive top navigation link labels
- #ffffff — Light Sheet Surface: Secondary bottom incoming container surface contrasting the dark hero
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 56px display. Tracking -0.03em on display, 0.08em on uppercase labels. The voice is authoritative, modern, and clinical, delivered via a razor-sharp neo-grotesque sans-serif. The high-contrast pairing of tight negative tracking on massive display sizes with spaced uppercase utility labels communicates enterprise rigor and technological edge. Inter Display or Plus Jakarta Sans are optimal open-source replacements.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered entirely through layered optical luminosity rather than traditional drop shadows. Translucent dark cards (#0e1a22cc) with backdrop-blur sit above bright vertical fiber-optic streaks, separated by fine 1px semi-reflective borders. The central node achieves maximum elevation through an intense radial lime halo that casts light onto intersecting connector lines.
IMAGERY
The imagery features an abstract computational vertical light curtain of shimmering lime, turquoise, and yellow particle threads streaming upward against total darkness. It communicates high-speed data synthesis and intelligence extraction without showing literal charts or stock photos. Avoid flat vector illustrations, corporate photography, or horizontal wave patterns.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the vertical aurora fiber-optic data curtain on the right paired with the radiating starburst node that mechanically wires to floating telemetry badges. To execute it correctly, ensure the ambient rays remain vertical and columnar while the network cards stay strictly outside the headline's reading path. Misusing this by scattering glow blobs uniformly across the background destroys the directional speed and legibility.
MUST
- Use lime text (#d4f040) strictly for key value proposition words, keeping the rest clean white.
- Maintain high contrast by ensuring hero cards sit on semi-transparent dark glass over vertical light rays.
- Keep connector lines thin (1px) with slight luminous color matching the central sunburst mark.
- Use uppercase tracking (0.08em to 0.12em) for eyebrow text and pill metadata labels.
AVOID
- Do not tint the entire headline in lime; only emphasize 2 to 4 core words.
- Do not use opaque solid backgrounds for the floating node cards; blur and translucency are essential.
- Do not allow light rays to bleed underneath the primary headline copy, obscuring legibility.
- Do not drop heavy, dark drop-shadows on floating cards; rely on luminous borders and soft glow.
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 中尝试 
