Design a light-mode website section: clinical data rigor softened by editorial serif flourishes and pointillist cyan-to-ultramarine generative data currents.
LAYOUT
Asymmetric 50/50 split desktop layout on a 1240px container. Left column stacks the pill badge, dual-typeface headline, explanatory body paragraph, primary/secondary action pair, and micro trust badges. Right column anchors the interactive clinical OS card enveloped in a curved generative dot-matrix cloud.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Pure: Absolute white background for page canvas, hero surface, and interactive card modules.
- #F8FAFC — Canvas Off-White: Subtle lower tray background hosting trust metrics and secondary containers.
- #C32B2B — Crimson Primary: Key conversion triggers including main demo buttons, logo mark, and critical metric indicators.
- #3461E3 — Electric Ultramarine: Visual focus for AI identity, featured serif headline copy, active prompt triggers, and flow nodes.
- #14171F — Carbon Text: High-contrast headings, primary UI labels, and main descriptive body copy.
- #5E6676 — Slate Neutral: Subordinate body copy, navigation labels, and suggested search prompts.
- #E5E7EB — Border Hairline: Precise structural lines, container boundaries, input strokes, and stat dividers.
- #16803C — Emerald Data: Validation nodes, compliance tag icons, and operational efficiency metric figures.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 19px subheading, 32px heading, 54px display. Tracking -0.03em at display, -0.01em at body. The typography creates a deliberate tension between industrial enterprise competence and humanistic intelligence. Plus Jakarta Sans communicates clinical structure and regulatory safety, while the single-phrase Instrument Serif interruption provides premium bespoke sophistication.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 8px. Spacing on a 8px unit, 20px gaps, 72px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled delicately via multi-layered ambient occlusions rather than physical drop shadows. The interactive preview card lifts off the background with a 0 16px 36px -12px rgba(20, 35, 75, 0.08) spread, complemented by floating status nodes overlaid along a single plane.
IMAGERY
Visual interest is generated purely by code-driven vector mathematics: a sweeping blue stipple-dot halftone vortex evoking clinical trial data points in motion. Floating UI tokens are linked by fine hairline bezier splines; no photographic imagery of clinicians or labs is used.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden typographic shift from heavy grotesque sans to blue editorial serif on the hero headline's final phrase ('Powered by AI.'), visually echoed by the stippled cyan-blue halftone data vortex surrounding the interface card.
MUST
- Reserve solid crimson (#C32B2B) strictly for conversion buttons and the primary brand mark.
- Pair geometric grotesque headings with editorial serif typography exclusively for the AI differentiator phrase.
- Render the generative backdrop as a discrete stippled/halftone dot array rather than a blurry continuous gradient.
- Enclose prompt simulator suggestions in individual rounded containers with clear right-pointing directional affordances.
AVOID
- Never make the entire headline serif; the serif voice is an intentional disruption to corporate sans-serif rigor.
- Avoid harsh black drop shadows; keep elevation faint, cool-tinted, and diffused over 30px+ blur.
- Do not fill connected flow nodes with saturated colors; use soft pastels (#EEF4FF, #EAF7EE) with high-contrast glyphs.
- Never omit the hairline border on white cards resting upon the white hero canvas.
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. 在 DraPub 中尝试 
