Design a dark-mode abstract background artwork: cosmic particle streams spiraling into a deep data horizon across an obsidian canvas.
LAYOUT
The layout is an asymmetric two-column split across a 1360px container. The left 45% hosts the narrative hierarchy: global brand mark, massive two-line headline, narrative paragraph, CTA action cluster, and four-column telemetry data strip. The right 55% is fully surrendered to the hyper-dense particle vortex, which organically bleeds across the center gutter.
PALETTE (use these exact hex values)
- #020b18 — Void Black: Primary page background canvas representing deep computational space
- #3de5e3 — Cyan Spark: Primary button fill, vortex base tone, and primary metric value highlight
- #ff9f38 — Solar Flare: Gradient start for text punchline and top vortex energetic boundary
- #ff2b75 — Hyper Magenta: Gradient end on headline emphasis and ingested data metric counter
- #3ae38c — Aurora Emerald: Bottom-right particle tail drift and efficiency metric counter
- linear-gradient(135deg, #ff9f38 0%, #ff2b75 100%) — Impact Gradient: Inline text fill on the word 'impact.' in the main display title
- #f5f9fc — Starlight White: Primary headline text, active labels, and metric numerical figures
- #7992a8 — Subtle Nebular: Paragraph description, navigation links, and telemetry metric sublabels
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600. Sizes 12px caption, 14px body-sm, 16px body, 22px subheading, 28px heading, 72px display. Tracking -0.035em on display, -0.01em on body. The typography is disciplined, precise, and deeply modern. It pairs the clinical neutrality of a neo-grotesque (Inter or Geist) with tight display tracking to balance the chaotic energy of the generative artwork. The font must remain unadorned, allowing the gradient-masked punchline to deliver the sole emotional crescendo.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 8px unit, 24px gaps, 120px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered entirely through luminescence and atmospheric perspective rather than box shadows. Pure void black (#020b18) creates an infinite z-depth, over which glowing point-cloud meshes and radiant particle flares create volumetric space. UI elements float as crisp, planar foreground layers directly atop the optical field.
IMAGERY
Imagery is strictly abstract, generative, and mathematical: a swirling accretion disk composed of millions of color-mapped particles. A secondary subtle wireframe topographic particle mesh sits in the lower-left corner to balance the composition. Flat photographic imagery, stock human portraits, or standard 3D device mockups are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the dynamic chromatic particle vortex on the right mirroring and contrasting against the minimalist left-aligned telemetry stack. It converts an otherwise restrained developer-tooling UI into a high-energy cinematic experience. Misusing it means adding competing visual clutter or cluttering the vortex core with badges or cards.
MUST
- Reserve the linear gradient fill exclusively for the hero punchline 'impact.' to protect its focal punch.
- Use pill radius (9999px) on all interactive button components.
- Maintain strict left-alignment on text content across the left 45% of the viewport.
- Pair each telemetry stat with a unique monochrome or tinted micro-icon matching its semantic tone.
AVOID
- Do not apply heavy solid card backgrounds or borders that box in the metrics; keep them floating freely.
- Do not introduce sharp rectangular corners (0px to 8px) on button elements.
- Do not use warm colors (amber, red) for structural UI backgrounds; reserve them solely for energy accents.
- Never place heavy text directly over the core of the bright cyan particle vortex.
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