Design a dark-mode website section: precision developer instrumentation glowing softly against absolute nocturnal deep slate.
LAYOUT
The layout is divided into two major functional sections: an upper conversion card and a lower structural footer. The conversion card utilizes an asymmetric two-column bento structure, placing value-oriented marketing copy on the left and technical proof (terminal window) on the right. Below, a fine horizontal divider separates the footer into a multi-column navigation zone spanning brand identity, four navigation stacks, and a newsletter capture form, concluding with a single-line horizontal copyright and compliance bar.
PALETTE (use these exact hex values)
- #070c12 — Canvas Background: Dominant background canvas across page body and baseline footer area.
- #0b131d — Card Elevated: Elevated background fill for the main CTA callout container.
- #05080c — Terminal Void: Nested dark fill for interactive code snippet preview block.
- #38dcd2 — Electric Cyan: Primary interactive button fill, highlighted text phrases, and submit icons.
- #22c55e — Operational Mint: Live system status indicator dots and healthy uptime telemetry badges.
- #f8fafc — Text Primary: High-contrast headings, active button labels, and prominent terminal code keys.
- #899cae — Text Secondary: Subtitles, body paragraphs, and default navigation menu link items.
- #48596c — Text Dim: Eyebrow section headers, code syntax comments, and copyright legal copy.
- #152230 — Border Subtle: Structural outlines for cards, input fields, and division rules.
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 28px heading, 36px display. Tracking -0.02em at display, 0 at body. The typographic voice is quiet, authoritative, and deeply engineering-centric. Inter provides neutral, highly legible sans-serif hierarchy for fast human parsing, while JetBrains Mono injects cold, machine-executable credibility. For open-source or commercial implementations, pairing Geist Sans with Geist Mono or JetBrains Mono delivers an exact functional match without licensing friction.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly through subtle tone steps from #070c12 (base canvas) to #0b131d (cards) and #05080c (inset terminals). Shadows are never harsh black drops; instead, depth is suggested through diffused chromatic glows radiating from electric cyan action elements (0 8px 24px rgba(56, 220, 210, 0.28)). Hairline borders provide tactile definition across low-contrast boundaries without visual heaviness.
IMAGERY
There are no photographic assets or organic illustrations in this design. Visual interest is derived exclusively from synthetic technical artifacts: monospaced code blocks, JSON payloads, terminal prompts, and micro-telemetry badges. Any photographic imagery or whimsical 3D rendering would instantly violate the technical, command-line purity of the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the interactive terminal preview module embedded directly within the marketing CTA card, completed by the neon cyan glowing primary button. Together, they anchor the pitch not on abstract promises, but on tangible, runnable code with live status indicators. To use it correctly, ensure code within the window reflects real API methods and maintain the glowing cyan button as the singular high-chroma element on the screen.
MUST
- Always illuminate primary conversion buttons with a soft cyan glow (#38dcd2 with 25% opacity).
- Use JetBrains Mono exclusively for CLI commands, status badges, and uppercase column eyebrow headers.
- Maintain high contrast between headline white (#f8fafc) and muted secondary paragraphs (#899cae).
- Keep card outlines subtle using 1px border lines tinted at rgba(255, 255, 255, 0.08) or #152230.
AVOID
- Do not introduce bright, warm accent colors like orange, red, or yellow except for critical error states.
- Never make the card background solid pure black (#000000); keep the subtle navy-charcoal depth (#0b131d).
- Do not omit the terminal prompt symbol '>_' from developer-facing action buttons.
- Avoid sharp 0px corners; maintain rounded corners ranging from 8px for inputs to 20px for major cards.
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. 在 DraPub 中尝试 
