Design a dark-mode website section: precision dark industrial telemetry interface with high-contrast electric accents and rigorous structural alignment.
LAYOUT
The layout is divided into two primary zones within a 1200px container: a centered conversion CTA block stacked above an evenly distributed 4-column KPI metrics bar, followed by a multi-column footer. The footer arranges company identity and social pills on the far left, four navigational columns across the center, and an email capture card on the far right. A full-width horizontal divider neatly isolates the bottom legal bar.
PALETTE (use these exact hex values)
- #0A0F1D — Deep Midnight: Primary background canvas across hero CTA and footer regions
- #111827 — Dark Slate Surface: Background fill for input fields, metric badge containers, and social icon buttons
- #1E293B — Boundary Slate: Subtle hairlines, secondary button outlines, card borders, and horizontal footers
- #3B72FF — Signal Electric Blue: Primary action buttons, brand heading highlights, and submit arrows
- #22D3EE — Luminary Cyan: Icon fill and glowing stroke for uptime telemetry metrics
- #E879F9 — Luminary Magenta: Icon fill and border tone for alarm reduction telemetry metrics
- #A855F7 — Luminary Violet: Icon stroke and background tint for reliability stats
- #FFFFFF — Pure White: Hero headers, metric values, and primary button labels
- #94A3B8 — Muted Slate: Body copy, footer link labels, and secondary navigation links
- #64748B — Dull Charcoal: Legal copyright, privacy microcopy, and input placeholders
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 26px heading, 38px display. Tracking -0.02em at display, 0em at body. The typographical voice is technical, operational, and authoritatively calm. Utilizing a modern neutral sans-serif like Inter or Plus Jakarta Sans allows numerical metrics and technical terminology to read with extreme clarity without stylistic interference. The subtle negative tracking on large headlines lends an engineered precision appropriate for industrial OT software.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated through layered canvas darkness rather than physical drop shadows. Surface elevation 0 (#0A0F1D) acts as the foundation, while level 1 containers (#111827) use 1px slate borders (#1E293B) to define input and badge boundaries. Faint corner dot grids and subtle atmospheric lighting provide depth behind the CTA hero.
IMAGERY
No photographic imagery is present; the interface relies on abstract data-centric UI elements. Vector icons set inside glowing rounded badges represent operational data points (line chart, shield, cycle, checkmark). Any photographic replacement should be restricted to highly technical, desaturated industrial telemetry or hardware scenes.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the horizontal KPI strip featuring four multi-colored neon-bordered icon badges (cyan, magenta, sky blue, purple) flanking oversized metrics. This translates heavy industrial OT performance claims into immediate, digestible software telemetry.
MUST
- Use colored accent icons strictly within individual KPI metric pods to indicate telemetry diversity.
- Maintain high contrast by keeping primary titles pure white (#FFFFFF) against the dark navy background (#0A0F1D).
- Reserve the electric blue (#3B72FF) exclusively for primary interactions and key brand wordmarks.
- Separate major horizontal bands using subtle 1px slate hairlines (#1E293B) instead of drop shadows.
AVOID
- Never introduce saturated bright backgrounds; the canvas must remain deep midnight navy (#0A0F1D).
- Do not use heavy drop shadows or glow effects that reduce the clean industrial feel.
- Never make secondary buttons filled; keep them outlined with a 1px border (#1E293B).
- Avoid center-aligning footer navigation links; columns must be left-aligned under category headers.
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 
