Design a light-mode website section: engineered precision where chalk-white surfaces meet cad wireframes and a glowing dark-mode telematics hud.
LAYOUT
The hero section uses an asymmetrical two-column layout within a 1360px container. The left 40% column carries the category eyebrow, stacked 3-line display headline, supporting paragraph, CTA button pair, and bottom trust indicators. The right 60% is dedicated to the expansive isometric factory render, which anchors the dark telemetry floating card slightly overlapping the center-right machinery.
PALETTE (use these exact hex values)
- #FBFBFA — Factory Canvas: Dominant page background creating an austere, architectural daylight backdrop across all sections
- #18181B — Console Black: Background for the floating Walter Command telemetry card and primary interaction buttons
- #FFFFFF — Machinery White: Surface for the secondary navigation button and floating metric micro-badges
- #121316 — Carbon Text: Primary display headline, navigation links, and structural high-contrast text
- #666D77 — Engineering Slate: Subordinate body copy, metadata labels, and inactive HUD table captions
- #E14337 — Telemetry Crimson: Eyebrow section titles, logo dot accent, and urgent telemetry status indicator dots
- #2F68F6 — Sensor Blue: Waypoint connection nodes, dotted orbital factory vectors, and data coordinate pills
- #22C55E — Operational Green: Real-time 'Live' execution state pills and positive trust milestone check indicators
TYPOGRAPHY
Typeface Inter Display (or General Sans, SF Pro Display, Neue Haas Grotesk), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 18px body-lg, 20px subheading, 36px heading, 62px display. Tracking -0.03em at display, 0 at body. The type voice communicates uncompromising industrial competence and computational precision. The display grotesque handles complex operational headlines with solid authority, while the technical monospaced accents echo machine interfaces and terminal displays. For open-source implementations, Inter paired with JetBrains Mono provides an exact aesthetic and proportional match.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 112px between sections, 1360px container, airy density.
DEPTH
Depth is created using optical juxtaposition rather than heavy dropped blur filters. The light background recedes, allowing the white metric badges with faint 1px hairline borders to float above the 3D isometric CAD schematic. The centerpiece Walter Command HUD uses a dense, low-blur black shadow (0 16px 32px rgba(0,0,0,0.12)) to physically hover in front of the factory infrastructure.
IMAGERY
The visual focal point is a hyper-detailed, isometric architectural CAD render of an automated factory floor with robotic arms and conveyor belts. Rendered in monochromatic chalky white and technical gray with precise structural wireframes, it incorporates delicate blue sensor trajectories and point clouds. Photorealistic human photography or decorative marketing blobs would completely undermine the high-tech operational credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature move is the dark telematics HUD hovering directly over an intricate, monochrome isometric CAD model of automated industrial hardware. Pinned sensor nodes branch out via dashed orbital vectors into micro-metric cards, instantly conveying that the AI software possesses physical, spatial command over the physical factory floor.
MUST
- Anchor primary headlines in deep black (#121316) with tight negative letter-spacing for structural authority.
- Use uppercase monospaced labels with 0.1em tracking exclusively for category tags and telemetry metadata.
- Keep background tones strictly in warm daylight off-white (#FBFBFA) to let the isometric CAD drawing breathe.
- Confine vibrant color accents (red, blue, green) to indicator dots, nodes, and live status badges.
AVOID
- Never introduce saturated, full-bleed gradient backgrounds; surfaces must remain technical and matte.
- Do not round card corners beyond 8px; organic or pill-shaped containers destroy the engineering aesthetic.
- Never set running body paragraphs in monospaced fonts; reserve monospace strictly for eyebrows and code tags.
- Avoid colorful headline text; keep editorial copy strictly in #121316 and #666D77.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
