Design a dark-mode website section: deep obsidian developer canvas illuminated by iridescent indigo flares and luminous geometric nodes.
LAYOUT
The hero uses an asymmetric two-column structure within a max-width 1240px container. The left column stacks the launch badge, a massive three-line headline, descriptive lede, CTA cluster, and checklist ticks. The right column showcases the radiant particle nexus overlaid by the live API terminal, resting above an integrated 4-step pipeline bar.
PALETTE (use these exact hex values)
- #04040c — Space Void: Deepest canvas background framing the entire hero section
- #0b0c1b — Elevated Glass: Background fill for cards, code editor, and input pills
- #4361ee — Electric Indigo: Primary action button background and glow origin point
- #8b5cf6 — Violet Tint: Headline gradient stop, active card boundary, and particle wave flare
- #38bdf8 — Cyan Flare: Highlight points on the terminal border and burst rays
- #34d399 — Mint Success: Badge indicator text for HTTP 200 OK status
- #ffffff — Pure White: Dominant headline words, brand wordmark, and primary button labels
- #94a3b8 — Muted Slate: Subtitles, inactive pipeline steps, navigation links, and checkmark labels
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 18px body-lg, 20px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. Inter brings an ultra-clean, neutral architectural precision that allows developer-focused copy to read effortlessly without visual friction. Monospace accents via JetBrains Mono provide authentic engineering credibility. For open alternatives, combine Geist with Geist Mono.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through luminous chromatic glow rather than box-shadow offsets. Surfaces remain semi-translucent with subtle hairline borders (rgba(255,255,255,0.1)), allowing the indigo-violet particle swirls in the background to bleed through and illuminate the edges.
IMAGERY
Visual assets focus on programmatic generative geometry: a 3D-feeling particle vortex composed of halftone dots radiating around a sharp, 8-faceted starburst symbol. Photorealistic imagery or human photography is strictly avoided in favor of crisp technical vector diagrams and real code snapshots.
SIGNATURE DETAIL — the thing that makes this design itself
The iridescent starburst surrounded by a dynamic swirling particle vortex positioned directly between the bold headline and the glowing API terminal. To use it properly, allow it to serve as the visual bridge connecting human intent (left copy) with programmatic execution (right terminal); avoid overloading it with competing colorful assets.
MUST
- Use tight negative letter spacing (-0.035em) on display headings above 48px.
- Limit pure white (#ffffff) strictly to prominent headlines and active action labels.
- Enclose code blocks with a vivid gradient border that echoes the central illumination.
- Connect workflow cards with delicate dotted tracking lines at 50% vertical center.
AVOID
- Do not use solid bright backgrounds for cards; stick to dark glass (#090a16).
- Avoid warm colors like orange or red outside of explicit error states.
- Do not omit the hairline borders (1px) around dark surfaces, or hierarchy collapses.
- Avoid heavy drop shadows; rely on soft radial glow gradients for illumination.
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 
