Design a dark-mode website section: deep emerald depths illuminated by vertical northern-light telemetry columns and frosted glass analytics modules.
LAYOUT
The header sits pinned at the top with a distributed three-part flex layout (brand left, nav center, action right). Below, the hero splits into two balanced halves: the left column houses a kicker, a three-line staggered headline, descriptive body copy, dual CTAs, and a bottom stats array; the right column holds a dynamic 2x2 Bento grid showing system health, AI insights, MTTR trend, and active signal status.
PALETTE (use these exact hex values)
- #040909 — Canvas Abyss: deep background canvas underpinning the entire hero layout
- #1d3f36 — Card Border Mint: 1px subtle structural boundary around frosted card containers
- #00f299 — Neon Emerald: primary brand green for headings, active indicators, and status
- #53e89b — Spring Leaf: start value for primary CTA gradient button fill
- #e0a038 — Amber Alert: accent hue for degraded health states and metric highlights
- #ffffff — Text Primary: pure white for primary headline and focal metric readouts
- #9ab3aa — Text Secondary: desaturated sage tint for body paragraphs and micro headers
- #58726a — Text Muted: low-contrast label text and inactive status indicators
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,Geist Sans,SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 32px heading-lg, 60px display. Tracking -0.03em at display, 0.08em at micro-uppercase. The geometric sans-serif communicates computational precision and modern developer tooling. Tight letter tracking at large sizes produces a punchy, confident cadence, while generous x-height at 13-15px preserves high legibility for dense technical logs and diagnostic alerts.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through luminous layering rather than heavy drop shadows. Ambient vertical streaks of cyan-to-amber light sit between the canvas and the UI, while Bento cards use semi-transparent dark teal glass with faint 1px borders to float above the glow.
IMAGERY
The core visual element is a generative, 3D point-cloud particle waveform that peaks like an audio spectrum or acoustic resonance field. It transitions fluidly from radiant green into warm golden amber, signaling intense compute activity without relying on generic stock photography or literal dashboard screenshots.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive signature is the vertical aurora borealis light curtain that bleeds down behind translucent telemetry widgets, seamlessly shifting from electric emerald to acoustic golden amber across a dense 3D particle landscape.
MUST
- Use deep forest teal (#040909) as the absolute canvas root, never pure neutral black.
- Restrict bright neon emerald (#00F299) to primary highlights, active states, and CTAs.
- Enclose all Bento visual widgets in 20px rounded containers with 1px border (#1D3F36).
- Maintain consistent left text alignment across all headline and paragraph copy blocks.
AVOID
- Do not use sharp 0px corners; all cards must feature a cohesive 20px radius.
- Do not introduce blue or magenta hues into the ambient lighting or waveform graphics.
- Never make dashboard cards fully opaque; maintain atmospheric translucency.
- Avoid centered headline alignment; the hero structure depends on a strict two-column split.
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 
