Design a dark-mode website section: deep midnight canvas electrified by atmospheric blue glow and crisp technical nodes.
LAYOUT
The composition is governed by a strict two-column asymmetrical hero grid across a 1360px container. The left 40% holds the editorial stack: category pill, multi-line display headline, descriptive paragraph, dual CTA buttons, and trust badges. The right 60% contains a four-column horizontal sequence of numbered process steps linked by a continuous horizontal neon conduit axis.
PALETTE (use these exact hex values)
- #030712 — True Black Base: Primary screen backdrop absorbing light across the left half.
- #0b1329 — Translucent Navy Surface: Background fill for floating workflow pipeline cards with alpha blending.
- #2563eb — Glow Cobalt: Diffused atmospheric gradient illumination casting depth behind pipeline cards.
- #60a5fa — Electric Cornflower: Hero headline emphasis, pipeline step numbers, and audio waveform spikes.
- #ffffff — Pure White: Main display headers, primary CTA pill background, and critical highlights.
- #94a3b8 — Muted Slate: Body copy, secondary navigation links, and step descriptive text.
- #1e293b — Deep Slate Stroke: Hairline 1px borders surrounding badges, buttons, and pipeline containers.
TYPOGRAPHY
Typeface Inter Display (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 64px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, modern, and clinical, delivered through an engineered grotesque sans-serif like Inter Display. Tight tracking (-0.035em) and compact line-heights make the display scale feel muscular and deliberate, while small-scale metadata remains legible through tabular layout and strict slate-gray contrast control.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 10px, buttons 9999px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through ambient backlighting rather than drop shadows. Translucent dark blue surfaces sit over an intensely saturated electric blue radial blur, giving the illusion of hardware components floating above an illuminated motherboard. Subtle 1px borders in deep slate catch edge reflections to ground each floating container.
IMAGERY
Zero photographic or human imagery is present; the visual space is defined entirely by schematic UI diagrams, clean iconography, and synthesized vector waveforms. All graphics simulate software states: audio processing bars, categorised taxonomies, verification badges, and integration lists. Any realistic photo or decorative illustration would completely destroy the technical, deterministic atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal four-node pipeline illuminated by a localized behind-the-glass cobalt glow, bisected by a continuous glowing conduit wire. It converts abstract AI operations into a concrete, sequential mechanical diagram. Misusing it involves centering the glow across the full canvas or detaching the conduit wire from the card centers.
MUST
- Retain the pure black base (#030712) on the left to preserve asymmetric negative space.
- Isolate the electric blue radial glow strictly to the right pipeline diagram area.
- Use color variation inside headlines to demarcate the core functional pivot point.
- Maintain hairline 1px borders (#1e293b) across all cards to maintain technical precision.
AVOID
- Never spread the blue ambient background glow across the primary copy on the left.
- Do not use multicolored gradients; all accent hues must derive from the cobalt blue spectrum.
- Avoid solid drop shadows; depth must rely on backlighting and 1px border contrast.
- Do not use rectangular corners on action buttons or workflow cards.
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