Design a dark-mode abstract background artwork: deep galactic void meets sharp technical typography and neon orbit callouts.
LAYOUT
The header spans full-width with a minimal 3-bar logo on the far left, centered navigation links, and a pill sign-in button anchored right. The hero divides asymmetrically: left 45% hosts the text lockup, primary CTA, and secondary link, while the right 55% showcases the vast accretion disk. Anchoring the bottom is an equidistant 4-column metric bar separated by hair-thin vertical rules.
PALETTE (use these exact hex values)
- #03050c — Void Deep: Deepest canvas background framing the entire viewport
- #080c18 — Void Tint: Subtle container and pill background fill
- #d4ff00 — Electric Chartreuse: Hero headline accent word, primary CTA button fill, and active nav highlight
- #2be3c6 — Cosmic Cyan: Secondary callout markers, ingestion labels, and subtle pill borders
- #ffb82e — Solar Gold: Accretion core illumination and data provenance markers
- #f43f8e — Nebula Magenta: Semantics telemetry pointers and particle glow
- #ffffff — Pure White: Main headline text and metric values
- #8c9bb0 — Muted Starlight: Secondary description copy, nav links, and stat captions
TYPOGRAPHY
Typeface JetBrains Mono (or Space Mono, Fira Code, Roboto Mono), weights 400/500/700. Sizes 10px caption, 12px body-sm, 14px body, 15px subheading, 28px heading, 64px display. Tracking -0.03em on display, 0.12em on micro-caps. The typographical voice is that of an advanced deep-space computational terminal—precise, authoritative, and scientific. Monospace styling applied to primary headers brings a developer-native, high-tech ethos that feels deliberate and mathematical. JetBrains Mono or Space Mono are critical to reproduce this specific engineering aesthetic.
GEOMETRY & SPACING
Corner radii — cards 8px, links 999px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, airy density.
DEPTH
Depth is created entirely through optical atmospheric illumination rather than CSS drop shadows. A multi-layered luminous particle galaxy shines through a void background, while razor-thin 1px borders and transparent overlays float crisp content planes above the nebular glow.
IMAGERY
The visual focal point is a hyper-detailed, photorealistic cosmic vortex composed of millions of fine glowing dust particles transitioning from fiery yellow to jade teal, emerald, and hot pink. Vector schematic overlays—fine lines, diamond targets, and stippled dot grids—frame the cosmic visual as an analyzed telemetry system. Abstract stock photos or conventional UI screenshots are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an hyper-luminous cosmic particle accretion disk with ultra-precise thin-line telemetry callouts (diamond pins, hairline elbows, micro-labels) directly annotating physical points in space. It transforms an abstract cosmic background into an interactive knowledge topology; removing the callouts degrades it to generic sci-fi wallpaper.
MUST
- Reserve vibrant chartreuse (#d4ff00) for the single key actionable element and hero emphasis word.
- Use strict monospace or tech-sans for numeric telemetry and data metrics.
- Render spatial pointer lines with ultra-fine 1px strokes and geometric diamond markers.
- Position the 3D spiral particle accretion visual strictly in the right 60% viewport.
AVOID
- Do not use heavy drop shadows or skeumorphic bevels on interface cards.
- Never replace monospace headline punctuation or terminal periods with sans-serif variants.
- Avoid solid container card backgrounds that occlude the galactic particle fields.
- Do not use pastel or low-saturation earthy tones anywhere in accents or data viz.
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. Try in DraPub