Design a dark-mode website section: stark white enterprise telemetry cards suspended against an ink-black runtime canvas.
LAYOUT
The section follows a rigid asymmetric two-zone master grid within a 1280px wrapper. The left column stacks the display header, explanatory paragraph, and a connected four-step vertical navigation stepper. The right expanse splits into a large central execution flow canvas alongside a 2x2 grid of modular Bento feature cards, capped by a full-width enterprise ribbon at the bottom.
PALETTE (use these exact hex values)
- #030712 — Deep Space Void: Base canvas background color encompassing the entire section
- #ffffff — Luminous Card Surface: Dominant background for interactive walkthrough cards, flowboards, and metric panels
- #0a101d — Dark Slate Tile: Background for inactive vertical stepper cards and docked bottom compliance bar
- #0c111c — Console Terminal Black: Background for embedded code editors, log viewers, and active runtime flow nodes
- #38bdf8 — Active Cyan Border: Indicator border and accent glow for selected steps and primary connections
- #10b981 — Live Emerald: Live run status pills, success badges, checkmarks, and positive metric sparklines
- #f59e0b — Warning Amber: Log warning chip labels and intermediate state indicators
- #f8fafc — Primary Canvas Text: Main section headlines, display titles, and prominent white text on dark surfaces
- #94a3b8 — Muted Slate Text: Subtext and descriptions positioned over the dark background canvas
- #0f172a — Primary Card Text: Headings, titles, and primary numbers placed inside white cards
TYPOGRAPHY
Typeface Inter (or Geist Sans, -apple-system, system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 36px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is uncompromisingly precise, clean, and developer-centric. Inter or Geist Sans provides a neutral neo-grotesque foundation that reads with software-documentation authority, while Geist Mono enforces a strict command-line aesthetic for runtime logs and variables.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through stark surface color polarity rather than dramatic blur shadows. Pure white #ffffff surfaces stand out aggressively against the deep dark-slate #030712 canvas. Inside white cards, subtle 1px border strokes (#e2e8f0) and nested dark surfaces (#0c111c) establish depth hierarchy.
IMAGERY
This interface avoids photographic imagery entirely, relying on programmatic system artifacts. Visual language is constructed from SVG node flow diagrams, vector line sparklines, terminal code blocks, and crisp line icons. Any photography or abstract illustrative 3D shapes would corrupt the engineering-grade telemetry tone.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the 'Inverted Studio' motif: deploying brilliantly illuminated pure-white presentation cards directly onto an ink-black backdrop, then embedding dark IDE consoles within those white cards. Designers frequently misuse this by making the cards semi-transparent or dark grey, completely sacrificing the crisp editorial punch of the white-on-black polarity.
MUST
- Place code blocks and dark console views inside crisp white cards to preserve high visual contrast.
- Use solid white #ffffff exclusively for primary data display cards and interactive flowboards.
- Keep connector lines between flow nodes thin (1px) in slate grey with directional arrows.
- Limit live execution indicators to 8px pulsing green or cyan dots.
AVOID
- Do not use transparent or dark background styling for the main execution and walkthrough cards.
- Do not let active border cyan exceed 1.5px thickness or bleed into heavy drop shadows.
- Do not mix rounded icons with sharp, zero-radius card containers.
- Never replace monospaced fonts in the environment variable and log widgets with sans-serif.
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 中尝试 
