Design a dark-mode website section: precision devtools cockpit glowing with chartreuse telemetry nodes against pitch-black glass.
LAYOUT
The composition uses an asymmetric Bento grid anchored on the left by an introductory headline stack with pill eyebrow. The upper deck features a wide pipeline architecture diagram flanked by stacked telemetry stat cards on the far right. The lower deck aligns four evenly proportioned capability panels highlighting setup, automation, review, and final business outcomes.
PALETTE (use these exact hex values)
- #06090e — Canvas Deep: Global background floor upon which floating dark panels rest
- #0b111a — Panel Background: Background fill for all Bento grid cards and pipeline containers
- #080d14 — Panel Inset: Recessed containers like terminal blocks and table rows
- #1a2638 — Card Stroke: 1px hairline borders demarcating container boundaries
- #6ee755 — Signal Green: Highlight compression stats, sparkline gains, active nodes, and savings numbers
- #38bdf8 — Electric Cyan: Latency callouts, step sequence badges, and pipeline connector icons
- #f8fafc — Text Primary: Headings, primary quantitative figures, and active labels
- #64748b — Text Muted: Secondary explanations, pipeline sub-labels, and metadata captions
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Text,system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 44px display. Tracking -0.03em on display, 0em on body. The typographic tone is ultra-engineered, surgical, and confident. A neutral sans-serif (Inter) delivers high structural density in the UI headers, while monospace characters ground the feature sets in authentic developer terminal syntax. Licensing requires open-source or system fonts like Inter and JetBrains Mono.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through luminance layering and 1px border contrast rather than drop shadows. Surface level 0 (#06090e) sets the floor, while level 1 panels (#0b111a) float above with fine stroke outlines (#1a2638). Inset code windows and tables drop down to level 2 (#080d14) to suggest etched-in viewports.
IMAGERY
Visual elements are limited to crisp isometric vector cubes with neon emissive facets and minimalist SVG node diagrams. Photography is completely absent. Any realistic human imagery or hand-drawn decorative art would compromise the technical developer-tool aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal pipeline flow with dotted drop-pins connecting high-level logic nodes down to raw vs compressed data pills. It directly translates technical architecture into a visual compression proof-point. To keep it authentic, connect the dotted drop lines directly to rounded pill chips showing exact data numbers.
MUST
- Keep all container borders strictly at 1px solid #1a2638 without heavy outer drop shadows.
- Use chartreuse green (#6ee755) exclusively for efficiency gains, positive stats, and compressed payloads.
- Maintain monospace typography for any string resembling code, logs, ports, or raw byte counters.
- Use numbered badge counters (1, 2, 3...) to establish visual reading order across disparate Bento panels.
AVOID
- Do not introduce bright saturated backgrounds; all surface depth must remain sub-15% luminance.
- Never use generic colorful gradients across text headings; display type must remain solid crisp white.
- Do not drop border lines on cards; the hairline boundary is mandatory against the dark void.
- Avoid mixed card radii; consistently apply 16px to primary outer Bento blocks.
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 中尝试 
