Design a dark-mode website section: deep navy obsidian terminal with cyan luminescent telemetry and precision manufacturing data overlays.
LAYOUT
The layout is governed by a strict desktop-first 12-column grid within a 1280px container. The top navigation is pinned horizontally with minimal link density and a secondary outlined CTA. The hero split places high-contrast typography and CTAs on the left 45% while a massive telemetry map anchors the right 55%, underscored by a three-column modular Bento grid below.
PALETTE (use these exact hex values)
- #030712 — Canvas Obsidian: Deepest canvas background framing the entire viewport
- #08101e — Panel Slate: Card container backgrounds with subtle dark blue cast
- #162338 — Subtle Border: 1px hairline border separating cards and control badges
- #38bdf8 — Glow Cyan: Leading stop in brand gradient, headline highlights, and active telemetry dots
- #34d399 — Emerald Mint: Trailing stop in brand gradient, status badges, and verification ticks
- linear-gradient(90deg, #38bdf8 0%, #34d399 100%) — Interactive Primary: High-visibility primary action button background and active headline text fill
- #fbbf24 — Signal Amber: Warning or metric icon accent for lightning speed indicator
- #ffffff — Text Pure: Primary headings, prominent metrics, and button labels
- #94a3b8 — Text Muted: Paragraph body copy, sub-labels, and inactive nav items
- #475569 — Text Dim: Line numbers in code blocks and subtle tertiary captions
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 32px heading, 54px display. Tracking -0.03em display, 0.05em micro-labels. The typographic tone is ultra-precise, institutional, and technical. Inter provides neutral, highly legible system architecture while JetBrains Mono injects developer-grade rigor into API demonstrations; alternatives like Geist or SF Pro maintain this exact calculated cadence.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered entirely through luminance stacking rather than diffuse drop shadows. Base canvas sits at the deepest near-black (#030712), Bento panels step forward via subtle #08101e fills and #162338 perimeter strokes, while active floating chips use elevated #0c172a fills and faint cyan glows behind active focal points.
IMAGERY
Visual assets consist of an intricate point-cloud vector globe rendered in glowing cyan particles with network arc splines linking nodes. Abstract blue-green mesh gradients bleed softly in peripheral corners, while line-art glyphs and tech-oriented terminal interfaces replace photorealistic human imagery.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-gradient headline highlight paired directly with a glowing cyan dot-matrix network map and embedded telemetry floating HUDs. It visually validates an AI infrastructure platform without relying on generic stock art or heavy illustration.
MUST
- Use strict 1px borders in #162338 on dark cards to define boundaries against the black canvas.
- Restrict vibrant cyan-to-green gradients exclusively to key brand emphasis, active buttons, and data highlights.
- Pair monospace code panels with standard sans-serif text to reinforce developer credibility.
- Utilize 11px uppercase track-widened typography for category eyebrow badges.
AVOID
- Do not introduce solid bright white backgrounds or light mode panels anywhere in the layout.
- Never use drop shadows with colored blurs that exceed the glow radius of the cyan accents.
- Avoid multi-colored icon badges; maintain cohesive emerald and cyan verification markers.
- Do not set large headings in lightweight font weights below 600.
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 中尝试 
