Design a dark-mode website section: developer-first infrastructure dressed in midnight navy, crisp cyan terminal glyphs, and high-density operational telemetry.
LAYOUT
The composition follows a top-to-bottom rhythm starting with an expansive, balanced 2-column conversion card containing headline prose on the left and a terminal box on the right. Below, a 5-column footer grid spreads company identity and newsletter intake alongside four vertical categorized columns separated by thin line guides. The page concludes with a horizontal, single-line telemetry and copyright bar pinned between subtle horizontal hairpins.
PALETTE (use these exact hex values)
- #040711 — Midnight Void: Deepest background layer across the entire page canvas and baseline structure.
- #080f1e — Console Slate: Elevated card backdrop for the main CTA container and interactive panels.
- #050a14 — Terminal Core: Recessed terminal sandbox background behind simulated shell commands and logs.
- #1cd4ee — Electric Cyan: Primary action fill, highlighted heading keyword, prompt chevrons, and active links.
- #34d399 — Telemetry Emerald: System status indicator dots and operational readiness confirmations.
- #132238 — Wireframe Border: Thin structural borders, vertical column separators, and card boundaries.
- #f8fafc — Signal White: High-priority display headings, brand wordmark, and active link states.
- #94a3b8 — Muted Slate: Explanatory subtext, terminal logs, navigation links, and legal metadata.
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 16px subheading, 20px heading, 44px display. Tracking -0.02em at display, 0 at body. The typographic tone is authoritative, clinical, and unapologetically engineered. The combination of a tightly-tracked sans-serif display font with razor-sharp terminal monospacing communicates production-grade stability and low-level control. Geist Sans paired with Geist Mono serves as the ideal stack, with Inter and JetBrains Mono providing identical structural fidelity.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through dark value stacking and crisp line borders rather than diffuse drop shadows. The base level (#040711) elevates to card level (#080f1e), while terminal interiors sink back into recessed matte (#050a14). A delicate cyan atmospheric bleed emanates from behind the main CTA card to suggest active electrical power.
IMAGERY
This design strictly rejects illustrative fluff, 3D mascots, or generic stock photography. Imagery is replaced entirely by functional code UI: simulated terminal shells, execution timelines, and clean SVG outline system icons. Any photographic inclusion would severely compromise the clinical command-line aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the split-screen interactive CTA container that integrates an authentic command-line shell directly alongside product marketing copy. It validates the product's promise through immediate code proof rather than vague rhetoric. Misuse occurs when the terminal is treated as decorative ASCII art rather than realistic, structured command execution with accurate timestamps.
MUST
- Reserve bright cyan (#1cd4ee) strictly for primary buttons, accent syntax, and active terminal highlights.
- Use Monospace fonts for all system latencies, command strings, and eyebrow tags.
- Separate footer navigation columns using full-height hairline borders in #132238.
- Maintain strict left-alignment between headlines, body copy, and secondary inline text links.
AVOID
- Do not introduce multi-colored terminal syntax; stick to monochrome white, muted slate, and cyan.
- Avoid pill radiuses on the main CTA wrapper; retain the structured 20px card curve.
- Never replace subtle 1px border dividers with heavy drop shadows or glow halos.
- Do not use saturated cyan for large surface backgrounds other than compact action buttons.
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 
