Design a light-mode website section: clinical cleanroom laboratory aesthetics blending precision robotics with translucent frosted-glass policy telemetry.
LAYOUT
The viewport is orchestrated in three descending structural bands. The hero tier divides into a 45/55 split: headline copy, eyebrow badge, and dual CTA buttons on the left, counterbalanced by the self-contained 3D render card on the right. Directly beneath sits the four-column metrics grid encased in a single unified rounded card. The section terminates in a horizontal taxonomy bar displaying supported hardware verticals with centered metadata labels.
PALETTE (use these exact hex values)
- #f8fafc — Canvas Ice White: Dominant background canvas tint providing cleanroom depth and extreme contrast
- #ffffff — Surface Pure White: Primary surface for floating hero containers, stat blocks, and ticker modules
- #0b57d0 — Precision Cobalt: Primary CTA fill, active eyebrow text, and targeted link accents
- #0f172a — Obsidian Body: Hero display typography, headline text, and bold statistical numerals
- #5b6577 — Slate Steel: Body copy, supporting metrics descriptions, and tertiary labels
- #e9edf3 — Hairline Border: Defines structural containment for outer cards, dividers, and secondary buttons
- #10b981 — Telemetry Emerald: Indicates active system coverage, online operational status, and health metrics
- #eef2ff — Pale Iris Tint: Pill badge background and metric icon squircle wash
- #ecfdf5 — Pale Mint Tint: Metric icon squircle wash for continuous assurance indicator
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 48px display. Tracking -0.03em at display, 0.05em at uppercase tags. The typographic tone is authoritative, hyper-modern, and mathematically structured. Utilizing a geometric neo-grotesque like Plus Jakarta Sans lends sharp legibility at micro sizes and heavyweight confidence at display scales. Its round counters and crisp terminals evoke advanced technological infrastructure and uncompromised safety.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is communicated primarily through structural framing and translucent layering rather than dark drop shadows. Surfaces rely on 1px crisp borders (#e9edf3) paired with expansive, near-invisible ambient shadows (0 12px 32px rgba(15, 23, 42, 0.04)). The 3D viewport introduces real spatial layering via backdrop-filtered translucent glass panels hovering directly over the robotic scene.
IMAGERY
The visual centerpiece is a photorealistic, cleanroom-standard white robotic arm positioned on an illuminated glass plinth. Overlaid onto the hardware are semitransparent glassmorphic cards showing HUD data, checkmarks, and green live-telemetry status indicators. Abstract or stylized cartoon illustrations are strictly off-brand; renders must look physically engineered, sterile, and industrially precise.
SIGNATURE DETAIL — the thing that makes this design itself
The singular identifying device is the clinical 3D robotics enclosure populated with floating, frosted glassmorphic HUD cards displaying real-time insurance validation. It instantly visualizes 'physical AI made safe' without relying on traditional corporate insurance metaphors. It is commonly misused by lowering the backdrop blur or using generic dashboard charts instead of live telemetry tags.
MUST
- Keep card surfaces at pure #ffffff against the faint #f8fafc backdrop to maintain clinical purity.
- Use 24px corner radii on major containers and 10px on interactive elements for consistent hierarchy.
- Pair numeric metrics with softly tinted 44px squircle icon badges (mint, iris, sky blue).
- Restrain high-saturation blue (#0b57d0) exclusively to primary conversion buttons and eyebrow highlights.
AVOID
- Do not introduce dark or highly saturated card surfaces; the aesthetic must remain high-key clinical.
- Avoid pill-shaped CTAs; primary buttons must strictly observe the 10px corner radius.
- Never apply harsh black drop shadows; keep elevation borders crisp (1px #e9edf3) with ultra-soft diffuse blurs.
- Do not mix serif or expressive display typography into the headline slots.
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 中尝试 
