Design a light-mode website section: clinical off-white precision anchored by luminous spectral heatmaps and dark-mode computational cores.
LAYOUT
The layout features a classic split hero: a left-aligned editorial thesis (eyebrow pill, 56px headline, descriptive paragraph, dual CTA buttons, and 3-column micro-features) opposing an expansive right-aligned horizontal synthesis diagram. The schematic routes five intake nodes on the left through a central processor into five regulatory output nodes on the right, all aligned on horizontal circuit paths.
PALETTE (use these exact hex values)
- #FAF9F6 — Canvas Warm Base: Primary screen background setting an approachable, paper-like medical-grade tone
- #13141B — Obsidian Body: Primary headings, active labels, brandmark, and dominant button surface
- #666978 — Muted Slate: Paragraph body copy, navigation links, and subordinate diagram captions
- #CF4732 — Engineered Rust: Highlight accent color reserved for the terminal headline clause
- #181726 — Engine Core Slate: Dark container surface for the central AI regulatory engine card
- linear-gradient(135deg, #FFB070 0%, #F57262 35%, #C263EC 70%, #6E79F2 100%) — Spectral Aurora Gradient: Background light burst and fluted column effect driving visual interest
- #E8E5DF — Hairline Border: Fine bounding line on pills, feature cards, and input nodes
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Archivo), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 56px display. Tracking -0.03em at display, 0.01em at caption. The typographic tone is authoritative, scientific, and decisively modern. Plus Jakarta Sans lends geometric rigor with open counters, giving regulatory compliance the crisp speed of an advanced engineering tool rather than bureaucratic red tape.
GEOMETRY & SPACING
Corner radii — cards 12px, links 9999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through atmospheric lighting rather than physical drop shadows. A luminous warm-to-violet blurred vertical beam glows behind transparent white pills, while the central dark slab casts a slight purple ambient aura (0 12px 36px rgba(120,60,180,0.18)) onto the canvas.
IMAGERY
There are no photographic portraits or lifestyle imagery. The visual narrative is powered entirely by schematic system architecture: vector connection nodes, pill containers, and an abstract fluted spectral ray texture evoking laser optics and data flow.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the vertical fluted heat-spectrum gradient that glows through an intricate, horizontal circuit diagram connecting white translucent inputs to a dark computational slab and output tokens. Misusing it involves turning it into a generic circular radial blur or over-saturating it to the point of obscuring node text.
MUST
- Retain the warm off-white canvas (#FAF9F6) rather than pure white to preserve the tactile medical-grade finish.
- Isolate the rust-red tone (#CF4732) strictly to the singular hero conclusion word to maintain maximum typographic punch.
- Use hairline 1px borders with faint opacity to separate translucent nodes from the vivid spectral backdrop.
- Render connector lines with smooth bezier curves and circular connector terminals at card boundaries.
AVOID
- Do not use dark mode across the entire screen; only the central engine slab should be dark.
- Do not apply drop shadows heavier than 10% opacity; float nodes using border definition and subtle glow.
- Do not tint the main headline black (#13141B) with cold blues; keep it neutral obsidian.
- Do not substitute the soft fluted vertical spectral gradient with generic flat vector shapes.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub