Design a dark-mode website section: deep midnight industrial telemetry with sharp neon signals, volumetric blue light shafts, and coral heat triggers.
LAYOUT
The layout is split into two distinct tiers: an upper conversion hero and a lower footer matrix. The hero features an asymmetric split—left side hosts the display statement, descriptive paragraph, dual CTAs, and compliance bar, while the right holds an inline 4-card metric grid illuminated by background beam light. A 1px rule divides this from a 6-column site index anchored by the brand block on the far left and direct contact methods on the far right.
PALETTE (use these exact hex values)
- #02060f — Canvas Midnight: Deepest background layer across the entire viewport and footer base.
- #080e1a — Card Surface: Slightly elevated dark translucent fill for metric cards and form inputs.
- #1e293b — Surface Border: Subtle 1px boundary strokes on cards, input frames, badges, and footer divider.
- #2563eb — Electric Beam Blue: Volumetric background gradient sweep, keyword emphasis, and telemetry highlight.
- #eb4432 — Industrial Coral: Primary CTA button fill, logo mark, submit button, and critical metric count.
- #22c55e — Status Emerald: Compliance badge dot, status indicator, and efficiency percentage highlight.
- #ffffff — Text Pure White: Primary display headlines, brand wordmark, card labels, and CTA text.
- #94a3b8 — Text Muted Slate: Descriptive copy, subheadings, trust badges, and column category headers.
- #64748b — Text Dim Ash: Footer navigation links, card secondary footnotes, and copyright notice.
TYPOGRAPHY
Typeface Inter Display (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 48px display. Tracking -0.03em at display, 0 at body, 0.05em at caps. Technical, confident, and mission-critical. The tight letter tracking (-0.03em) and bold weights in the headline convey enterprise stability, while clean tabular figures give immediate credibility to industrial statistics.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through luminous optical background shafts rather than drop shadows. Translucent dark surfaces (#080e1a) reveal subtle blue radiance leaking from behind, while crisp 1px strokes (#1e293b) provide structural elevation against the infinite deep midnight backdrop.
IMAGERY
This interface avoids photorealistic human imagery, relying entirely on synthetic lighting atmosphere: a dynamic angled beam of deep blue light (#1d4ed8 to #3b82f6) cutting across the top right quadrant. Line-drawn 16px glyphs and geometric status indicators furnish the only graphical assets.
SIGNATURE DETAIL — the thing that makes this design itself
The angled electric-blue light shaft slicing behind translucent 16px metric cards, offset by a single contrasting word highlight in the headline and an industrial coral CTA.
MUST
- Use electric blue (#2563eb) strictly for ambient lighting shafts and headline emphasis words.
- Maintain 16px border-radius consistently on all metric display cards.
- Reserve vibrant coral (#eb4432) for primary conversion triggers and standout numeric values.
- Separate the CTA section and footer with a full-width 1px solid border (#111827).
AVOID
- Never use pure black (#000000); always keep the canvas tinted deep navy (#02060f).
- Do not add drop shadows; use 1px border strokes (#1e293b) to define boundaries.
- Avoid multi-color body text; reserve non-slate tints exclusively for metrics and badges.
- Do not round buttons beyond 8px; full pills are reserved exclusively for the status badge.
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. 在 DraPub 中尝试 
