Design a dark-mode abstract background artwork: deep cosmic indigo illuminated by fluid neon gradients and particulate synthetic intelligence imagery.
LAYOUT
The interface is composed within a contained, rounded frame over dark space. A balanced horizontal header holds the brand mark on the far left, centered navigation links, and a top-right trial CTA. The main stage is split asymmetrically: a structured typography stack with CTAs and metrics anchors the left 45%, while a grand, luminous synthetic profile dominates the right 55%.
PALETTE (use these exact hex values)
- #06081B — Abyssal Navy: Root background canvas color providing high-contrast dark space.
- #0B102C — Midnight Slate: Subtle surface tint beneath glowing elements and structural containers.
- linear-gradient(90deg, #7047EB 0%, #E05688 50%, #EE7258 100%) — Neon Dawn Gradient: Primary interactive CTAs, branded logo glyphs, and emphasized headline typography.
- #7B61FF — Cyber Violet: Midway accent transition color for glow effects and typography gradient start.
- #F472B6 — Electric Coral: Gradient terminus used for high-energy glows, buttons, and text accents.
- #FFFFFF — Pure Starlight: Primary display text, button text, and high-priority titles.
- #8E9BB0 — Nebula Mist: Navigation links, body copy, and secondary meta details.
- #4D5A75 — Deep Subdued: Category trackers, subtle labels, and metric caption descriptors.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,Cabinet Grotesk,Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 60px display. Tracking -0.03em for display titles, +0.18em for uppercase tracking. Plus Jakarta Sans delivers a geometric, razor-sharp modern voice with generous aperture and pristine legibility at scale. Its tight display setting gives the main statement an authoritative, cinematic presence. For web builds, standard Inter or Cabinet Grotesk serve as zero-friction open-source replacements.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1360px container, airy density.
DEPTH
Elevation is achieved solely through emissive glow layers rather than structural drop shadows. Glowing background orbs, illuminated translucent particles, and high-exposure cyan-pink backlights separate UI foreground planes from the deep abyss beneath.
IMAGERY
Features a cinematic, hyper-detailed 3D synthetic humanoid profile intertwined with flowing translucent ribbon waves and sparkling constellation-like particle fields. Off-brand imagery would include literal flat vector illustrations, raw photography of office workers, or saturated cartoonish graphics.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone text gradient transition on the hero kicker ('Futures unlocked.') matching the exact radiant hue of the sweeping synthetic ribbons behind it. It visually links human language directly into the machine nebula. Misusing it across multiple lines or paragraphs dissolves the hierarchy and cheapens the glow.
MUST
- Keep backgrounds deep and near-black (#06081B) to preserve the luminescent dynamic range.
- Apply the vibrant gradient (#7B61FF to #F472B6) sparingly to single headline phrases and primary CTAs.
- Use 999px pill radii for all primary buttons to echo fluid organic lines.
- Anchor text content strictly to the left half, giving generative visuals space to breathe on the right.
AVOID
- Do not use boxy, 0px-radius cards or sharp-edged rectangular buttons anywhere.
- Do not apply solid flat bright backgrounds; light canvases completely destroy the ethereal glow motif.
- Never fill entire paragraphs with multi-stop color gradients; reserve them strictly for focal display text.
- Do not center-align the hero text lockup; it clashes directly with the right-hand artwork focal point.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3424:2416. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub