Design a light-mode website section: sterile cleanroom robotics meets precision hardware typography in high-key monochrome warmth.
LAYOUT
Header spans full width with logo left, horizontal menu center, and CTA button right. Main hero splits into an asymmetric two-column structure: left 45% accommodates status chip, primary display lockup, dual CTAs, and three-column metrics; right 55% hosts the robotic render. Anchoring the section bottom across the full container width is the 4-step progressive workflow tray followed by a centered security verification row.
PALETTE (use these exact hex values)
- #faf9f7 — Cleanroom White: Primary surface canvas background and base container fill
- #f2f1ee — Tray Surface: Bottom workflow stepper tray and pill badge backgrounds
- #18191b — Obsidian Body: Primary display headings, active buttons, and brand mark
- #5e6065 — Muted Slate: Body copy, nav links, and secondary metric labels
- #c94038 — Safety Red: Headline emphasis word 'pitstops' and brand logomark accent
- #2e8b57 — Status Green: Live status badge indicator dot and metric lead value
- #358ac4 — Telemetry Cyan: Metric figure callout for operation success rate
- #e4e2dd — Subtle Border: Dividers between metrics, pill chip borders, and secondary button outline
TYPOGRAPHY
Typeface Inter Display (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 22px heading, 54px display. Tracking -0.03em display, -0.01em body. The typographic tone is ultra-precise, engineered, and disciplined. Rendered in a neo-grotesque sans-serif with tall x-height and tight tracking, it speaks with the quiet authority of an advanced aerospace or industrial robotics manufacturer. Inter Display or Geist are ideal matches, providing mechanical legibility without decorative personality.
GEOMETRY & SPACING
Corner radii — cards 18px, links 999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1320px container, comfortable density.
DEPTH
Depth is almost entirely optical, relying on the physical rendering of the 3D robotic arms and vehicle rather than CSS box shadows. The interface elements float above the scene with hairline borders and tonal contrast (#f2f1ee on #faf9f7) instead of blurred drop shadows. The bottom workflow tray uses a soft boundary that feels seamlessly embedded into the floor of the 3D cleanroom.
IMAGERY
Photorealistic high-key industrial 3D rendering of dual white robotic service arms interacting with an autonomous electric vehicle in an immaculate white laboratory. Lighting is soft overhead studio white with subtle rim lights and realistic contact shadows on the floor. Unrendered photography, human workers, messy garage environments, or dark cinematic moody lighting would be entirely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The soft right-to-left optical blend where a photographic-quality cleanroom robotics render dissolves imperceptibly into the warm white content canvas, paired with a terracotta-highlighted single word in the display heading. To recreate it, apply a CSS mask-image linear gradient to the image element so the floor and atmosphere merge with #faf9f7 without hard edges.
MUST
- Blend the right-hand hero 3D imagery directly into the #faf9f7 background via soft horizontal linear gradient masking.
- Use distinct accent colors (#2e8b57, #358ac4) strictly for isolated quantitative metric numbers.
- Maintain strict hairline dividers (1px solid #e4e2dd) between metric statistics.
- Keep display typography tight with negative letter-spacing between -0.02em and -0.035em.
AVOID
- Do not use harsh black drop shadows; keep elevation nearly flat with subtle boundary borders.
- Avoid colored button backgrounds—reserve dark charcoal #18191b for primary conversion.
- Do not tint entire headlines red; restrict #c94038 strictly to singular focal keyword spans.
- Never place full-bleed edge borders around the hero 3D hardware render.
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 中尝试 
