Design a dark-mode website section: precision developer infrastructure framed in deep oceanic obsidian, faint blueprint telemetry, and luminous mint-cyan callouts.
LAYOUT
The layout is divided into two primary vertical tiers. The upper tier contains the wide 1240px CTA card, balanced between a left-hand headline/button cluster and a right-hand code terminal block. The lower tier is a clean multi-column footer consisting of brand bio and social links on the left, four navigation link columns in the center, and a newsletter capture box on the right, capped by a single-row copyright bar at the base.
PALETTE (use these exact hex values)
- #030712 — Void Canvas: Root background canvas across the entire section and base page layout.
- #070e18 — Subsea Card Surface: Container background for the hero CTA banner and nested code execution shell.
- #050b14 — Panel Inset: Inner API terminal window fill providing contrast against the outer card.
- linear-gradient(135deg, #0099ff 0%, #4ade80 100%) — Cyan Mint Glow: High-priority action gradient applied to the primary CTA button and brand marks.
- #38bdf8 — Neon Cyan: Eyebrow text, API REST method tokens, and email interactive link highlights.
- #4ade80 — Status Emerald: Terminal status code 200 OK and live connection badge dot.
- #16273b — Telemetry Border: 1px hairline borders bounding cards, terminal window, and social icon buttons.
- #f8fafc — Text Primary: Primary headings, brand wordmark, and high-emphasis labels.
- #64748b — Text Muted: Footer column links, descriptive copy, copyright, and syntax keys.
TYPOGRAPHY
Typeface Inter (or Geist Sans,Plus Jakarta Sans,system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 14px subheading, 15px body-lg, 18px heading, 36px display. Tracking -0.02em at headlines, 0.05em at eyebrows. The typographic identity communicates authoritative developer precision through Inter's neutral geometry paired with JetBrains Mono's unyielding structure. Headline sizes remain grounded at 36px with tight -0.03em tracking, resisting bombastic display sizes in favor of a calm, professional demeanor. Both typefaces are open-source and easily substituted by Geist Sans and Geist Mono without altering brand personality.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created entirely through optical luminance and layered surface darkness rather than heavy drop shadows. The bottom base canvas is near black (#030712), overlaid by a slightly lifted deep navy card (#070e18), which in turn recesses the terminal shell (#050b14). Fine 1px borders (#16273b) act as simulated light catchers along component perimeters.
IMAGERY
No photographic imagery is present. Visual storytelling relies entirely on synthetic UI artifacts: an authentic syntax-highlighted code editor, blueprint grid patterns, and minimalist glyph icons. Any photography, cartoon illustrations, or hand-drawn sketches would instantly violate the technical rigor of this system.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the dual-tier conversion card: combining a faint technical blueprint grid and top-edge cyan ambient bloom with a live, syntax-colored JSON API mock. This grounds product value in instant technical credibility rather than abstract marketing fluff. Misusing this pattern by turning the code mock into an illegible low-contrast graphic or replacing the subtle glow with a harsh gradient ruins the developer-first ethos.
MUST
- Use uppercase 11px font with 0.08em tracking for technical eyebrow tags like 'READY TO SWITCH?'.
- Retain the blueprint grid pattern strictly within the bounds of the conversion card.
- Pair the bright cyan-emerald gradient exclusively with high-intent primary CTA buttons.
- Keep code editor payloads in authentic monospace with distinct JSON key and string values.
AVOID
- Do not use high-saturation gradients as the background of the entire section.
- Never apply pure white borders; use deep slate hairlines (#16273b) to maintain immersion.
- Avoid colored drop shadows; elevation is created via subtle border strokes and gradients.
- Do not set footer navigation links in pure white; reserve #f8fafc for column headers.
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 
