Design a dark-mode website section: developer-grade precision where code terminal fidelity anchors high-stakes b2b pipeline conversion in deep obsidian space.
LAYOUT
The view is composed in two stacked sections: a hero conversion split-grid followed by a structured multi-column global footer. The hero divides into an asymmetric 50/50 balance—left side features the badge, 48px heading, trust items, and dual CTAs; right side anchors the interactive API terminal above a 4-column metric strip. Below, the footer opens with brand summary, newsletter field, and social buttons on the left, followed by four clean link columns, and closes with a dedicated system health card.
PALETTE (use these exact hex values)
- #090d16 — Canvas Midnight: Deepest background layer across viewport
- #0d131f — Surface Elevated: Card containers, code terminal shell, and status widget background
- #111827 — Surface Input: Background for newsletter text inputs and nested tab bars
- #1e293b — Border Subtle: 1px hairline borders demarcating cards, tab bars, and footer dividers
- #635bff — Electric Purple: Primary CTA buttons, highlighted heading text, and pill indicators
- #4338ca — Glow Violet: Subtle ambient back-glow behind the developer terminal container
- #22c55e — Operational Mint: Status indicator dots, uptime bar charts, and 200 OK badges
- #f8fafc — Text Primary: Main headlines, active tabs, stat figures, and primary labels
- #94a3b8 — Text Secondary: Body descriptions, inactive tabs, footer navigation links
- #64748b — Text Muted: Input placeholders, copyright notices, line numbers, and helper footnotes
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 28px heading, 48px display. Tracking -0.03em at display, 0 at body. The typographical voice is technical, confident, and unapologetically engineered. Inter delivers surgical precision at tight tracking (-0.03em) in the display tier, conveying speed and modern SaaS maturity, while JetBrains Mono grounds the code sample in true terminal ergonomics. The combination communicates that this outbound tool is powered by real infrastructure rather than marketing fluff.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly through luminous layering rather than heavy multi-axis drop shadows. A subtle diffused purple underglow (#4338ca with 60px blur at 25% opacity) grounds the code terminal card against the dark midnight backdrop (#090d16). Hairline borders (1px solid #1e293b) provide explicit edge definition separating cards and inputs without volumetric skeuomorphism.
IMAGERY
No photographic imagery or lifestyle graphics are present; the product itself acts as the hero visual. Visual interest is driven by high-fidelity rendered software artifacts—the developer code console, live terminal responses, and telemetry uptime bar graphs. Introducing illustrative doodles, stock portraits, or 3D clay graphics would instantly compromise the developer-grade technical rigor.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the interactive API Code Terminal paired with its underlying response telemetry and diffuse violet under-glow. It bridges developer credibility with enterprise sales by juxtaposing functional cURL syntax directly against bottom-line ROI metrics. To use it correctly, ensure live response metadata (such as 200 OK and execution ms) appears in the console footer; removing these technical details reduces the component to a generic marketing box.
MUST
- Reserve #635bff purple strictly for the primary CTA, brand mark, and headline keyword accents.
- Render code syntax exclusively in monospace with muted line numbers in #475569.
- Keep card surfaces at #0d131f with subtle 1px border #1e293b to preserve depth without heavy dropshadows.
- Pair numeric stat callouts with muted comparative labels below (e.g., 'vs industry avg 8%').
AVOID
- Never use generic rounded borders exceeding 12px on structural cards.
- Do not saturate the interface with colored gradient cards; the dark canvas must dominate 85% of viewport.
- Avoid standard high-opacity white drop shadows; use directional violet back-glows sparingly.
- Never omit line numbers or HTTP status codes from the API terminal presentation.
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 中尝试 
