Design a dark-mode website section: surgical developer infrastructure framed by high-contrast daylight cards and obsidian command surfaces.
LAYOUT
The page enforces an asymmetric dual-pane hero enclosed in a massive 1280px card with 24px bottom radius resting over an obsidian canvas. Below the sheet, the layout transitions to a 6-column dark footer grid: brand identity occupies the left two columns, followed by three compact navigation stacks, and terminates with a dedicated newsletter signup module on the right.
PALETTE (use these exact hex values)
- #0a0f1d — Obsidian Ground: Deep structural chassis framing the page, powering the primary footer surface and global page backdrop.
- #ffffff — Pure White: Hero presentation canvas surface, input fills, and primary high-contrast foreground text against dark grounds.
- #0f172a — Telemetry Slate: Dark terminal container surface and high-priority headline text in light-mode regions.
- #1d63ff — Cobalt Blue: Primary interactive buttons, key brand highlights, text emphasis, and ambient backdrops.
- #10b981 — Success Emerald: Verification indicators, confidence status pills, API response badges, and real-time pass markers.
- #64748b — Slate Text Muted: Secondary marketing copy, trust item labels, and footer navigational links.
- #1e293b — Border Hairline: Subtle stroke lines for telemetry frames, code dividers, and dark-mode social tiles.
TYPOGRAPHY
Typeface Inter (or Geist Sans,Plus Jakarta Sans,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px heading, 48px display. Tracking -0.03em at display, 0.08em on uppercase eyebrows. The typographic tone is authoritative, analytical, and uncompromisingly precise. Inter provides tight geometric readability for enterprise claims, while JetBrains Mono injects strict engineering credibility into the inspector panel. For substitution, pair Geist Sans with Geist Mono to preserve identical tracking and visual density.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created structurally rather than skeuomorphically. The floating white hero card acts as a clean physical sheet overlapping the midnight canvas, while the terminal inspector uses a subtle 1px border (#1e293b) backed by a diffuse radial cyan-blue luminescence (40px blur, 20% opacity) to mimic an illuminated screen.
IMAGERY
Avoid abstract stock photography or human lifestyle imagery entirely. The visual asset vocabulary consists exclusively of high-fidelity developer artifacts: syntax-colored JSON payloads, real-time telemetry tables, API status codes (200 OK), and minimal outline glyphs.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the dual-tone display headline directly counterpointed against an illuminated dark code terminal that bleeds into the white card via an ambient radial blue aura. Recreate this by locking the first sentence to #0f172a, the conclusion to #1d63ff, and pairing it against a #0f172a card floating over an atmospheric box-shadow halo. Omitting the halo causes the terminal to sit flat and clinical.
MUST
- Retain the sharp contrast transition from the rounded white hero card to the obsidian footer.
- Split display titles into neutral slate for setup and cobalt blue (#1d63ff) for key value statements.
- Enclose developer inspector terminals in dark slate (#0f172a) with faint glowing cyan/blue backdrops.
- Use uppercase tracking (0.1em) exclusively for functional eyebrows and category metadata headers.
AVOID
- Do not fill the hero section background with dark color; it must remain crisp white (#ffffff).
- Never use fully saturated neon greens; stick strictly to controlled telemetry emerald (#10b981).
- Avoid pill-shaped roundings (999px) for buttons; the system demands deliberate 8px corners.
- Do not drop the dark console inspector card into pure white without its ambient blue halo.
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 中尝试 
