Design a dark-mode abstract background artwork: deep-space telemetry meets kinetic electric intelligence across an undulating particle horizon.
LAYOUT
The page adheres to a structured, left-heavy asymmetrical rhythm overlaying a continuous wide canvas. The hero display copy, subtext, CTA cluster, and numerical statistics stack in an orderly column within the left 55% of the viewport, leaving the right side open for the sweeping energy trail. The composition concludes along the lower third with an evenly distributed four-column card row that bridges the entire container width.
PALETTE (use these exact hex values)
- #03070C — Abyssal Void: Deepest canvas background framing the hero imagery and content viewport
- #D8FF3E — Electric Lime: Primary interactive accent used for key buttons, focal points, and highlight arrows
- #00F0D0 — Hyper Cyan: Energy particle trail highlight and secondary iconography tint
- #FFFFFF — Pure White: Used for main display headline text, bold card headings, and key metric numerals
- #8C9EA8 — Muted Spec: Monospace body paragraphs, metric captions, inactive navigation links, and micro-labels
- #0A1102 — On-Accent Charcoal: Text and icon color layered directly over the electric lime button backgrounds
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Satoshi), weights 400/500/600. Sizes 12px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 68px display. Tracking -0.03em at display, -0.01em at headings. The typographical tone merges cutting-edge academic precision with deep tech engineering. Pairing a humanist geometric sans for monumental titles with an unadorned, calibrated monospace for metadata conveys calculation, progress, and algorithmic rigor. Readily accessible alternatives include Inter or Plus Jakarta Sans paired with Space Mono or JetBrains Mono.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical luminosity, backdrops, and atmospheric layering rather than drop shadows. The background acts as deep space, layered with semi-transparent dust and glowing particle streams, while interactive cards float above using glassmorphic backdrop-blur(16px) and delicate 1px cyan highlights. Buttons emit diffuse colored photonic halos rather than casting traditional structural drop shadows.
IMAGERY
The imagery language centers on high-definition generative astrophotography, computational particle dynamics, and cosmic phenomena (such as solar coronas, planetary eclipses, and luminescent nebula ribbons). Avoid corporate vector illustrations, stock photography of humans at desks, or flat cartoon art styles.
SIGNATURE DETAIL — the thing that makes this design itself
The undulating dual-tone particle ribbon connecting an electric cyan trail to a searing chartreuse solar flare. It guides the eye diagonally across the interface, acting as both an environmental backdrop and a dynamic visual metaphor for continuous learning trajectory. Misusing it as a flat decorative gradient without point-cloud particle density instantly degrades the sci-fi telemetry aesthetic.
MUST
- Retain the high-contrast tension between the pitch-black canvas and the saturated chartreuse/cyan vector elements.
- Strictly format all explanatory and subtext paragraphs in clean, readable monospace.
- Give the primary CTA button an ambient outer box-shadow in #D8FF3E with low opacity (0.35) and 24px spread.
- Keep feature card surfaces semi-transparent so the underlying particle beam naturally bleeds through.
AVOID
- Do not add solid, opaque gray or white card backgrounds that break the immersive cosmos illusion.
- Do not use saturated reds, warm purples, or orange accents; they clash with the cyan-chartreuse spectrum.
- Avoid standard sans-serif for the subheadings and body copy; monospace is critical to the tech feel.
- Never make cards fully sharp (0px radius) or pill-shaped; stick consistently to 14-16px curvature.
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