Design a dark-mode website section: dense developer telemetry in obsidian space, transforming subsurface geological chaos into electric neon precision.
LAYOUT
The header establishes brand identity with a micro-subtitle on the left and utility links anchored by a right-aligned CTA. Below, the hero splits into two distinct halves: a left-aligned 5-line typography stack with quick stats, and an expansive right-aligned 'Before vs. After' dataflow engine. The bottom is anchored by a segmented 4-column capability tray that grounds the entire section within a single viewport.
PALETTE (use these exact hex values)
- #04070C — Obsidian Base: Deepest canvas background behind all hero panels and typography.
- #090E17 — Telemetry Surface: Background for code terminal cards, data nodes, and lower feature pill containers.
- #22D3EE — Electric Cyan: Primary highlight for hero title punch, CTA pill outline, and AI flow streams.
- #F87171 — Faded Crimson: Semantic status color for legacy manual processes, failure states, and before-state headers.
- #34D399 — Signal Green: Success badges, active status dots, and final drill validation confirmation pills.
- #1E293B — Ghost Border: Hairline structural strokes outlining cards, divider rules, and dormant button states.
- #F8FAFC — Primary Text: Headline text, high-value metrics, code literals, and prominent interactive labels.
- #94A3B8 — Muted Text: Body paragraphs, code keys, inactive navigation links, and parameter descriptions.
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 56px display. Tracking -0.03em display, 0 body. Cold, empirical, and mission-critical. The combination of Inter's disciplined geometric curves with JetBrains Mono's tabular structure speaks to enterprise software developers and technical geologists, prioritizing absolute functional clarity over corporate friendliness.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 6px, buttons 9999px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1360px container, tight density.
DEPTH
Depth is created through luminescence rather than drop shadows. Surface layers float on #04070C, delineated by 1px subtle strokes (rgba(255, 255, 255, 0.08)) and accented by localized cyan back-glows (0 0 32px rgba(34, 211, 238, 0.15)) along the active right panel.
IMAGERY
Imagery is strictly technical: false-color subsurface spectrographic heatmaps, point clouds, and topological particle flows. Photography of real-world mining equipment or generic human office scenes would shatter the high-precision deep-tech illusion.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal Particle Convergence Conduit: a network of fine crimson lines collapsing from manual workflow cards into a single glowing cyan thread that powers the API response terminal.
MUST
- Use uppercase 10px monospace tracking for before-and-after operational headers.
- Restrict the electric cyan accent (#22D3EE) strictly to automated, AI-driven output artifacts.
- Enclose all telemetry and code data in dark container surfaces (#080D15) with subtle hairline borders.
- Maintain high line-contrast in the central funnel: crimson dispersion converging to unified cyan light.
AVOID
- Do not use full-surface solid neon fills; keep colors as luminous linear strokes and glows.
- Do not allow border radiuses on telemetry nodes or cards to exceed 10px.
- Do not mix rounded sans-serif typefaces into the monospace terminal or data readouts.
- Do not use saturated yellow, purple, or warm brand colors outside the red-cyan semantic contrast.
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 中尝试 
