Design a dark-mode website section: deep midnight intelligence illuminated by luminous point-cloud topographies and restrained editorial serif typography.
LAYOUT
The page adheres to a symmetric, center-aligned column architecture. The top navigation spans the full container width with balanced left/center/right anchors. Below, stacked vertically in the center, are the live badge, the two-line serif display headline, a two-line sans descriptive subhead, a three-item trust proof row, and twin pill action buttons, resting above the organic wave horizon.
PALETTE (use these exact hex values)
- #07090e — Deep Obsidian: Dominant background canvas across the entire viewport
- #ffffff — Pure White: Primary headline text, logo, and high-emphasis labels
- #8994a6 — Muted Slate: Subtitles, navigation links, and feature metadata
- #4b63f6 — Electric Indigo: Hero primary button fill, emphasis italic serif text, and live indicator dot
- #111622 — Translucent Pill Surface: Background fill for the top live status badge
- #1e2738 — Border Subtle: Borders on status badges, secondary buttons, and divider lines
- #e8987b — Particle Copper Glow: Specular warm highlights on the terrain particle graphic
TYPOGRAPHY
Typeface Newsreader (or Playfair Display, EB Garamond, Tiempos Headline), weights 400. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 64px display. Tracking -0.02em. The typographic character balances the authority of classic print publishing with computational precision. The display serif feels intellectual and predictive—like an academic journal or financial monograph—while the clean modern sans keeps the operational layer fast, modern, and credible. Newsreader or Playfair Display paired with Inter provides an exact functional equivalent.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 20px gaps, 120px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely through atmosphere and optical layers rather than drop shadows. A dark cosmic ground provides the zero layer, while the glowing, undulating 3D particle terrain provides organic dimensionality at the base, receding into the dark canvas. Foreground UI elements float cleanly via high contrast and fine 1px border envelopes.
IMAGERY
The visual hero is a mathematically smooth point-cloud wave field resembling synthetic topography or neural data streams. Individual luminous points shift from cool electric blue to a warm copper-peach glow on wave crests. Any stock photography, flat vector illustrations, or cartoon icons would completely break this aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The singular identifying move is the contrast of an editorial serif display headline with an embedded blue-italic keyword phrase ('will choose.') floating directly over an expansive, hyper-detailed bioluminescent point-cloud horizon. Misusing it involves making the entire headline italic or replacing the particle field with a flat mesh gradient.
MUST
- Keep typography strictly disciplined: editorial serif for the central display headline, clean geometric sans for all UI copy.
- Use 999px full pill radius across all primary and secondary buttons and announcement tags.
- Limit the vibrant electric indigo (#4b63f6) strictly to high-leverage focal points: primary CTA, live dot, and the italicised display emphasis.
- Ensure the bottom particle horizon fades seamlessly into solid canvas black (#07090e) near the top edges.
AVOID
- Do not introduce sharp 0px or semi-rounded 4px corners to buttons; all interactive triggers must be full pills.
- Do not set body text or navigation in serif type; serifs are reserved exclusively for the main display headline.
- Do not use high-saturation flat fills on cards or panels that compete with the organic particle visual.
- Do not underline navigation links or CTAs; rely on hover color transitions.
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