Design a dark-mode website section: dense obsidian marketing canvas framing a surgical, high-density light telemetry dashboard for industrial automation.
LAYOUT
The section adopts an asymmetric split-screen layout spanning up to 1440px wide. The left column occupies approximately 38% width, presenting the product badge, main headline, explanatory copy, a three-item vertical feature stack, and primary CTA buttons. The right column occupies 62% width, presenting an edge-to-edge enclosed application window containing a left navigation rail, 4-column KPI strip, live multi-channel charts, computer vision inspector, and terminal log.
PALETTE (use these exact hex values)
- #0B0F19 — Obsidian Canvas: Dominant background for the marketing hero section and icon containers
- #F8FAFC — Dashboard Shell: Background canvas for the embedded product preview panel
- #FFFFFF — Card Surface Light: Surface for telemetry cards, metric tiles, and image inspector containers
- #0F172A — Terminal Slate: Background for raw JSON model output and dark widget footer
- #2563EB — Primary Arc Blue: Primary CTA button background, key sparklines, and active focus states
- #06B6D4 — Telemetry Cyan: Sensor stream line, weld pool outline annotation, and positive delta values
- #EC4899 — Telemetry Magenta: Feature icon accent and anomaly event markers in telemetry charts
- #9333EA — Sensor Purple: Predicted strength sparkline and multi-channel telemetry curve
- #FFFFFF — Text Primary Light: Hero headline text and primary CTA label on dark canvas
- #94A3B8 — Text Muted Slate: Body copy and feature subtext on dark canvas
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px subheading, 20px heading, 28px heading-lg, 44px display. Tracking -0.02em at display, 0 at body. The typographic tone is ultra-modern, clinical, and industrially precise. Utilizing a geometric/neo-grotesque sans-serif like Inter ensures crisp readability across both large display titles (-0.025em tracking) and dense numerical telemetry (tabular figures, compact line heights). For complete visual fidelity, Inter or Plus Jakarta Sans should be selected, with system fallbacks strictly limited to modern geometric sans typefaces.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 28px gaps, 80px between sections, 1440px container, comfortable density.
DEPTH
Depth is created primarily through color inversion rather than physical drop shadows. The outer dark slate field provides zero elevation, while the embedded software UI acts as a sharply framed luminous window with a crisp 1px border (#1E293B) and a barely perceptible 24px soft diffuse ambient glow. Inside the dashboard, cards utilize pure white against a light gray base with 1px borders (#E2E8F0) to delineate hierarchy cleanly.
IMAGERY
Imagery is strictly utilitarian and technical. It includes a high-magnification optical/thermal cross-section of a weld pool with an overlaid vector contour segmentation mask in cyan, accompanied by real-time time-series wave plots and dot-matrix timeline anomalies. Avoid stock photography, human lifestyle portraits, or abstract 3D marketing illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the 'light console framed by deep dark space' treatment: an obsidian industrial marketing canvas embedding an ultra-crisp, fully functional light-mode telemetry suite featuring real sensor waveforms, segmented computer vision scans, and an integrated raw JSON terminal block. It instantly communicates enterprise hardware-grade intelligence rather than generic B2B SaaS.
MUST
- Retain the sharp contrast between the dark #0B0F19 hero background and the pristine white dashboard card.
- Use color exclusively for functional categorization across chart series, anomaly classes, and active tabs.
- Keep metric typography high-density: numbers should be large (24px+) while supporting labels remain compact (11px-12px).
- Ensure feature icons on the dark canvas sit within 48x48px rounded dark-slate containers (#161F33).
AVOID
- Do not convert the embedded dashboard into a dark theme; the stark light-on-dark contrast is essential to this design.
- Do not use blurry drop shadows; maintain crisp borders and tight, low-opacity ambient diffusion.
- Do not allow sparkline heights to exceed 32px inside individual KPI cards.
- Do not wrap more than three telemetry value items on the marketing narrative column.
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 中尝试 
