Design a dark-mode website section: precision research console enveloped in atmospheric midnight navy, neon spectral gradients, and structured scientific proof metrics.
LAYOUT
Structured top-to-bottom as a massive unified CTA card followed by a modular six-column directory footer. Inside the CTA card, content splits into a 55/45 asymmetrical split: left side handles the thesis statement, dual buttons, and micro-features; right side consolidates empirical proof into a 2x2 metric matrix with compliance endorsement at the foot. Below, the directory footer aligns five navigational lists alongside a focused newsletter capture module.
PALETTE (use these exact hex values)
- #06090e — Canvas Midnight: Absolute bottom page background behind cards and base footer tier
- #0b1424 — CTA Surface Deep Blue: Primary background tone for the featured hero callout container
- #09101c — Stat Inset Surface: Interior glass-tinted card containing the 2x2 scientific metrics grid
- #1d63ff — Electric Cobalt: Primary conversion button fill on CTA button and newsletter subscribe
- linear-gradient(90deg, #3b82f6 0%, #c084fc 100%) — Spectral Gradient: Gradient applied to emphasis text tokens like 'Scientific'
- #34d399 — Bioluminescent Mint: Pre-header kicker text, icon highlights, and subline section rules
- #ffffff — Primary Text White: Display headlines, stat values, and prominent button text
- #94a3b8 — Muted Slate Text: Body paragraphs, stat labels, footer column headers, and legal notes
- #1e293b — Border Subtle: Card borders, divider lines, and text input outlines
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 22px subheading, 28px heading, 38px display. Tracking -0.02em at display, 0.08em at kickers. The typographical tone communicates clinical precision, modern enterprise computation, and scientific certainty. A neutral neo-grotesque sans like Inter balances heavy display metrics with dense tabular micro-copy, lending academic seriousness to commercial tech.
GEOMETRY & SPACING
Corner radii — cards 28px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is created without harsh drop shadows by stacking luminance surfaces: base void (#06090e), layered CTA island (#0b1424), and recessed metric inset (#09101c). Edges are defined by subtle 1px border strokes with low-opacity blue/cyan tint rather than diffuse blur filters.
IMAGERY
Avoid photographic realism or human stock photography entirely. Visual styling is restricted to scientific topological vector wireframes, subtle atmospheric radial color blooms (blue and mint), and geometric molecular icon badges.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-column split inside an oversized 28px radius island card, where an ambitious scientific claim on the left is counterweighted by a hyper-specific, bordered 2x2 metric verification panel on the right.
MUST
- Use uppercase tracking (>=0.08em) strictly on kickers and micro-metadata labels.
- Restrict the spectral violet-cyan gradient solely to single high-impact keyword nouns in headings.
- Maintain high contrast (minimum 7:1) between pure white primary numbers and the dark navy background.
- Pair numeric proof points directly with a tinted square icon container for scanning velocity.
AVOID
- Never use pure black (#000000) for surfaces; always infuse midnight blue hue tones.
- Do not allow the spectral gradient to spill across entire multi-line sentences.
- Never omit the subtle border stroke on inset dark cards, or visual separation collapses.
- Do not use sharp 0px corners on interactive buttons or primary CTA card boundaries.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub