Design a light-mode website section: clinical technical precision framed by calm sage tints and architectural wireframe telemetry.
LAYOUT
The layout utilizes an asymmetrical 12-column bento box pattern. The top half pairs a left-side 5-column editorial header with a right-side 7-column horizontal 4-stat metric bar. The lower section features a 5-column wide deep-teal telemetry viewport on the left, flanked by a 2x2 grid of feature tiles on the right, all concluded by a full-width horizontally aligned trust footer.
PALETTE (use these exact hex values)
- #FAFAFA — Canvas Background: Overall site backdrop behind all cards and content containers
- #FFFFFF — Card Surface Clean: Light background fill for primary stat and feature cards
- #F5F8F7 — Card Surface Tint: Subtle cool-tinted fill used for metric panels and pill containers
- #0D2533 — Nocturnal Card Base: Dark teal background for the interactive robotics fleet overview card
- #0F172A — Text Primary: Main page headline, feature card titles, and bold stat figures
- #64748B — Text Muted: Body descriptions, metric subtitles, and secondary context labels
- #0E5642 — Primary Emerald: Hero metrics, badge text, and key call-to-action anchor links
- #4BE3A2 — Telemetry Mint: Glowing spline curve, sensor waypoints, and badge indicator dot
- #F59E0B — Sensor Orange: Single beacon target node on the dark visual telemetry plot
- #E2E8F0 — Card Border Subtle: Faint dividing outlines defining card peripheries and stat column separators
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 32px heading, 44px display. Tracking -0.025em for display titles, 0.05em for uppercase badges. The typographic tone is authoritative, highly technical, and calm, achieved through an unadorned grotesque sans-serif like Inter or Plus Jakarta Sans. Negative tracking on larger headlines (-0.025em) lends an engineered, software-grade precision. Body text is kept airy with 1.5 line heights to ensure high scannability for dense enterprise messaging.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is communicated through strictly flat plane layering and tonal differentiation rather than drop shadows. Surface layers exist as #FAFAFA canvas, #FFFFFF cards with 1px hairline borders (#E2E8F0), and an intentional contrast pop via a single #0D2533 dark slate viewport. Subtle hover transitions can utilize a gentle 0 2px 8px rgba(0,0,0,0.04) whisper shadow at most.
IMAGERY
Vector line graphics and architectural wireframe projections take precedence over raster photography. The primary graphic depicts a 3D perspective terrain grid overlain with a luminous spline curve and discrete data nodes, representing physical robotics fleet intelligence. Photorealistic hardware photos or human stock imagery would break the clinical, developer-focused aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-clean, white-and-sage metric bento grid against a solitary, high-contrast dark teal viewport featuring a luminous 3D spline trajectory. This element represents the physical-meets-digital software bridge. Misuse occurs if multiple dark cards are scattered across the screen, diluting the viewport's role as a focused camera into the autonomous system.
MUST
- Use precisely 1px hair-thin borders (#E2E8F0) to separate grid cells rather than heavy elevation drops.
- Restrict large numbers to the signature deep emerald green (#0E5642) for scientific credibility.
- Maintain strict corner radii alignment: 16px on outer cards, 8px on nested icon containers.
- Keep descriptive body copy to 2 concise lines to preserve equal visual card height across rows.
AVOID
- Never apply aggressive box shadows; the depth language relies purely on flat tonal surface separation.
- Avoid warm saturated colors like red, bright blue, or magenta; stay strictly within forest green and teal spectrums.
- Do not center-align body or stat text; maintain clean left-alignment throughout every card.
- Do not mix rounded pill buttons with sharp rectangular cards; radius consistency is paramount.
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 中尝试 
