Design a dark-mode website section: precision dark-mode engineering cockpit illuminated by high-contrast spectral accents and dense tabular instrumentation.
LAYOUT
The section opens with a centered header module featuring a pill chip, 36px title, and descriptive subtitle. Below sits a balanced 3-column asymmetric cockpit layout: the left column houses health KPIs and workflow steppers (240px wide), the dominant center column holds the main test workbench (580px wide), and the right column stacks hardware feeds, alerts, and active teammates (260px wide).
PALETTE (use these exact hex values)
- #080c14 — Canvas Dark: deepest background layer for the entire view frame
- #0e141f — Card Surface: fill color for all floating dashboard cards and module containers
- #141e2d — Surface Highlight: nested backgrounds, pills, table rows hover, and status tags
- #1e293b — Border Subtle: 1px structural borders dividing cards, tables, and workflow steps
- #10b981 — Signal Green: pass rates, healthy status indicators, sparklines, and success buttons
- #38bdf8 — Signal Cyan: RF spectrum trace waveform, badge outline, active tabs, and workflow icons
- #f59e0b — Signal Amber: marginal test thresholds, warning badges, and alert icons
- #ef4444 — Signal Red: critical failure markers, out-of-limit breaches, and donut fail slices
- #ffffff — Text Primary: primary titles, key performance metrics, and focused numeric readouts
- #94a3b8 — Text Muted: subheadings, table column headers, timestamps, and secondary labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 24px heading, 36px display. Tracking -0.02em at display, 0.04em at caption caps. The typography is clinical, authoritative, and frictionless, evoking aerospace and telecommunications laboratory hardware. Inter or Plus Jakarta Sans provides clean geometric clarity with open counters that remain readable at dense 11px and 12px scales. Numbers must be rendered with tabular figures to align perfectly across instrument rows.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is rendered entirely without diffuse drop shadows. Elevation is established via two discrete slate tones (#080c14 base, #0e141f cards) demarcated by 1px stroke borders (#1e293b). Inner interactive chips and active states sit one layer higher (#141e2d) with faint translucent glow on active accents.
IMAGERY
Vector-only graphical treatment dominated by real-time instrumentation: frequency spectrum traces, segmented donut charts, and circuit-like step trees. No photographic imagery or decorative human illustrations are permitted. Visual interest stems purely from glowing waveform lines and technical iconography.
SIGNATURE DETAIL — the thing that makes this design itself
The vivid cyan RF spectrum snapshot graph set alongside the segmented green-yellow-red donut gauge inside a single unified cockpit card. It instantly communicates deep laboratory RF hardware intelligence rather than generic web SaaS. Misusing it by replacing the waveform with a smooth generic marketing spline destroys its technical credibility.
MUST
- Anchor cards with an exact 18px corner radius and a 1px border (#1e293b).
- Use green (#10b981) exclusively for positive health metrics, passes, and online states.
- Render all delta values and test numbers using tabular or monospaced font features.
- Group related cards into a 3-column asymmetric layout with consistent 16px gaps.
AVOID
- Do not introduce light-themed cards or white backgrounds into the grid.
- Never use soft drop shadows; separate planes strictly through border contrast (#1e293b).
- Do not use saturated primary red or yellow for neutral decorative purposes.
- Avoid large bubbly border-radii on inner widgets exceeding 12px.
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 
