Design a light-mode website section: point-cloud precision suspended in airy warm-white mist, anchoring autonomous risk metrics to tangible physical reality.
LAYOUT
The header spans edge-to-edge within a comfortable 1280px frame with centered menu navigation. The hero region divides cleanly into a 5-column left text block and a 7-column right generative visual container. The left block stacks badge, display headline, body paragraph, and dual button row with 24px vertical rhythm, while the bottom of the section resolves into an inverted pill curve docking the next section.
PALETTE (use these exact hex values)
- #FAFBFB — Canvas White: Primary background canvas creating an open, atmospheric high-key environment.
- #FFFFFF — Card Glass Surface: Floating telemetry dashboard surface with subtle border and diffuse shadow.
- #092429 — Deep Petrol Navy: Primary brand color for high-contrast headlines, primary button fills, and brandmark glyph.
- #147F78 — Autonomous Teal: Highlight color for the signature display text, active status nodes, and primary brand accents.
- #E05A36 — Telemetry Coral: Focal sensor point dots and badge icon accent indicating risk points and dynamic events.
- #10B981 — Optimal Green: Progress bar fill, live status indicator dot, and positive trend delta indicators.
- #4D5D60 — Slate Body: Subtitles, secondary body copy, navigation labels, and metric dimension units.
- #DCE3E3 — Subtle Outline: Border stroke on secondary buttons, badge outlines, and divider lines.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 16px body, 18px body-lg, 24px heading, 68px display. Tracking -0.03em at display, -0.01em at body. The typography speaks with authoritative, technical clarity reminiscent of aerospace and deep-tech robotics documentation. The geometric sans-serif (Plus Jakarta Sans match) features round counters and tight tracking, yielding an assertive, crisp aesthetic. When replacing, prioritize neo-grotesques with strong tabular figure support and tight display metrics like Inter or General Sans.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through optical suspension rather than physical stacking. The background is a flat luminous field over which algorithmic point-clouds swirl, while the telemetry card uses an ethereal, diffused shadow (0 20px 40px -12px rgba(9, 36, 41, 0.1)) and semi-translucent backdrop blurring to appear as a physical HUD overlay.
IMAGERY
Abstract volumetric point-cloud and LiDAR simulations rendered with thousands of micro-dots in petrol, sea-green, and occasional hot coral nodes. The visual must depict geometric spatial reality—such as autonomous vehicles scanning roads or physical objects—filtered through statistical telemetry. Photographic, flat vector, or cartoon illustrations are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone display headline ('The insurance risk layer for / physical AI.') paired with a floating HUD telemetry card submerged in a generative LiDAR particle field. To execute properly, anchor the card at the center-left intersection of the particle swirl, ensuring the particles trail gracefully behind and around the card borders.
MUST
- Use solid deep petrol navy (#092429) for primary text instead of pure #000000.
- Split display titles into deep petrol for standard text and bright teal (#147F78) for the pivotal noun.
- Keep button corner radius restrained to 8px while using 999px pill radius exclusively for metadata tags.
- Overlay the floating telemetry card directly into the dispersion graphic to merge interface with sensory data.
AVOID
- Do not use dark mode backgrounds; the identity depends entirely on sterile, luminous white daylight.
- Avoid solid drop shadows; use low-opacity petrol tinted blurs (e.g., rgba(9,36,41,0.06)).
- Do not color entire sentences in teal; restrict accent teal strictly to the defining keyword phrase.
- Never substitute the point-cloud imagery with standard photography of vehicles or warehouse hardware.
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 中尝试