Design a light-mode website section: precision enterprise software floating over stippled industrial point clouds.
LAYOUT
The page follows a classic pyramidal centered hero structure with industrial bookends. The header anchors the top border with logo, central navigation links, and right-aligned actions. Down the centerline, content unfolds methodically: trust pill, 2-line display headline, supportive subhead, dual CTAs, and a 3-point metric bar. The base is weighted by a large, centered dashboard preview framed by left and right infrastructure dot graphics.
PALETTE (use these exact hex values)
- #ffffff — Canvas Pristine: Global background canvas, metric cards, and secondary action fill
- #0f172a — Carbon Obsidian: Hero headline text, logo logotype, and high-priority dashboard metrics
- #1668e8 — Cobalt Trust: Primary interactive buttons, key metric numbers, active nav indicators, and headline accent
- #64748b — Muted Slate: Sub-copy description, breadcrumbs, navigation links, and metric labels
- #f8fafc — Surface Frost: Dashboard background panel, badge fill, and active sidebar item backgrounds
- #e2e8f0 — Border Hairline: Subtle outlines around cards, dashboard mockup, badge container, and secondary buttons
- #10b981 — Status Emerald: Operational live pulse dot and compliance status indicators
- #94a3b8 — Dot Matrix Slate: Halftone stipple vector illustrations depicting civil and physical infrastructure
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 28px heading, 56px display. Tracking -0.03em at display, -0.01em at body. The typography is clinical, authoritative, and frictionless, relying on an engineered grotesque (like Inter or Geist). Its tight tracking (-0.03em) at display scales lends the headline an architectural solidity, while generous line-heights in body text maintain effortless legibility. Free equivalents like Inter or Geist Sans perfectly replicate the austere, high-reliability tone.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is handled entirely through hairline structural borders (#e2e8f0) and ultra-diffuse, low-opacity ambient shadows (0 20px 40px -15px rgba(15, 23, 42, 0.05)). The interface avoids stark material layering, opting instead for architectural stacking of white and #f8fafc planes. This keeps the technical product feeling precise, institutional, and weightless.
IMAGERY
The visual vernacular relies exclusively on dense algorithmic stipple and halftone dot matrices. These point clouds render tangible physical infrastructure—such as suspension bridges, cargo cranes, and topological landforms—fading smoothly into white canvas via radial dissipation. Full-bleed photographs or rendered 3D glossy shapes would severely undermine the technical rigor.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-flanking halftone stipple artwork representing massive civil works (suspension bridge and port mechanics) transitioning into fluid point-cloud waves. It visually encodes the phrase 'physical AI' by depicting real-world industrial scale in digital particles. It must always stay light in value (#94a3b8 and #1668e8) and never obscure the central reading column.
MUST
- Retain ample pure white (#ffffff) breathing room between the hero CTAs and the dashboard frame.
- Render all background technical art as blue-to-slate vector stipple dot matrices.
- Tint exactly the key differentiator ('physical AI') in #1668e8 within the primary headline.
- Keep button corner radius strictly at 8px to balance software precision with modern softness.
AVOID
- Do not use heavy, saturated multi-stop gradient fills behind the headline text.
- Do not drop heavy, dark drop shadows; keep elevation borders crisp with 1px #e2e8f0.
- Never replace the generative stipple art with generic stock photography of warehouses or hardware.
- Avoid centering body paragraphs wider than 640px to preserve scannability.
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 中尝试 
