Design a light-mode website section: clinical-grade precision balanced by luminous neural architecture and deep nocturnal infrastructure.
LAYOUT
The page flows through a classical two-part horizontal split. The hero features a balanced 50/50 division: left column houses an eyebrow tag, display headline, body copy, dual CTAs, and a three-part trust verification row; right column features the symmetrical hub-and-spoke architecture graphic. The page cuts sharply into a full-width dark mega-footer featuring a 6-column grid containing brand bio, form capture, four link stacks, and a trust box.
PALETTE (use these exact hex values)
- #fbfcfd — Canvas Hero: Primary light background surface for the hero and architecture diagram
- #0a0f18 — Midnight Base: Full-bleed background for the entire footer infrastructure section
- #121927 — Dark Card Surface: Elevated background for footer newsletter box and security badge card
- #1d63ed — Cobalt Blue: Primary CTA fill, active badges, and anchor points in diagram
- linear-gradient(135deg, #1d63ed 0%, #514df8 100%) — Gradient Accent: Applied to headline text highlights and footer subscribe CTA button
- #0b1220 — Slate Primary: Headline typography and primary dark text in hero area
- #53647b — Slate Muted: Hero paragraph descriptions and secondary caption metadata
- #899bb1 — Footer Text Dull: Footer navigation links, body copy, and copyright text
- #bfdbfe — Trace Connector: Curved vector bus traces interconnecting data nodes to central hub
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.03em at display, 0.05em at caps. The typography conveys authoritative, institutional precision through a geometric neo-grotesque (Plus Jakarta Sans). The heavy display weight combined with negative tracking gives the healthcare pitch weight and seriousness without feeling legacy or academic. Inter or SF Pro Display are perfect dropped-in alternatives maintaining the modern SaaS clinical posture.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth in the light canvas is achieved through luminous levitation rather than darkness: diagram cards cast 20px to 32px blurs with tint-shifted blue shadows (`rgba(37, 99, 235, 0.12)`). The dark footer completely flattens physical elevation, relying entirely on surface layering (`#0a0f18` base to `#121927` cards) with fine 1px border definitions.
IMAGERY
This design eschews photographic imagery completely in favor of crisp technical vector iconography and an interactive schematic diagram. All icons are outline-style with 1.5px stroke weight, set inside circular or rounded-rectangular micro-containers. Photography of clinical environments or stock medical models would severely compromise the technical, developer-first governance aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the central illuminated 'Policy & Model Hub' schematic: a glowing squircle surrounded by clean circuit trace connectors leading to rounded data input and monitoring nodes. It visually communicates complex clinical AI integration effortlessly, and is broken if replaced by raw stock photography or standard rectangular workflow charts.
MUST
- Use clinical pure white cards with soft blue ambient drop shadows against the off-white hero background.
- Reserve the cobalt-to-indigo gradient exclusively for text inflection points and the primary newsletter CTA.
- Maintain strict typographic hierarchy with tight letter-spacing (-0.035em) on display headings.
- Keep all connecting vector traces in the architecture diagram at exactly 1.5px stroke width with soft radial curvature.
AVOID
- Do not use dark background containers in the upper hero section.
- Do not apply heavy, hard-edged black drop shadows to diagram nodes; only use diffused luminous blues.
- Never make footer body link text pure white; keep it restrained to `#899bb1` for secondary hierarchy.
- Do not use sharp 90-degree corners on the interconnect lines between system architecture nodes.
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 
