Design a dark-mode website section: tactical developer infrastructure anchored in midnight slate, luminous indigo accents, and particle-grade telemetry.
LAYOUT
The hero uses an asymmetric two-column grid at desktop: the left 45% houses the category pill, 56px headline, body intro, CTAs, and compliance checks. The right 55% hosts the dual-pane code and platform console overlaying a soft particle cloud. Directly underneath sits a four-column grid of equal-width metric cards, anchored at the bottom by an enterprise vertical index.
PALETTE (use these exact hex values)
- #050814 — Canvas Void: Primary page background creating deep cosmic contrast across all hero modules.
- #080E1E — Surface Container: Background fill for terminal windows, architectural diagrams, and bottom metric cards.
- #1E293B — Subtle Outline: Fine 1px perimeter stroke bounding containers, cards, and interactive segmented controls.
- #3B82F6 — Electric Indigo: Primary action button backgrounds, verification checkmark pills, and diagram focal nodes.
- linear-gradient(90deg, #38BDF8 0%, #818CF8 50%, #C084FC 100%) — Header Gradient: Decorative focal gradient applied specifically to emphasized title text like 'Fortune 500s.'
- #34D399 — Telemetry Emerald: Status indicator dot and response code badges inside the terminal view.
- #FFFFFF — Text Primary: High-contrast headings, active navigation tabs, and primary numerical metric values.
- #94A3B8 — Text Muted: Body copy, supporting metadata descriptions, inactive navigation links, and terminal comments.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 24px subheading, 36px heading, 56px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, highly disciplined, and engineering-first. The neutral geometric sans conveys enterprise stability, while the monospaced terminal type communicates raw developer transparency. For open-source execution, pair Inter or Geist for UI copy with JetBrains Mono for all terminal instances.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through luminosity and layered line work rather than blurred cast shadows. Surface levels 0 and 1 are differentiated by a 1px perimeter stroke (#1E293B) and subtle interior gradient fills. Ambient particle glow in deep blue and purple behind the console provides atmospheric separation from the flat canvas.
IMAGERY
Visual assets are strictly architectural and algorithmic: syntax-highlighted JSON/cURL blocks, system node wiring diagrams, and volumetric particle dust. Photorealistic people, lifestyle imagery, and whimsical 2D illustrations are completely forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated terminal-plus-architecture dual console backed by an ethereal blue-magenta particle plume. To deploy it authentically, place interactive request tabs on the left and node connections on the right, keeping both inside a unified 16px bordered chassis. Never replace the architectural diagram with an ungrounded abstract illustration.
MUST
- Use solid white (#FFFFFF) only for primary headings, prominent metrics, and key CTA labels.
- Pair the terminal mock directly with real architectural nodes to prove tangible technical capability.
- Keep card perimeters thin and crisp using 1px borders in slate-800 (#1E293B).
- Apply the cyan-indigo gradient sparingly, confining it strictly to the primary punchline title text.
AVOID
- Never apply high-opacity drop shadows; rely on 1px borders and surface color shifts for depth.
- Do not saturate container backgrounds; cards must stay within the near-black #080E1E gamut.
- Avoid generic stock imagery or illustrative characters in place of the live technical console visual.
- Never use plain sans fonts for code responses; always enforce a clean monospaced font.
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 中尝试 
