Design a light-mode website section: surgical enterprise ai clarity underpinned by midnight developer infrastructure.
LAYOUT
The screen flows in two distinct horizontal chapters: an airy split-hero section where the left-hand messaging balances a detailed right-hand UI simulator, supported underneath by a three-point trust metric bar. Directly below, the page grounds into a high-density, four-column navigational dark footer with integrated newsletter capture and bottom-aligned legal copyright strip.
PALETTE (use these exact hex values)
- #F8F9FD — Canvas Ice: Dominant background for hero and product display areas
- #FFFFFF — Card Pure White: Background for floating interactive preview cards and nested inputs
- #080D1A — Abyss Navy: Container background for the extensive multi-column footer
- #2563EB — Electric Cobalt: Primary action buttons, headline accent word, and focus states
- #0F172A — Deep Slate: Primary headings, titles, and high-emphasis display text
- #64748B — Muted Steel: Body descriptions, metadata labels, and footer column links
- #10B981 — Precision Mint: Relevance score indicators, live search pulse, and verification badge
- #E2E8F0 — Border Subtle: Dividers, input outlines, and component container perimeters
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 48px display. Tracking -0.025em at large display, +0.05em at uppercase metadata. The typographic tone is authoritative, highly rational, and engineering-centric. Using Inter or Geist allows tabular numbers to align predictably across latency metrics while heavy -0.025em tracking in display weights prevents large sizes from feeling dispersed.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is strictly reserved for the hero interface demonstration card, which sits above the light canvas with a soft, diffuse 24px blur drop shadow (rgba(15, 23, 42, 0.08)). All internal controls, inputs, and the footer grid remain completely flat, enforcing technical precision over skeuomorphic styling.
IMAGERY
Avoid photographic imagery entirely. Visual representation is strictly handled through high-fidelity synthetic UI previews, micro vector iconography, and extremely subtle generative wave line tracings in the background that suggest dense semantic embeddings.
SIGNATURE DETAIL — the thing that makes this design itself
The stark transition from an ultra-clean, light-mode interactive product preview directly into an abyss-navy developer footer, tied together by ambient vector wireframe lines.
MUST
- Use Electric Cobalt (#2563EB) strictly for active endpoints and specific focal anchor phrases.
- Maintain high contrast by grouping developer telemetry metrics in clean, isolated white cards.
- Set footer section headers in uppercase 11px with +0.06em tracking for structural scanability.
- Wrap interactive demo windows in 16px corner radius with 1px #E2E8F0 borders.
AVOID
- Do not use dark backgrounds for the hero section; reserve #080D1A strictly for the footer.
- Avoid heavy drop-shadows on buttons; rely on pure flat color fills.
- Never mix serif typefaces into this technical interface; keep to clean geometric grotesques.
- Do not use saturated red or yellow for status indicators; adhere to green and cyan telemetry.
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. Try in DraPub 
