Design a dark-mode website section: a precision midnight terminal where enterprise infrastructure meets iridescent indigo intelligence.
LAYOUT
The page follows a structured technical narrative starting with a pinned utility navigation bar. Below, the hero section splits into an asymmetric 50/50 two-column layout: marketing arguments on the left and technical proof via pipeline and terminal on the right. Directly underneath spans a full-width beta announcement ribbon, leading the user towards enterprise validation and documentation.
PALETTE (use these exact hex values)
- #060913 — Midnight Base: deep background canvas underpinning the entire viewport layout
- #0D1322 — Container Obsidian: card and code console background creating first-level elevation
- #1E293B — Border Slate: hairline 1px borders delineating cards, buttons, and divider tracks
- linear-gradient(135deg, #4361EE 0%, #7209B7 100%) — Electric Indigo Gradient: primary call-to-action button fill and high-priority workflow highlights
- #10B981 — Operational Emerald: system status indicators, uptime verification badges, and confidence metrics
- #38BDF8 — Terminal Cyan: code strings, active tab highlights, and technical micro-accents
- #FFFFFF — Text Primary: h1 display headlines and high-priority interactive button labels
- #94A3B8 — Text Secondary: explanatory body copy, inactive navigation links, and parameter descriptors
TYPOGRAPHY
Typeface Inter (or Geist Sans,Plus Jakarta Sans,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 18px subheading, 24px heading, 52px display. Tracking -0.03em at display, 0 at body. The typographic tone is authoritative, disciplined, and engineering-centric. Pairing a high-density neo-grotesque like Inter with a crisp monospace creates an environment that feels like a production CLI dashboard. Teams should substitute Geist Sans or SF Pro if Inter is unavailable.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through structural luminosity rather than cast shadows. Background planes sit at #060913, elevated cards shift to #0D1322 with 1px translucent borders (#1E293B), and active elements emit faint ambient indigo radial glows.
IMAGERY
No photographic imagery is permitted; the visual language relies entirely on functional developer artefacts, clean line iconography, and a live syntax-highlighted code console. Faux abstract 3D shapes or generic stock illustration would contradict the technical developer aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated execution unit: a 4-step horizontal pipeline directly tethered to a tabbed API code terminal with dynamic inference confidence output. This component physically unites conceptual architecture with copy-paste code. It is commonly misused by turning it into a static screenshot instead of a structured, accessible DOM element.
MUST
- Use 1px subtle borders (#1E293B) on dark panels to construct depth instead of heavy box-shadows.
- Enforce monospace font exclusively for technical tokens, endpoints, code, and status metrics.
- Maintain strict left-aligned typographic hierarchy in the hero copy block.
- Apply the indigo-purple gradient sparingly, reserving it for primary CTAs and active states.
AVOID
- Never introduce pure black (#000000) surfaces; preserve the deep midnight navy (#060913) tone.
- Do not use high-saturation neon colors for body typography or secondary borders.
- Never make all workflow pipeline cards active simultaneously; only step two/three should shine.
- Avoid pill radiuses on major rectangular content cards or the code playground frame.
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 中尝试 
