Design a light-mode website section: precision robotics data platform balancing warm mathematical stippling with an obsidian command footer.
LAYOUT
The section adopts a two-part stacked rhythm: an expansive light split-screen CTA above, anchored by an obsidian directory footer below. In the upper CTA, the left column hosts the text block (eyebrow, display headline, description, dual action buttons) while the right column accommodates the oversized floating dashboard preview. Below the crisp horizontal demarcation, the footer opens with a wide brand/newsletter column followed by four evenly spaced navigation columns, concluding with a single-line horizontal metadata baseline.
PALETTE (use these exact hex values)
- #F9F9F7 — Canvas Ivory: Dominant background color for the primary CTA block and upper viewport
- #0D1012 — Obsidian Deep: Base canvas for the entire footer section and sub-footer metadata bar
- #FFFFFF — Console Card Base: Background fill for the floating software dashboard preview card
- #9E3D34 — Terracotta Rust: Primary conversion button fill, newsletter submit button, and uppercase eyebrow text
- #0E1114 — Ink Primary: Main headline typography and highest-priority display text on light surfaces
- #5D656D — Muted Slate: Supporting paragraph body copy on the light CTA canvas
- #8C949D — Footer Muted: Navigation link labels, copyright notice, and dark surface descriptions
- #E5E7EB — Console Border: Delicate 1px outer stroke and internal cell dividers in the preview card
- #1A1F24 — Footer Rule: Horizontal dividing line separating navigation links from the bottom legal bar
- #22C55E — Operational Green: System status pulse indicator located in the far-right bottom sub-footer
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px subheading, 16px body-lg, 20px heading, 44px display. Tracking -0.025em on display, 0.05em on eyebrows, 0 on body. The typography speaks with the cold precision of an engineering console tempered by humanistic clarity. A neutral grotesque (Inter or Geist) delivers dense metrics effortlessly while scaling cleanly to a compact, punchy 44px display headline with tight tracking (-0.03em). For substitutes, choose modern developer-focused grotesque typefaces like Plus Jakarta Sans or Geist Sans; avoid humanist faces with high calligraphic contrast.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 6px, buttons 6px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is strictly reserved for the interactive product console mockup, which floats over the stippled canvas with a delicate 1px border and a diffuse, multi-stage drop shadow (0 12px 32px -4px rgba(0, 0, 0, 0.08)). The rest of the interface is decisively flat: the CTA background and the footer rely purely on stark surface color contrast rather than z-index elevation or skeuomorphic bevels.
IMAGERY
Imagery is functional and computational rather than stock lifestyle photography. Visual interest is generated via technical UI representations (dataset lists, modality distribution bars, and metrics) combined with a high-resolution, parametric point-cloud stipple pattern that evokes LiDAR sensors, robotics perception, and volumetric spatial captures.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the mathematical halftone dot landscape that billows behind the floating application console, bridging sterile light UI with spatial robotics point-cloud perception. It should be rendered as discrete geometric dots that vary in density, never as an uncalibrated halftone screen or a generic raster blur.
MUST
- Reserve the burnt-terracotta (#9E3D34) strictly for direct conversion actions and the tracking-spaced eyebrow.
- Pair the warm light CTA background directly against the deep obsidian footer without intermediate gradient transitions.
- Maintain strict tabular alignment inside card elements with monospace or tabular figures for metrics and row counts.
- Keep button corner radiuses sharp and restrained at exactly 6px rather than bubbly full pills.
AVOID
- Do not use generic blue or purple tech gradients; the identity relies on warm terracotta against stark monochrome.
- Never add drop shadows or borders to the footer elements; keep the dark canvas completely flat and structural.
- Avoid pill-shaped buttons for primary CTAs; keep them at 6px radius to preserve the technical instrument feel.
- Do not render the halftone pattern in vibrant colors; it must exist purely as subtle monochromatic stippling.
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 中尝试 
