Design a dark-mode abstract background artwork: deep midnight canvas electrified by bioluminescent particle tides and ethereal human scale.
LAYOUT
The header spans the maximum container width with logo left, navigation links floating dead-center, and a pill CTA anchored far right. The body splits into an asymmetric two-column composition: the left 45% accommodates the vertical stack of eyebrow, title, body, dual CTAs, and a 3-column metric bar. The right 55% bleeds edge-to-edge with the high-density cosmic illustration that fades seamlessly into navy base color toward the left edge.
PALETTE (use these exact hex values)
- #040a16 — Abyssal Navy: dominant background canvas absorbing the left typography and framing the artwork
- #c6f5ec — Bioluminescent Mint: primary interactive CTA backgrounds and high-contrast callouts
- #f8fafc — Text Primary White: primary display headline, hero titles, and high-emphasis labels
- #8496ad — Cold Muted Slate: body description, nav items, and secondary metric labels
- #5ce1e6 — Cyan Spark: metric data highlight and logo starburst icon
- #ff7a70 — Solar Coral: secondary metric percentage highlight offering warm contrast
- #1a293e — Subtle Meridian: vertical dividers separating metric blocks in the footer row
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist, SF Pro Display), weights 400/500/600. Sizes 12px caption, 13px body-sm, 15px body, 16px subheading, 32px heading, 68px display. Tracking -0.03em at display, +0.18em at eyebrow. Plus Jakarta Sans conveys sharp, post-modern engineering precision without veering into brutalist tech clichés. Its wide aperture and geometric purity in display weights pair effortlessly with cosmic sci-fi themes. If replacing, prioritize geometric sans-serifs with robust tabular/proportional figures and tight optical kerning like Geist or Inter.
GEOMETRY & SPACING
Corner radii — cards 0px, links 0px, inputs 999px, buttons 999px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely atmospherically rather than through UI drop shadows. The deep navy canvas acts as infinity, overlaid by dense pointillist particle luminosity on the right. Buttons and UI components sit flat upon the glass of the screen, relying on sharp contrast and color glow rather than structural elevation.
IMAGERY
The visual anchor is an ethereal, richly detailed digital artwork fusing neural network particle trails with a celestial, bioluminescent landscape. A solitary human silhouette stands atop a crag overlooking the swirling cosmic flow, giving philosophical scale to synthetic intelligence. Mundane corporate photography, 3D clay figures, or flat vector illustrations would catastrophically break the brand ethos.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal cross-fade between absolute dark negative space on the left and a dense, bioluminescent particle cloud with a miniature human silhouette on the right. This compositional divide immediately communicates 'human agency navigating vast synthetic complexity'. It is misused if text is placed directly over the dense particle cloud or if the right side is cropped to remove the human scale reference.
MUST
- Keep the left 45% of the viewport completely void of background texture so text remains effortlessly legible.
- Use fully rounded 999px pill radii for all enclosed interactive buttons.
- Differentiate metrics using intentional color coding (cyan, coral, cream) across the data row.
- Pair solid filled buttons with naked inline arrow links to maintain visual weight hierarchy.
AVOID
- Never place container boxes, cards, or glassmorphism panels behind the hero copy or metric row.
- Do not let the particle illustration overlap or reduce contrast under the left-side text columns.
- Avoid warm earthy tones in UI elements; keep structural UI cold, minty, and cosmic.
- Never use square or small-radius (4px-8px) buttons; all buttons must be continuous pills.
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