Design a dark-mode abstract background artwork: deep void minimalism illuminated by pointillist orbital flares and hyper-saturated chromatic gradients.
LAYOUT
The header spans the full width with navigation items pushed rightward. The main hero viewport is split into an asymmetrical grid: a left-aligned 45% textual and telemetry column, and a 55% right-aligned artwork zone. The left column stacks systematically from eyebrow kicker, to a 3-line display headline, explanatory paragraph, dual CTA buttons, and finally a three-column telemetry metric block separated by fine vertical rules.
PALETTE (use these exact hex values)
- #060913 — Deep Void: Dominant background canvas across the entire viewport.
- #f43f5e — Solar Coral: Warm anchor of the primary gradient button, headline accent, and status indicators.
- #06b6d4 — Ion Cyan: Cool trailing edge of the primary gradient button and astral halo glow.
- #a855f7 — Nebula Violet: Intermediate chromatic bridge between coral and cyan in the celestial cloud illustration.
- #ffffff — Starlight White: Primary headline phrases, metric values, and primary active navigation labels.
- #94a3b8 — Orbital Mist: Subhead body copy, unselected navigation links, and descriptive sub-labels.
- #475569 — Cosmic Dust: Kicker micro-labels, hairline stat dividers, and subtle pill outlines.
- linear-gradient(90deg, #f43f5e 0%, #06b6d4 100%) — Prismatic Engine: Primary CTA background fill and gradient text highlight.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist, SF Pro Display), weights 300/400/500. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 56px display. Tracking -0.03em at display, 0.08em at kicker. The voice is analytical, precise, and forward-looking, reminiscent of high-end aerospace interfaces or cutting-edge developer infrastructure. Plus Jakarta Sans or Inter at light (300) weight gives the text an architectural clarity that prevents large-scale headlines from overpowering the delicate celestial backdrop. Wide-tracked uppercase captions reinforce the feeling of precision engineering.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 112px between sections, 1360px container, airy density.
DEPTH
Depth is created entirely via optical emission against an abyss, not drop shadows or skeuomorphic bevels. Light emerges from within the pointillist dithered celestial body and radiates into the #060913 canvas, causing text layered near it to feel backlit. Interactive buttons achieve contrast purely through chromatic saturation against the pitch-black background.
IMAGERY
The imagery language is centered on granular, high-precision pointillist and dithered astrophotography. A giant planetary limb emerges with solar flares, cosmic dust, and light streaks rendered in discrete cyan, magenta, and red dots like an astronomical sensor reading. Photographic stock or soft blurred vector blobs would severely degrade this technical aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The defining hallmark is the fusion of a dithered/halftone pointillist planetary flare with light-weight triple-line display typography ending in an identical chromatic gradient. Without the halftone cosmic particle illustration and its matching coral-to-cyan text transition, the design collapses into a standard developer-tool dark theme.
MUST
- Keep typography weights light (300-400) to balance the high-density cosmic artwork.
- Restrict vibrant color to the celestial graphic and selected headline/button gradients.
- Maintain strict vertical column alignment across the left content module.
- Use 1px delicate outlines for dividers and interactive pill borders.
AVOID
- Do not use heavy bold fonts (>600) on headlines; it breaks the ethereal space mood.
- Do not add heavy drop shadows; depth is achieved strictly through cosmic luminance.
- Do not allow the background artwork to encroach onto left-hand body text readability.
- Do not use flat, solid vibrant buttons that compete with the gradient CTA.
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 中尝试