Design a light-mode website section: clinical deep-spruce precision anchored by rigorous typography and atmospheric robotics metric surfaces.
LAYOUT
The screen follows a clear dual-hemisphere hierarchy: a high-contrast hero split into a 55/45 ratio between headline copy and an elevated telemetry spec card, underscored by a three-pill trust strip. Below, the page transitions immediately into an all-inclusive 5-column navigation grid and newsletter module resting on an uninterrupted midnight oceanic baseline.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Light: Primary hero and presentation canvas background providing clean industrial contrast
- #07111D — Canvas Dark Oceanic: Full-bleed structural footer surface anchoring the lower interface hierarchy
- #082121 — Spruce Deep: Dark telemetry dashboard container surface with ambient inner teal gradient
- #0C3835 — Spruce Interactive: Primary action button fill and strong brand interactive touchpoints
- #0D766E — Spruce Eyebrow: Uppercase telemetry subtitles, checkmarks, and brand identity marks
- #0F172A — Charcoal Text: Hero display headings, high-contrast typography, and primary legible copy
- #64748B — Slate Muted: Hero subheadings, footer link lists, and secondary data descriptions
- #38BDF8 — Metric Cyan: Telemetry value callout for precision tracking accuracy metrics
- #34D399 — Metric Mint: Telemetry value callout for volume and motion sequence metrics
- #FB923C — Metric Amber: Telemetry value callout for readiness and completion percentages
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text, Roboto Flex), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 44px display. Tracking -0.02em at display, 0.05em at caps. The type voice is calculated, academic, and industrial. By deploying Inter in heavy display cuts paired with loose uppercase micro-copy, the interface speaks directly to robotics engineers and ML researchers. It communicates enterprise readiness and sensor-level precision without Silicon Valley hyperbole.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created strictly through surface inversion and fine 1px borders rather than diffuse drop shadows. The hero telemetry card hovers with an ambient, almost imperceptible dark glow against the white canvas, while inner rows inside the card use low-opacity borders (rgba(255, 255, 255, 0.08)) to recede cleanly.
IMAGERY
No photographic imagery is present; the interface relies on structured telemetry graphics, iconography within circular frames, and technical dashboard readouts. Brand identity is reinforced through custom glyphs, engineering badges, and tabular data displays. Consumer photography or whimsical illustrations would violate the sterile industrial aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone telemetry specimen card positioned directly against the pristine white hero field. It acts as an interactive proof-of-work exhibit with integrated metric callouts in contrasting hues (mint, cyan, warm orange). Removing this card collapses the page into a generic corporate SaaS layout.
MUST
- Anchor scientific trust with spruce (#082121) and deep oceanic slate (#07111D) contrasting crisp white canvas.
- Use distinct metric accent colors (mint, cyan, amber) strictly for numerical readouts within telemetry panels.
- Enforce -0.025em tracking on hero display text above 40px for engineered editorial authority.
- Style inline trust indicators as 999px pill badges with discrete status checkmarks.
AVOID
- Do not use bright neon saturated greens for large surface fills; confine them to data metrics.
- Never float the telemetry card without its dark spruce background enclosure.
- Do not omit the arrow affordance on the primary button or secondary link.
- Avoid pill radius shapes on data cards or interactive text input fields.
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 中尝试 
