Design a dark-mode website section: mission-critical developer infrastructure rendered in deep slate, crisp cyan glows, and clinical typography.
LAYOUT
The layout uses a 1280px max-width container with a two-column hero section split roughly 52% to 48% between copy/CTAs on the left and the interactive API console on the right. Directly below the hero CTAs sits a horizontal row of compliance verification points. A full-width hairline rule delineates the footer area, which organizes into a six-column grid: brand synopsis, four product/solution link columns, and a dedicated newsletter input card. The absolute bottom shelf houses an integrated system status indicator strip alongside standard legal credits.
PALETTE (use these exact hex values)
- #06090e — Canvas Void: Primary background canvas for the entire page viewport
- #0d131a — Panel Slate: Background fill for terminal code sandbox and elevated containers
- #1e293b — Border Hairline: Hairline separator lines, panel borders, and button outlines
- #2563eb — Electric Cobalt: Primary CTA button backgrounds and highlighted brand text spans
- #38bdf8 — Sky Brand: Logo icon accents, interactive cursor indicators, and hover glows
- #10b981 — Status Emerald: Uptime indicators, HTTP 200 badge, and compliance checkmark pills
- #f8fafc — Text Primary: Primary headings, active terminal labels, and high-emphasis text
- #94a3b8 — Text Muted: Supporting descriptions, terminal code strings, and secondary labels
- #64748b — Text Dim: Footer column links, system status metadata, and copyright notices
TYPOGRAPHY
Typeface Inter (or Geist Sans,Plus Jakarta Sans,system-ui), weights 400/500/600/700. Sizes 11px caption, 12px subheading, 13px body-sm, 14px body, 16px body-lg, 20px heading, 48px display. Tracking -0.03em at display, -0.01em at body, 0.05em at caps. The typographic tone is authoritative, clinical, and developer-first. Using a modern neutral sans-serif like Inter alongside a precise coding mono creates an immediate association with reliable API platforms like Stripe or Supabase. If licensing constraints apply, Geist Sans and Geist Mono serve as exact functional substitutes.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through surface luminance and border definition rather than blurred box shadows. The canvas sits at pure dark #06090e, elevated cards sit at #0d131a, and active elements are outlined with hairline #1e293b borders. Occasional soft colored glows emit from active emerald status pings and the primary blue CTA button.
IMAGERY
No photographic imagery is present. The visual weight is carried entirely by structural code artifacts: an authentic syntax-highlighted terminal sandbox displaying API JSON payloads and discrete SVG micro-icons (sparkles, terminal prompt, calendar, checkmarks, security locks). Imagery that features stock photos of doctors, attorneys, or physical courtrooms would severely degrade the high-velocity infrastructure tone.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated live System Status telemetry capsule dock anchored at the bottom edge. It combines terminal-grade server metrics (uptime percentage, encryption status, residency) into an organized set of emerald-pinged pill tags, transforming a standard static footer into an active operational dashboard.
MUST
- Use strict 1px solid #1e293b borders around all elevated panels and containers.
- Pair terminal command prompts and code blocks with JetBrains Mono at 12px or 13px.
- Reserve vibrant green (#10b981) exclusively for active uptime, HTTP 200 OK, and compliance checks.
- Maintain high contrast by setting display headlines in pure white (#f8fafc) with subtle blue text spans.
AVOID
- Never introduce warm colors like amber, orange, or crimson outside of error-state diagnostics.
- Avoid heavy drop shadows or skeuomorphic bevels; rely on 1px stroke boundaries and surface steps.
- Do not use non-monospace fonts inside code execution windows or status latency tags.
- Never allow primary CTA buttons to deviate from the core #2563eb cobalt blue tone.
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 中尝试 
