Design a light-mode website section: clinical enterprise research clarity anchored against deep space infrastructure and warm linear gradients.
LAYOUT
The layout is strictly stacked and centered in the upper light viewport, progressing from trust badge to headline, dual buttons, and a 4-column metric ribbon. Below the midpoint, the page cuts abruptly to an expansive full-width dark footer. The footer arranges identity, 4-tier navigation lists, and email capture across a balanced horizontal 6-column grid.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Bright: Primary background for the high-conversion hero and proof metrics section.
- #070B14 — Horizon Navy: Deep footer foundation communicating technical gravity, infrastructure reliability, and security.
- #0B0F19 — Slate Void: Dominant text tone for the primary headline and quantitative stat metrics.
- #5A45FF — Signal Violet: Leading stop for primary action gradients, active highlights, and newsletter submission.
- #FA5D5D — Solar Coral: Trailing stop for primary action gradient and headline text accent.
- #64748B — Muted Slate: Secondary descriptors, stat labels, and footer body paragraphs.
- #162032 — Deep Wireframe: Subtle hairpins, social icon borders, input fields, and contour curves on dark surface.
- linear-gradient(90deg, #5A45FF 0%, #FA5D5D 100%) — Hero CTA Gradient: High-visibility linear fill applied to primary button and focal headline highlight.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px subheading, 28px heading, 52px display. Tracking -0.03em at display, 0.05em at caps. The typographic tone is restrained, analytical, and authoritative, echoing peer-reviewed ML papers scaled for Fortune 500 buyers. Using a tight, geometric sans-serif with negative letter tracking on headings establishes urgency and precision without resorting to hyperbole. Inter or Plus Jakarta Sans are optimal substitutes.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely via color contrast and layered atmospheric atmospheric lighting rather than physical shadows. The light section uses a soft, low-opacity violet and pink radial ambient wash at the edge, while the footer utilizes thin 1px hairline strokes (#162032) to separate interactive inputs and tiers without box-shadow.
IMAGERY
No photographic imagery is present; the visual language relies entirely on precision synthetic graphics. Subtle matrix dot grids, coordinate hairpins (+), and fine vector contour arcs signal algorithmic rigor, machine intelligence, and infrastructure security.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden, unshaded shift from an airy white hero into a deeply saturated midnight navy footer, bridged only by an intense violet-to-coral linear gradient on the primary action button and headline keyword. To execute it correctly, keep the divider completely planar without drop shadows, letting the contrast between lab-like daylight and server-room dark command the transition.
MUST
- Keep the gradient accent strictly constrained to key highlight terms and primary button.
- Use hard horizon line between white hero and dark navy footer with zero blurred drop-shadow bleed.
- Render stats in monochromatic deep slate to avoid visual rivalry with the primary CTA.
- Use 1px crisp borders (#162032) around input containers and social icon blocks on dark surfaces.
AVOID
- Do not apply multi-color gradients to body copy, icons, or secondary action buttons.
- Avoid rounded corners larger than 8px on buttons and input fields; reserve pills solely for badges.
- Do not use pure black (#000000); use deep aerospace midnight (#070B14) for dark backgrounds.
- Never replace the fine technical coordinate crosshairs with standard lifestyle photography.
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