Design a dark-mode abstract background artwork: deep void illuminated by swirling pointcloud galaxies, iridescent pastels, and technical telemetry annotations.
LAYOUT
The viewport is organized into a two-column 60/40 hero section with a fixed top navbar and an anchored bottom dock. The left column stacks a large 3-line headline, supportive body paragraph, CTA button pair, and social proof avatar stack. The right hemisphere is dominated by the angled particle galaxy vortex with floating HUD telemetry callouts. A 4-column glass dock sits pinned along the lower margin spanning the container width.
PALETTE (use these exact hex values)
- #060814 — Cosmic Void: Deep navy-black primary canvas background behind particle fields and UI elements
- #0d1326 — Starlight Glass: Semi-transparent backdrop fill for bottom dock and secondary pill containers
- #7ce0d3 — Luminous Teal: Primary CTA gradient start, active telemetry pings, and icon glow highlights
- #c084fc — Aurora Violet: Primary CTA gradient stop, text iridescent shimmer, and particle spiral tone
- #fed7aa — Core Amber: Central galactic core glow and warm text highlight on hero heading
- #ffffff — Pure Starlight: Main headline text, prominent button text, and active interface labels
- #94a3b8 — Nebula Muted: Body copy, secondary navigation links, and telemetry body parameters
- #2a3656 — Hairline Rim: Translucent stroke along pill buttons and footer feature dock container
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,SF Pro Display,Geist), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 15px body, 18px subheading, 54px display. Tracking -0.03em at display, 0.01em at body. The typographic tone balances developer precision with high-tier consumer polish. Inter Display provides clean, confident geometric legibility with closed apertures and compact tracking, while JetBrains Mono injects genuine developer telemetry aesthetics. Suitable free substitutes include Plus Jakarta Sans and Fira Code.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through atmospheric luminesce and backdrop diffusion rather than drop shadows. Bright particle light radiates from the galaxy's core behind floating UI elements, while foreground containers use glassmorphism (backdrop-filter: blur(20px)) with fine 1px rim strokes at rgba(255,255,255,0.1) to separate from the deep space void.
IMAGERY
The imagery consists of a photorealistic 3D pointcloud simulation of an elliptical spiral galaxy composed of millions of microscopic cyan, magenta, and amber light specks. It conveys technical precision, astronomy, and computational power. Flat vector illustrations, stock photography of humans, or generic isometric cubes would look completely out of place.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-tone iridescent pill CTA (gradient from #7ce0d3 teal to #c084fc violet) paired seamlessly with an intricate 3D particle accretion disc and monospaced HUD coordinate lines. To use it correctly, let the particle glow bleed subtly under the edges of glass UI surfaces. It is misused when gradients become muddy, saturated neons or when particle fields obscure text readability.
MUST
- Keep CTA buttons and badge containers strictly pill-shaped with 9999px border-radius.
- Use pastel gradient text fills exclusively on selected words of the hero headline to signify cosmic light.
- Render technical HUD annotations in monospace type with leading forward slashes and exact millisecond values.
- Confine the intense particle vortex illustration to the right hemisphere to maintain 60-70% contrast behind text.
AVOID
- Do not use rectangular buttons with sharp 0px or small 4px corner radii.
- Do not place dense particle clusters directly behind the main hero headline text.
- Do not use solid opaque black (#000000); use deep blue-tinted void tones (#060814).
- Do not use saturated neons; keep accent colors within luminous pastel palettes (#7ce0d3, #c084fc).
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 中尝试