Design a dark-mode website section: deep-navy simulation terminal illuminated by neon telemetry and crisp data-driven engineering diagnostics.
LAYOUT
The layout is divided into two distinct zones: a two-column upper section and a 4-column metric grid below. In the top half, the left column holds narrative copy and a 4-row feature stack, while the right column stacks the code terminal and pipeline process card. The bottom half anchors the section with four uniformly sized quantitative metric scorecards. A centered trust note sits beneath the grid as a grounding footer.
PALETTE (use these exact hex values)
- #060913 — Canvas Void: Deepest background surface behind all modular panels and layout containers.
- #0A101D — Panel Surface: Background fill for cards, code viewports, and statistical modules.
- #0E1726 — Nested Node: Background fill for interactive inner workflow steps and pipeline stages.
- #162338 — Boundary Stroke: Subtle 1px border framing all panels, inner steps, and divider elements.
- #3B82F6 — Electric Azure: Headline gradient stop, key metric numbers, and active system stage icons.
- #34D399 — Telemetry Mint: Success badges, green status dots, and positive delta pill backgrounds.
- #F8FAFC — Text Stark: Primary headings, step titles, and high-emphasis interface values.
- #64748B — Text Dim: Secondary body copy, line numbers, card labels, and subtle microcopy.
- #FB7185 — Code Syntax Coral: Parameter arguments, integers, and specific function values in code block.
- #C084FC — Code Syntax Purple: Import and invocation keywords inside the simulated developer evaluation terminal.
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 32px heading-lg, 44px display. Tracking -0.02em at display, 0.08em at uppercase captions. The typography balances crisp geometric legibility with developer-centric discipline. Inter provides clean, neutral authority for product claims, while JetBrains Mono injects strict engineering credibility into the evaluation console and captions. If replacing, choose Geist Sans alongside SF Mono to retain the precise tabular rhythm and compact x-height.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 9999px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Elevation is achieved entirely without drop shadows, using 1px stroke boundaries (#162338) and subtle lightness shifts in background fills (#060913 to #0A101D to #0E1726). A faint blue ambient glow is localized only behind critical text phrases to suggest luminescence rather than height. The hierarchy remains intentionally planar and technical, mimicking an engineer's diagnostic console.
IMAGERY
There are no photographic assets or photorealistic renders present in this design. Visual interest is generated purely through clean vector line iconography (2px stroke width, rounded caps) and code syntax tokens. Any decorative illustration or organic human photography would severely undermine the cold, rigorous technical aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-tone hero headline paired directly with the multi-step connected pipeline card featuring thin directional arrow glyphs between glowing outline nodes. It is commonly misused by applying gradient fills to all text or omitting the connective arrows between sequential operational steps.
MUST
- Maintain strict 1px borders in #162338 on all cards to preserve architectural boundary definition.
- Reserve #34D399 mint green solely for positive validation, tests passing, and favorable metric deltas.
- Use uppercase 11px text with 0.08em letter-spacing for all technical overlines and card headers.
- Apply electric blue #3B82F6 to primary numerical metrics to guarantee instant visual hierarchy.
AVOID
- Never introduce bright solid white backgrounds or heavy drop shadows anywhere in the interface.
- Do not use generic saturated reds; maintain dark navy-tinted tones for any negative indicators.
- Avoid omitting 1px boundary strokes on cards; flat borderless cards will collapse visual structure.
- Never style body paragraphs in pure white; restrict #FFFFFF strictly to titles and hero metrics.
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. Try in DraPub 
