Design a dark-mode website section: luminescent green-cyan aurora drapes illuminating an agentic operating core over deep obsidian space.
LAYOUT
The layout is strictly centered along a vertical axis within a 1240px container. It initiates with a minimalist top navigation bar, flows downward through a centered pill badge, dramatic 3-line headline, supportive paragraph, and social trust row. Below the CTA buttons, the composition transitions into an isometric perspective ground plane featuring a glowing core flanked symmetrically by six workflow nodes.
PALETTE (use these exact hex values)
- #03070b — Void Black: Deepest canvas background providing high contrast for glowing volumetric light effects.
- #08131d — Substrate Glass: Translucent node backing and core processor chip fill with subtle backdrop blur.
- #4ade80 — Aurora Mint: Left-hand atmospheric flare, trust verification checkmarks, and primary button gradient start.
- #00f2fe — Electric Cyan: Right-hand aurora curtain, circuit connection traces, heading text gradient, and core node borders.
- linear-gradient(90deg, #38bdf8 0%, #4ade80 100%) — Primary Glow Gradient: Used on primary CTA fill, headline emphasis line, and core chip accent.
- #ffffff — Pure White: Primary headline text, active navigation items, and high-emphasis labels.
- #94a3b8 — Muted Slate: Subheading copy, secondary nav items, node subtitles, and trust strip text.
- #1e3a4a — Border Glow Cyan: Subtle border outlining node cards, pill badges, and input states.
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 subheading, 24px heading, 64px display. Tracking -0.03em at display, 0.05em at caps badge. The typography is clean, architectural, and authoritative. Using a precise grotesque sans-serif with tight negative tracking on display titles gives the interface an engineered, high-tech operating system feel. The stark contrast between 64px display titles and 11px uppercase technical badges enhances visual hierarchy and readability in low-light contexts.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through volumetric luminosity and perspective projection rather than standard drop shadows. The backdrop recedes into absolute black while radial glows and glowing vertical light curtains push forward. Interactive cards float above a curved grid horizon, lit from below by neon cyan circuit lines and core bloom.
IMAGERY
No photographic imagery is used; the design relies entirely on abstract generative light rendering and stylized 3D perspective vector schematics. The visual language evokes a cybernetic horizon with vertical aurora light curtains framing a technological processor chip. Realistic human imagery or standard SaaS flat illustrations would completely undermine the futuristic aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual vertical aurora light curtains flanking a central perspective-tilted processor that beams glowing cyan traces to floating modular node chips. To use it properly, keep the light columns softly diffused at the edges and balance the green-to-cyan gradient across the horizon. It is commonly misused by making the light beams too sharp or overwhelming the center typography with excessive bloom.
MUST
- Use pure black #03070b as the base to keep aurora light beams luminous and contrast-rich.
- Restrict the green-to-cyan gradient strictly to high-emphasis CTAs, the third headline line, and active nodes.
- Maintain strict symmetry between the left and right peripheral floating workflow nodes.
- Keep node connector lines razor-thin (1px to 1.5px) with an intense cyan drop-shadow glow.
AVOID
- Do not apply solid white backgrounds or light mode panels anywhere in the interface.
- Avoid warm colors like red, orange, or yellow that clash with the green-cyan aurora palette.
- Do not remove the vertical light pillars; they provide essential framing for the central copy.
- Never make peripheral node cards fully opaque; they must preserve the background spatial glow.
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