Design a dark-mode abstract background artwork: cosmic nebular darkspace illuminated by iridescent gradients and delicate line-drawn typography.
LAYOUT
Asymmetric two-column composition within a 1320px maximum container. The left 50% accommodates the textual narrative (eyebrow, multi-line display headline, body paragraph, CTA cluster), while the right 50% provides full visual clearance for the celestial nebula focal point. The layout is grounded by a horizontal 4-column metrics footer demarcated by a radiant divider line.
PALETTE (use these exact hex values)
- #060814 — Cosmic Void: Deepest canvas background behind starry nebula fields
- #F7A8B8 — Coral Glow: Starting stop for display headline gradient and primary CTA fill
- #64D2EC — Electric Cyan: Ending stop for display gradient and primary CTA accent
- #FFFFFF — Starlight White: High-emphasis metric counts and key headings
- #C4B5FD — Nebula Lavender: Secondary brand text, category badges, and active accent highlights
- #94A3B8 — Muted Slate: Navigation items, supporting body copy, and metric subtitles
- #272E48 — Subtle Border: Nav button strokes, stat column divider lines, and metrics border
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 22px heading, 32px heading-lg, 64px display. Tracking -0.03em display, 0.15em badge caps. Inter or similar clean geometric sans-serif communicates rigorous mathematical precision and scientific competence. Its neutral architectural letterforms prevent the fantastical cosmic backdrop from feeling speculative or ungrounded, framing the product as serious deep-tech infrastructure.
GEOMETRY & SPACING
Corner radii — cards 0px, links 9999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1320px container, comfortable density.
DEPTH
Depth is created entirely through astronomical scale and atmospheric lighting rather than UI drop shadows. The deep black base layer recedes into infinity, while glowing volumetric nebula clouds float at midground and crisp typography sits on the absolute foreground glass plane.
IMAGERY
Rich photographic or high-fidelity 3D cosmic scenes depicting luminous nebulae, distant star clusters, and crescent planetary rims in magenta, violet, and cyan hues. Avoid flat vector illustrations, generic corporate stock photography, or cartoonish space graphics.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone coral-to-cyan gradient sweeping smoothly across both the large headline text and primary CTA button against an asymmetric cosmic void. Misusing it involves applying the gradient to small body text or navigation links, which instantly destroys legible contrast and structural balance.
MUST
- Keep cosmic background imagery biased toward the right half to ensure left-side copy maintains pristine readability.
- Use horizontal two-stop gradient text (#F7A8B8 to #64D2EC) exclusively on the primary hero headline.
- Enclose secondary action buttons in delicate 1px borders with pill (9999px) or subtle 8px corners.
- Use geometric line-art icons at 16x16px paired directly with key performance metrics.
AVOID
- Do not apply heavy solid card containers behind text or metric stats; keep them floating on the background.
- Do not use saturated yellow, bright green, or pure red in UI controls—stick to coral and cyan spectrums.
- Never center-align the hero text block; left-alignment is critical to counter the right-hand nebula focal point.
- Do not introduce drop shadows on typography; rely on high contrast over deep space.
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