Design a dark-mode website section: mission-critical physical ai infrastructure rendered in deep midnight indigo with radar precision.
LAYOUT
The layout is divided into two distinct vertical blocks with an 80px interval. The upper block is an expansive 1240px CTA card split evenly: left-aligned copy, badges, dual action buttons, and three trust points; right-aligned technical graphic featuring an API window, radar rings, and floating risk badge. The lower block is a comprehensive 6-column footer grid concluding in an edge-to-edge legal copyright rulebar.
PALETTE (use these exact hex values)
- #07090e — Canvas Ground: Base viewport backdrop across entire page and footer section
- #0e1322 — Surface Raised: Background fill for the primary CTA container card and nested visual panes
- #13192b — Surface Overlay: Floating risk assessment badge and nested code card surface
- #1c253d — Card Stroke: Perimeter boundaries and subtle interior separators across cards and inputs
- #5d54ee — Electric Indigo: High-emphasis CTA button fills and primary submit triggers
- #38bdf8 — Telemetry Cyan: Radar signal blip and radar perimeter grid pulse highlight
- #34d399 — Signal Green: API 200 OK status badge background and text
- #ffffff — Text Primary: Headings, core metric figures, and brand wordmark
- #8f9cb7 — Text Muted: Secondary descriptions, code values, and navigation links
- #475569 — Text Subdued: Micro-labels, legal notes, copyright notices, and inactive states
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px subheading, 24px heading, 44px display. Tracking -0.03em at display, 0.01em at body, 0.05em at caps. The typographic tone is uncompromisingly technical, institutional, and precise. Inter provides dense, no-nonsense legibility that handles enterprise risk terminology without decorative distraction, while the monospace companion establishes authentic developer credibility. For commercial implementations without Inter, Geist Sans or SF Pro Display offer an exact technical match.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 72px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through surface luminescence and crisp 1px borders rather than heavy drop shadows. The outer card floats over the canvas via a slightly lighter slate tone (#0e1322) and an interior localized radial indigo glow. Inner components like the code viewer and floating metric badge use higher-value fills (#13192b) with micro-borders to appear physically stacked above the canvas.
IMAGERY
Visual assets are strictly schematic, technical, and vector-driven. The interface showcases an API response terminal paired with a radar coordinate grid and glowing blip, evoking enterprise telemetry for physical robotics. Photorealistic hardware imagery or playful corporate illustrations are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive design signature is the juxtaposed API terminal and radar telemetry graphic nested directly into the conversion card. It validates the value proposition visually before the user clicks, combining code syntax highlighting with an ambient cyan-glowing radar coordinate that communicates physical AI monitoring in real time.
MUST
- Keep card surfaces tint-biased toward midnight slate (#0e1322) rather than neutral grey.
- Use JetBrains Mono exclusively for code snippets, JSON keys, values, and raw technical metrics.
- Ensure the glowing radar dot provides the highest luminous value (#38bdf8) within the graphic zone.
- Maintain high contrast between display white headings and muted slate secondary body text.
AVOID
- Never use pure black (#000000) for card surfaces; always maintain subtle deep navy lift.
- Avoid high-saturation borders; card boundaries must not exceed 1px #1c253d or 15% white opacity.
- Do not make secondary documentation buttons filled; they must remain outlined/ghost to protect CTA hierarchy.
- Never remove letter-spacing compression (-0.035em) on display headlines above 32px.
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 中尝试 
