Design a dark-mode website section: deep midnight developer canvas illuminated by electric cyan waves and structured algorithmic node workflows.
LAYOUT
The header spans the full width with a left-aligned wordmark and navigation cluster, balanced by status and authentication actions on the right. Below, the hero splits into two balanced halves: the left column stacks the release tag, massive multi-line title, body text, twin CTAs, and a tri-metric proof strip. The right column showcases the product mechanism, stacking an API response window above an interconnected 4-stage agent execution node tree.
PALETTE (use these exact hex values)
- #030712 — Void Black: Root page background canvas and base structural backdrop.
- #090d1f — Deep Marine Surface: Background fill for terminal card, metric containers, and workflow step cards.
- #1e293b — Subtle Outline: 1px hairline borders on cards, buttons, and node containers.
- #2563eb — Electric Royal: Primary CTA fill, active interactive nodes, and core brand identifiers.
- #38bdf8 — Cyan Plasma: Gradient headline stop, node glyphs, and active process outlines.
- #34d399 — Emerald Status: Status indicator pips, HTTP 200 responses, and terminal success badges.
- #f59e0b — Amber Warning: Accent lightning icon highlighting autonomous 24/7 runtime metric.
- #f8fafc — Text Stark: Primary headings, dominant titles, and high-emphasis interface values.
- #94a3b8 — Text Muted: Body copy, unselected navigation links, and parameter descriptions.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 56px display. Tracking -0.03em at display, 0em at body. The typographic tone is authoritative, developer-native, and crisp. Plus Jakarta Sans provides geometric geometric clarity with tight letter-spacing that feels modern and industrial, while JetBrains Mono injects strict engineering credibility into the schema demonstration.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created without harsh drop shadows. Instead, surfaces use 1px slate borders (#1e293b) over translucent navy card fills (#090f1d), reinforced by an ambient cyan-blue radial back-glow radiating behind the code terminal and central workflow node.
IMAGERY
Visual assets consist strictly of UI abstractions: an interactive REST API terminal panel, schematic node trees with dashed connectors, and an ethereal backdrop of computational ribbon waves. Photography, 3D clay figures, or illustrative cartoons would violate the technical developer aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tiered computational architecture on the right: a polished dark API terminal window tethered directly to an interconnected hexagonal workflow node tree via delicate dotted vector lines. Misusing it involves separating the code from the node flow or replacing the glowing technical connectors with thick generic arrows.
MUST
- Use a vibrant linear-gradient of cyan to emerald (#38bdf8 to #34d399) exclusively on high-priority closing text or active nodes.
- Frame code and data cards with a strict 1px hairline border (#1e293b) to retain precision against the dark background.
- Maintain monospace type exclusively for code blocks, JSON payloads, and HTTP request lines.
- Keep background atmospheric glow soft and diffuse, positioning it beneath UI cards rather than overpowering foreground text.
AVOID
- Do not use solid bright white backgrounds or light mode cards anywhere on this canvas.
- Do not apply drop shadows with high opacity; rely on subtle blue back-glows and hairline borders for separation.
- Do not render code or technical parameters in a sans-serif typeface.
- Avoid heavy multi-color icons; limit node icons to clean, single-color thin vector glyphs.
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