Design a light-mode website section: crisp laboratory white canvas anchored by dimensional acrylic wafers and chromatic telemetry data cards.
LAYOUT
The section adopts a two-tier architectural rhythm within a 1280px container. The top tier features a balanced 50/50 split: text stack on the left (pill badge, two-tone display header, body paragraph, button pair) and floating 3D perspective art on the right. The bottom tier introduces an uninterrupted horizontal row of five equal-width metric cards, capped beneath by a centered hairline endorsement bar.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary background plane providing high-key ambient light and maximum contrast
- #FFFFFF — Card Surface: Elevated card backgrounds resting above canvas with faint containment
- #2557EB — Primary Blue: Lead brand color applied to key display phrase, primary CTA button, and velocity stats
- #0F172A — Obsidian Text: Dominant display text, primary card headers, and high-contrast labels
- #64748B — Muted Slate: Descriptive body copy, secondary metadata, and divider captions
- #E11D48 — Alert Magenta: Incident reduction metric badge and numeric display
- #0D9488 — Precision Teal: Task success metric indicator and numeric display
- #7C3AED — Compute Violet: Engineering velocity metric badge and numeric display
- #E2E8F0 — Card Border: Subtle hairline perimeter on cards and pill badges
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 32px heading, 52px display. Tracking -0.03em display, 0.05em caps. The typographic tone is authoritative, highly disciplined, and engineering-centric. Inter provides neutral, highly legible glyph geometry that renders statistical data and acronyms cleanly at small sizes. The tight display tracking (-0.035em) at 52px delivers industrial impact without appearing editorial or playful.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through specular ground reflections beneath the 3D glass assets and delicate ambient occlusion under the card grid. Surfaces avoid heavy drop shadows in favor of 1px border definition paired with low-opacity, wide-radius blurs (0 12px 30px -10px rgba(15, 23, 42, 0.05)). This produces an ultra-clean, clinical laboratory presence.
IMAGERY
The imagery centers on an isometric progression of five translucent glass wafers, each representing a stage in robotic perception—from sensor grid to point cloud, policy mapping, and neural inference. Imagery must remain architectural, technical, and semi-transparent with precise raytraced edge refractions. Realistic photography or consumer device mockups would break the industrial AI motif.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the sequence of five isometric acrylic wafers receding into space, paired directly with five color-coded outcome cards beneath. Misusing this pattern occurs when cards lack chromatic coordination with the stages above, or when the 3D wafers are placed inside an enclosed bounding box instead of casting natural reflections onto the white canvas floor.
MUST
- Render the display title in two lines: first line dark charcoal, second line vibrant brand blue.
- Match the color of each metric's large headline number to its corresponding circular icon hue.
- Use light, diffuse drop shadows (0 10px 25px -5px rgba(0,0,0,0.04)) to keep cards grounded but weightless.
- Give the 3D graphic ample horizontal space equal to the entire left text column.
AVOID
- Do not use saturated backgrounds or dark modes; the design relies entirely on sterile high-key white.
- Do not make the metric card borders heavy; borders must remain hairline 1px and low-contrast.
- Do not apply drop shadows to the primary blue button; maintain a crisp flat fill.
- Do not vary card widths; all five KPI cards must share identical flexible grid column widths.
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 中尝试 
