Design a dark-mode website section: mission-critical dark developer canvas with luminous electric cyan highlights and precision data telemetry.
LAYOUT
The header spans the maximum container width with logo anchored left, mid-frequency documentation links centered, and conversion triggers right. The hero divides into an asymmetrical two-column layout: 45% width for value positioning and compliance credentials on the left; 55% width for live developer terminal and pipeline flow on the right. A continuous four-cell metric strip spans horizontally directly beneath the primary fold.
PALETTE (use these exact hex values)
- #040711 — Abyss Navy: Root canvas background spanning the viewport with faint directional atmosphere
- #0b1322 — Console Slate: Background for code terminal, execution card, and pipeline stage modules
- #38bdf8 — Telemetry Cyan: Primary interactive button fill, highlighted headline words, and atmospheric backlight
- #22c55e — Verification Green: Active pipeline step stroke, status dots, and execution success messages
- #1e293b — Obsidian Border: Structural 1px framing for code containers, pill buttons, and vertical dividers
- #ffffff — Optical White: Display headings, active code syntax, key metric numbers, and branding text
- #94a3b8 — Muted Slate: Hero subheadings, inactive navigation items, comments, and metric labels
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 36px heading, 56px display. Tracking -0.03em for headings, -0.01em for body. The typographic tone is uncompromisingly precise, scientific, and authoritative. A contemporary neo-grotesque sans-serif provides clinical legibility in the UI, while monospace snippets inject direct code utility. If Inter or JetBrains Mono are unavailable, Geist and Geist Mono serve as exact functional replacements.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through luminance grading and atmospheric radial backlights rather than directional box shadows. Elevated cards use deep navy-grey fills (#0b1322) surrounded by crisp 1px borders (#1e293b) that lift them off the base void (#040711). A soft, diffuse cyan back-glow sits behind the interactive code block to simulate screen illumination.
IMAGERY
Visual assets are strictly schematic and interactive: formatted syntax blocks, execution terminal receipts, and flow diagrams. Photographic material is limited to a hyper-subtle dusk horizon silhouette at the viewport perimeter, adding spatial atmosphere without distracting from technical metrics. Generic tech 3D shapes or stock photography are entirely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated Code-to-Pipeline Card: an interactive terminal mockup seamlessly paired with a live execution receipt and an interactive horizontal workflow stage indicator that highlights active processing with emerald glow.
MUST
- Use electric sky blue (#38bdf8) exclusively for key conversion hooks and highlighted statement words.
- Enforce monospace font strictly for code lines, timestamps, and schema definitions.
- Retain hairline 1px strokes (#1e293b) to define component architecture rather than heavy drop shadows.
- Pair verified states with crisp emerald accents (#22c55e) and dimmed ambient glow.
AVOID
- Do not introduce warm yellow, orange, or red tones except within faint backdrop silhouette imagery.
- Never use soft, blurry, multi-colored drop shadows under dark-mode cards.
- Avoid pill radius on modular cards; preserve sharp 12px rounded corners for structured panels.
- Do not let secondary text fall below 11px to maintain legibility in compliance statements.
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. 在 DraPub 中尝试 
