Design a dark-mode website section: precise cybernetic routing diagram floating quietly inside a deep midnight command matrix.
LAYOUT
The section is arranged in a stacked, highly structured rhythm. Top area features a left-aligned hero header alongside a horizontal four-card process progression strip. Below, the main workspace splits into an asymmetrical three-column grid: a left integration drawer (approx. 25% width), an expansive central interactive diagram (approx. 50% width), and a right column stacking an incident feed and security KPI card.
PALETTE (use these exact hex values)
- #06090e — Canvas Midnight: Deepest background surface for the entire viewport.
- #0d131f — Surface Card: Primary surface fill for modular dashboard cards and step containers.
- #121a2b — Surface Subdued: Inner tile background for integrations, pill tags, and secondary panels.
- #1b2436 — Border Subtle: Structural 1px boundary stroke around cards, tiles, and separators.
- #0088ff — Signal Cyan: Primary brand accent, active step badges, and incoming telemetry glow.
- linear-gradient(135deg, #0052cc 0%, #00b4d8 100%) — Hexagon Core Glow: Central orchestration engine fill and outer luminous bloom.
- #10b981 — Mitigation Emerald: Resolved incidents, active connector checkmarks, and sparkline trends.
- #f59e0b — Detection Amber: Warning dot for active phishing detection alerts.
- #ffffff — Text Pure: High-contrast headings, active metrics, and prominent iconography.
- #94a3b8 — Text Slate: Subheadings, descriptive body paragraphs, and timestamps.
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 28px display. Tracking -0.02em at display, 0.05em at caps. The typographic tone is authoritative, analytical, and uncluttered, driven by a neutral modern neo-grotesque sans-serif. The high-contrast pairing of heavy weights with lowercase tracking creates crisp clarity across dense technical schematics. Readily reproducible with Inter or Geist Sans.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered flatly via tonal contrast rather than cast drop shadows. Dark navy cards (#0d131f) separate from the deeper midnight canvas (#06090e) using thin 1px boundary lines (#1b2436). The only true atmospheric elevation is an emissive radial cyan glow behind the central hexagonal engine.
IMAGERY
Vector-based UI diagrams, clean monochrome software logos, and precise geometric schematic lines dominate the presentation. Natural photography, 3D photorealistic renders, and decorative stock illustrations are strictly absent. All visual assets emphasize precision instrumentation and network observability.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing central cyan hexagon acting as an orchestration nexus, uniting left-hand incoming telemetry pills with right-hand outbound dispatch actions via sleek curved conduits. To use it properly, keep the glow localized and maintain equal visual weight between incoming inputs and outgoing outputs. It is commonly ruined by adding cluttered text labels directly inside the illuminated core.
MUST
- Use a subtle 1px border (#1b2436) on all floating dark surfaces to prevent them merging into the background.
- Limit vivid cyan and blue glows strictly to the central orchestration node and active badges.
- Reserve green and amber status dots exclusively for real-time security state alerts.
- Maintain high typographic contrast: #ffffff for primary titles and #94a3b8 for descriptions.
AVOID
- Never use pure black (#000000) for card surfaces; maintain the rich #0d131f midnight tone.
- Do not saturate entire card backgrounds with gradients; keep gradients restricted to inner glow accents.
- Never mix serif typefaces into technical labels or KPI metrics.
- Avoid thick borders (>1px) around dashboard containers or nested integration tiles.
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 中尝试 
