Design a dark-mode website section: deep navy infrastructure canvas illuminated by electric cobalt telemetry and precise developer-grade typography.
LAYOUT
The screen follows a clear horizontal division: a split hero section above, transitioning smoothly into a comprehensive developer footer below. The hero features a left-aligned value proposition and conversion group opposing a right-aligned live product simulator. Below the hero callout bar, a full-width border leads to a structured five-column footer containing the company brand, newsletter input, and four thematic link pillars.
PALETTE (use these exact hex values)
- #060a12 — Void Canvas: Deep structural base canvas background across the hero and footer sections.
- #0d131f — Elevated Obsidian: Translucent container background for interactive telemetry cards and inputs.
- #1c2738 — Hairline Border: Subtle 1px perimeter outlines on cards, dividers, pills, and input fields.
- #1e6bff — Electric Cobalt: High-priority CTA fill, highlighted title typography, and glowing ray accents.
- #38bdf8 — Cyan Flare: Atmospheric light glow, radial lens flares, and progress bar rings.
- #10b981 — Emerald Verified: Live status indicators, validation badges, and success checkmarks.
- #f0f6fc — Stark White: Primary headings, brand logo wordmark, and key metric readouts.
- #8b99a8 — Muted Slate: Supporting descriptions, inactive links, labels, and copyright notices.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 28px heading, 52px display. Tracking -0.03em at display, 0.05em at caps. The typographic tone is authoritative, highly technical, and minimal. Inter provides clean, neutral legibility that lets technical terms and metric data feel precise and calm. JetBrains Mono balances the modern neo-grotesque sans with strict engineering credibility, suited for developers building LLM infrastructure.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through luminous edge illumination and subtle surface value shifts rather than conventional drop shadows. A faint, diffuse cyan-blue glow emanates from behind the telemetry card into the top-right corner. Internal card elements use sunken, darker container surfaces (#080c14) framed by 1px crisp borders to express layered nesting.
IMAGERY
Imagery avoids photorealism entirely, relying on rendered vector telemetry, interface glass cards, and technical payload previews. A delicate, glowing geometric network beam sweeps along the upper-right horizon to suggest real-time AI network activity. Photography or figurative human illustrations would directly contradict the technical infrastructure aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the combination of an illuminated terminal card coupled with an ethereal cyan-blue laser ray cutting through the deep navy atmosphere. It transforms an otherwise standard developer documentation card into an active, live telemetry monitor. Misusing this effect with overly bright flares or chaotic multi-color gradients would degrade the disciplined, security-first tone.
MUST
- Anchor layout sections with full-width 1px hairline dividers (#1c2738) to preserve clean structure.
- Use electric cobalt (#1e6bff) sparingly on key verbs, conversion buttons, and highlighted typography words.
- Maintain monospace typography (12-13px) for all payload data, API routes, and code blocks.
- Ensure dark card surfaces remain subtly translucent with 1px border outlines to define edges on dark canvas.
AVOID
- Do not use high-saturation backgrounds; canvas must remain near-black navy (#060a12).
- Never apply thick, heavy card borders; border widths must stay strictly at 1px.
- Avoid warm tones or yellow-based accents; restrict palette to electric blues, cyans, and emeralds.
- Do not drop the contrast of body text below #8b99a8 to protect legibility on dark themes.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
