Design a dark-mode abstract background artwork: cosmic deep-space canvas mapped with neon point-cloud ribbons and glowing geometric celestial bodies.
LAYOUT
The page adheres to a 12-column asymmetric split grid within a 1360px container. The top 72px is reserved for a clean, horizontally distributed navigation header. The left 5-6 columns hold the primary content lockup: category eyebrow, 3-line display headline, body description, and dual CTAs; the right 6-7 columns are preserved for the cosmic volumetric visual that sweeps down beneath the copy. The bottom is pinned by a 4-column balanced capability row.
PALETTE (use these exact hex values)
- #030708 — Void Black: Primary surface canvas framing cosmic particle depths and UI overlays
- #DDF844 — Luminous Lime: Primary brand accent for conversion button, active navigation states, and sphere radiance
- #00E5FF — Ion Cyan: Secondary accent used in particle wave undertones, celestial spheres, and dot badges
- #FFFFFF — Pure White: Primary headline typography and high-contrast navigational text
- #8E9BAE — Slate Ash: Secondary body text, inactive navigation links, and feature descriptions
- #081318 — Deep Space Tint: Subtle ambient backdrop shadows behind point clouds and translucent components
- #1E2C33 — Border Glow: Hairline structural strokes and ghost pill outlines
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, Geist Sans, Roboto), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 15px heading, 17px body-lg, 56px display. Tracking -0.03em for headlines, 0.15em for eybrow caps, 0 for body. The typographic tone is architectural, rational, and technologically sophisticated. Inter Display or a crisp modern geometric sans provides zero-friction legibility, while wide-tracked micro uppercase captions evoke precision telemetry and AI research infrastructure.
GEOMETRY & SPACING
Corner radii — cards 12px, links 2px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 120px between sections, 1360px container, airy density.
DEPTH
Elevation is achieved entirely through chromatic optical depth, additive particle blending, and soft luminous glows rather than traditional drop shadows. Ambient light radiates from the main 3D sphere (#DDF844) onto underlying sweeping particle waves, creating a three-dimensional z-plane illusion against absolute void black (#030708).
IMAGERY
The imagery is purely generative and volumetric: dense 3D point-cloud data waves, wireframe geodesic spheres, and floating planetary orbs rendered in high-contrast neon chartreuse and cyan. Real-world photographs, human figures, or flat cartoon illustrations are completely forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The defining visual signature is the colossal, textured point-cloud sphere intersecting luminous wave ribbons rendered in chartreuse and cyan against a pitch-black abyss. To use it correctly, let the graphic trail subtly behind and below the bottom edge of left-aligned text without competing with typography contrast. It is ruined when turned into a low-resolution raster graphic or when overlaid with dense, boxed UI cards.
MUST
- Anchor headline text strictly to the left half of the layout, allowing particle visuals room to breathe on the right.
- Use solid #DDF844 lime sparingly for high-intent interactive buttons and active states to preserve contrast impact.
- Pair lime highlights with deep electric cyan (#00E5FF) within 3D graphics to create natural chromatic depth.
- Keep typography ultra-clean with geometric sans-serifs, avoiding heavy serif or ornate script styles entirely.
AVOID
- Never place white card containers or solid opaque rectangular backgrounds behind text over the artwork.
- Avoid warm colors like reds, purples, or oranges which clash with the electric lime-cyan palette.
- Do not center-align the hero text lockup; asymmetry is required to balance the dynamic right-hand visual mass.
- Do not drop shadows with harsh black blurs; use colored ambient atmospheric radiance instead.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3408:2416. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试