Design a dark-mode website section: cosmic pointillism meets deep-space quantitative terminal telemetry under glowing purple gradient paths.
LAYOUT
Asymmetric two-column hero layout inside a 1240px container. Left column contains eyebrow tag, display headline, supporting copy, dual CTAs, and a horizontal feature checklist. Right column stacks three interlocking dashboard cards over the glowing planetary graphic, leading down to a sharply clipped 24px rounded-top white section.
PALETTE (use these exact hex values)
- #040612 — Void Black: Deepest canvas background across entire hero viewport
- #090D1E — Telemetry Surface: Background fill for floating dashboard cards and widgets with subtle opacity
- #1A2038 — Surface Border: Ultra-thin hairline borders framing telemetry cards and pill buttons
- #6366F1 — Iris Violet: Primary CTA fill, glowing trail highlights, and active state indicators
- linear-gradient(90deg, #7C5CFC 0%, #B968C7 50%, #F4A292 100%) — Neon Nebula Gradient: Headline gradient text and particle field coloration
- #10B981 — Success Emerald: Positive delta percentages, status chips, and execution checks
- #FFFFFF — Primary Text: High-emphasis headlines, titles, and active navigation labels
- #8A94A6 — Muted Text: Hero paragraph descriptions, secondary nav links, and dashboard labels
- #FAFAFC — Section Break White: High contrast bottom container introducing logo cloud section
TYPOGRAPHY
Typeface Inter (or Geist Sans,Plus Jakarta Sans,system-ui), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 56px display. Tracking -0.03em at display, 0 at body. Cold, quantitative, and institutional with crisp modern authority. Inter provides clean legibility without emotional distraction, while JetBrains Mono injects developer-grade rigor into agent workflows and market tickers.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created without drop shadows, using illuminated background phenomena instead. Soft purple and coral radial particle glows sit behind translucent HUD surfaces, while razor-thin 1px border strokes (#1A2038) define edges against the infinite void.
IMAGERY
Cosmic pointillism and algorithmic wave graphics formed by thousands of individual pixel dots. Planetary rings, starfields, and glowing fiber-optic splines evoke high-speed fiber trading networks and astrophysics telemetry; photographic portraits or conventional flat illustrations are completely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The stippled halftone celestial body intersecting luminous glowing violet fiber-optic wave tracks directly behind institutional AI trading widgets.
MUST
- Use dot-matrix pointillist graphics when representing financial market density or planetary bodies.
- Restrict neon gradient text strictly to the second line or emphasis phrase of the main title.
- Maintain high optical contrast between the cosmic hero section and the crisp white transition card below.
- Style all telemetry and code readouts in 11px to 12px monospaced typefaces.
AVOID
- Do not use flat vector clip-art or solid 3D renders instead of stippled/halftone particles.
- Do not apply bright gradient fills to primary buttons; keep them solid iris violet.
- Never make dashboard widget backgrounds completely opaque grey or solid black.
- Avoid heavy drop shadows; depth is created strictly through background glowing light trails.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub