Design a dark-mode website section: electric blue precision diagnostics engineered against deep midnight industrial control room canvases.
LAYOUT
The composition is a balanced two-column asymmetric split within an enclosing container. The left 50% contains the conversion funnel: audience pill, two-tone headline, body text, twin CTAs, security guarantees, and a quantitative proof bar. The right 50% visually substantiates the claim via a mobile app mockup tethered dynamically to a system topology tree and root cause analysis card.
PALETTE (use these exact hex values)
- #06090e — Canvas Midnight: Root background canvas providing high contrast for glowing interface nodes.
- #0b1220 — Panel Midnight: Background fill for telemetry cards, metric containers, and phone frame mockup.
- #1e293b — Subtle Border: Hairline structural boundary used on panels, device outlines, and node badges.
- #2563eb — Electric Cobalt: Primary action button fill and headline split color accentuating call-to-action.
- #0ea5e9 — Cyan Accent: Active node ring highlight and focused telemetry status stroke.
- #10b981 — Operational Emerald: Status pills indicating 'Online', checkmarks, and review star fills.
- #f59e0b — Alert Amber: Warning triangles on failing system components like Spindle Motor and VFD.
- #ffffff — Text Primary: High-contrast headings, primary button label, and major metric digits.
- #94a3b8 — Text Secondary: Descriptive body copy, subheadings, micro-labels, and metric qualifiers.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 48px display. Tracking -0.02em at display, -0.01em at body, 0.04em at caption. The typographic tone is authoritative, industrial, and hyper-competent. Crisp neo-grotesque sans-serif letterforms convey technical clarity, while deliberate display sizing and negative letter-spacing project modern AI software reliability. Inter or Plus Jakarta Sans are optimal drop-in fits.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through luminosity and layered planar surfaces rather than heavy drop shadows. Glowing cyan ambient light bleeds softly behind the mobile frame and schematic nodes, while panels use 1px #1e293b strokes against the deep #06090e base to demarcate boundaries.
IMAGERY
Visual elements are entirely UI-native and schematic: a high-fidelity vector mobile device container alongside an architectural hardware node tree. Photographic assets are absent; the aesthetic relies strictly on structured telemetry, diagrammatic flows, and crisp software simulation.
SIGNATURE DETAIL — the thing that makes this design itself
The split-color display headline ('Get machines back up. / Keep your lines moving.') paired directly with a tactile hardware node diagram wired into a mobile copilot mockup. It anchors industrial hardware reality to high-tech digital intelligence. Misuse occurs when the second line accent is rendered in generic gray or when node connectors turn solid instead of dotted.
MUST
- Use electric cobalt (#2563eb) strictly for primary CTA and the second headline phrase.
- Enclose social proof and stats inside a distinct bordered panel (#0b1220).
- Keep dotted connectors subtle (#1e293b) to maintain focus on glowing active nodes.
- Reserve green (#10b981) for online or verified status indicators and star ratings.
AVOID
- Never introduce warm red tones; use amber (#f59e0b) for all hardware alerts.
- Do not allow the right-hand schematic graphics to overpower left-hand text legibility.
- Avoid fully opaque white borders; stick to muted dark slate (#1e293b).
- Never center-align the left headline or paragraph; maintain strict left-alignment.
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