Design a light-mode website section: precision-machined enterprise telemetry paired with crisp white-room technical typography across an organic split canvas.
LAYOUT
The page is structured as a two-phase asymmetric horizontal layout inside a 1360px container. The left 45% is dedicated to executive buyer messaging: branded breadcrumb, headline, narrative paragraph, 3 icon micro-cards, and a 4-stat metric strip. The right 55% houses the product engine: a dark viewport featuring job specs, real-time 3D part render, validation checklist, live terminal logs, and bottom pipeline stepper.
PALETTE (use these exact hex values)
- #ffffff — Canvas Light: Primary background for marketing copy, value props, and high-level platform metrics
- #0b101d — Cockpit Dark: Deep navy base canvas hosting CAD viewport, machine telemetry, and execution logs
- #111728 — Obsidian Surface: Semi-translucent dark card container background with fine stroke border
- #2563eb — Electric Cobalt: Brand icon mark, primary CTA fills, active timeline nodes, and heading gradient origin
- #7c3aed — Ion Violet: Terminal gradient color for highlighted headline emphasis and secondary metric accents
- #10b981 — Operational Green: Pill badge indicators, completed process tags, and active system status beacons
- #09090b — Carbon Ink: High-contrast headline and numerical display typography on light backgrounds
- #64748b — Engineering Slate: Secondary specifications, metadata keys, card labels, and inactive pipeline nodes
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 32px heading-lg, 54px display. Tracking -0.03em at display, 0 at body. The typographic tone is authoritative, hyper-clean, and technically precise. Using a neo-grotesque sans like Inter with tight negative tracking gives the headlines structural mass, while JetBrains Mono injects unpretentious shop-floor authenticity into the data displays.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 72px between sections, 1360px container, comfortable density.
DEPTH
Depth is handled strictly through chromatic split and luminance rather than heavy drop shadows. The white canvas is flat and paper-like with hairline borders, while the dark half simulates a technical cockpit using semi-translucent glass panels (#111728 at 85% opacity) over subtle blue radial backlights.
IMAGERY
The visual anchor is a hyper-realistic, photorealistic 3D rendering of a precision CNC-machined 6061-T6 aluminum pump housing. Lighting is clinical and directional with specular metallic highlights, floating within a CAD bounding box complete with colored Cartesian XYZ axes.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric organic split-canvas curve dividing a pristine editorial white pitch from an interactive dark-mode industrial machining cockpit. It visually proves the product promise: executive simplicity on the outside, hyper-complex autonomous engineering under the hood.
MUST
- Reserve the vivid gradient (#2563eb to #7c3aed) strictly for the hero emphasis phrase.
- Use JetBrains Mono exclusively for machine output, code logs, and engineering tolerance readings.
- Maintain high-contrast white space on the marketing half to balance dark telemetry density.
- Style complete status pills with pill-radius (999px) and subdued green stroke (#10b981).
AVOID
- Never introduce colorful saturated backgrounds on the left-hand editorial canvas.
- Do not use box shadows on light-mode cards; use delicate hairline borders instead.
- Avoid centering body copy or metrics; all content adheres to left-aligned grids.
- Do not remove the organic curved divider between the light and dark viewports.
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 中尝试 
