Design a dark-mode website section: deep obsidian glass framed by ethereal particle ribbons and high-precision technical telemetry.
LAYOUT
Two-column asymmetric hero within a maximum 1240px container. Left column contains eyebrow shield, multi-line display headline with bottom gradient span, body copy, dual-button CTA group, and a metric card. Right column hosts a rich technical diagram framed by floating status badges connected via dotted routes.
PALETTE (use these exact hex values)
- #030712 — Obsidian Base: Root background canvas behind particle flows and glass cards
- #0B1120 — Deep Midnight Surface: Background fill for the central workflow canvas and interactive panels
- #1E293B — Subtle Slate Border: Default 1px stroke for cards, metrics panels, and diagram containers
- #3B82F6 — Cobalt Blue: Primary call-to-action buttons, active node highlights, and gradient origins
- #38BDF8 — Hyper Cyan: Secondary validation badges, active nodes, and particle wave crests
- #EC4899 — Neon Magenta: Gradient terminus on hero title and success badge accents
- #F8FAFC — Text Primary: Display headings, strong titles, and active button text
- #94A3B8 — Text Muted: Body paragraphs, navigation links, and diagram secondary labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 54px display. Tracking -0.03em at display, 0.05em on badges. Clean, authoritative, and computational. A neutral geometric neo-grotesque (matching Inter) communicates surgical developer precision, with tight negative tracking on display headings providing a punchy modern SaaS tone.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through luminosity and translucency rather than classic drop shadows. Background particle waves cast localized glows behind dark panels, while nested containers use progressive opacity (darker base, slightly lighter borders and nested cards) to establish vertical layering.
IMAGERY
Abstract 3D luminous particle waves and dynamic light streams in shades of electric blue, purple, and neon pink flowing horizontally across a starless obsidian canvas. Real-world photos or illustrative flat characters would severely break the sleek, high-compute AI aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone particle dust ribbon flowing dynamically behind a structured, node-based workflow canvas and reflected in the gradient typography of the display title.
MUST
- Use deep #030712 dark backgrounds overlaid with subtle cyan-to-magenta spectral gradients.
- Restrict bright saturated colors strictly to active CTAs, connection nodes, and gradient headline accents.
- Apply 1px semi-transparent borders (#1E293B or rgba(255, 255, 255, 0.08)) to all glass cards.
- Maintain high typography contrast: white headings paired with #94A3B8 muted descriptions.
AVOID
- Never introduce opaque solid white or light-grey card backgrounds.
- Do not use heavy drop shadows; rely on 1px borders and luminous back-glows.
- Avoid warm earthy palettes like oranges, browns, or sunny yellows.
- Do not apply fully saturated primary blues to large card surfaces—keep it to CTA elements.
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 
