Design a dark-mode website section: stealth cyan precision floating over deep ocean obsidian with particle telemetry grids.
LAYOUT
The page follows an asymmetric split CTA block resting above a deep structured footer. In the upper zone, the left 45% holds the heading and dual action buttons, while the right 55% houses the glass metric card and trust items. Below, separated by an ethereal particle wave and a full-width hairline border, sits a 6-column footer grid concluding with copyright, legal links, and a SOC 2 badge in a bottom subfooter rail.
PALETTE (use these exact hex values)
- #040911 — Abyssal Canvas: Deepest canvas background behind all sections and footer structure.
- #081320 — Translucent Navy Glass: Metric banner container fill with subtle alpha transparency.
- #19E0B2 — Cyan Electric Brand: Primary CTA button, key metric icons, newsletter submit button, and eyebrow badges.
- #2980B9 — Electric Cyan Glow: Underlying oceanic ambient radial lighting and particle horizon wave.
- #FFFFFF — Pure Crisp White: Primary display headings, metric values, and logo mark typography.
- #8EA2B4 — Muted Slate Gray: Secondary description copy, active links, and metric labels.
- #16283D — Dark Steel Border: 1px hairline divider lines, input field borders, and card stroke outlines.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 32px heading, 44px display. Tracking -0.02em at headlines, +0.06em at uppercase labels. The typography conveys military-grade clarity, computational precision, and modern engineering rigor. Inter or a similar clean neo-grotesque provides frictionless readability across dense footers, while tightened tracking (-0.03em) on display headlines gives large text an authoritative, solid presence. Monospace-esque spaced tracking on all-caps microcopy evokes avionics telemetry panels.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical lighting rather than drop shadows. Surface layers float via 1px border strokes tinted in soft translucent steel over an ambient bioluminescent particle field. The hero visual uses a luminous 3D point cloud wave that casts blue radial lighting into the dark background canvas.
IMAGERY
The visual anchor is a luminous 3D cyan-to-cobalt digital point cloud wave simulating terrain scanning or high-altitude telemetry data. Photography is completely absent; all graphical identity comes from crisp geometric line icons and volumetric generative particle mesh fields. Avoid literal stock photography of hardware or birds.
SIGNATURE DETAIL — the thing that makes this design itself
The undulating blue particle mesh horizon that bridges the conversion CTA to the footer. It acts as both a visual horizon and an atmospheric light source, grounding abstract tech copy in a sense of planetary surveillance space. Misusing it involves making it a noisy flat static texture rather than a glowing dimensional particle cloud.
MUST
- Use solid electric cyan (#19E0B2) strictly for key interaction points and primary buttons.
- Render tabular data and statistics in bold white numerals paired with faint muted labels.
- Keep card backgrounds semi-translucent over ambient dark blue gradients.
- Separate large layout zones with subtle 1px strokes tinted at rgba(255,255,255,0.08).
AVOID
- Never use pure black (#000000); always retain the oceanic deep navy tint (#040911).
- Do not use high-saturation warm colors (red, orange, yellow) anywhere in default state.
- Avoid heavy drop shadows; rely entirely on fine border strokes and ambient glow for elevation.
- Do not center footer column headings or link lists; keep them strictly left-aligned.
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