Design a light-mode website section: an immaculate clinical sanctuary illuminated by gentle cyan and iris gradients, balancing enterprise trust with synthetic intelligence.
LAYOUT
The page follows a centralized, top-down hero hierarchy. Navigation anchors the top edge, descending to a centered pill badge, high-impact headline, descriptive subtext, and dual CTA pair. Directly beneath, an enterprise trust band grounds the claims before opening into a wide, 3-column interactive system diagram linking inputs, core AI engine, and practice outcomes.
PALETTE (use these exact hex values)
- #FAFCFF — Canvas Background: Base canvas underlay hosting soft cyan and violet light-curtain ambient gradients across the hero.
- #FFFFFF — Card Surface: High-contrast pure white fill for floating modules, node cards, and diagram containers.
- #3B66F5 — Primary Indigo: Primary interactive accent used on main CTA button, icons, and hero gradient starts.
- #0F172A — Text Display: Deep slate-navy for primary brand wordmark, high-impact display headlines, and bold titles.
- #64748B — Text Secondary: Muted slate tone for descriptive body copy, navigation items, trust badges, and supporting labels.
- linear-gradient(90deg, #2563EB 0%, #6366F1 100%) — Headline Gradient: Two-tone energetic gradient applied to the second line of the hero title.
- #E2E8F0 — Hairline Border: Subtle boundary stroke defining structured cards, pill badges, and diagram partitions.
- #E0F2FE — Cyan Ambient Glow: Left-hand atmospheric wash conveying technical precision and clinical clarity.
- #EDE9FE — Iris Ambient Glow: Right-hand atmospheric wash representing patient warmth and synthetic intelligence.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 60px display. Tracking -0.03em at display, 0.05em at caps badge. Plus Jakarta Sans delivers an authoritative yet approachable voice, fusing the geometric precision of tech interfaces with the legibility required in medical software. Tight tracking on display headlines creates a dense, confident punch, while open leading in the body ensures effortless clinical digestion.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved through high-contrast boundary definition rather than heavy drop shadows. Crisp 1px borders (#E2E8F0) frame pure white (#FFFFFF) cards over a pale, softly illuminated pastel background. A faint, diffuse radial halo emanates from the central brand emblem to signal algorithmic activity without clutter.
IMAGERY
Avoid photography of doctors or patients entirely in the hero viewport. The design speaks through pristine interface schematics, precise vector iconography (stroke width 1.5px), and luminous spectral gradient fields. Vector lines with clean bezier curvature link modular workflow nodes to suggest technical orchestration.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the three-stage 'Input-Processor-Outcome' workflow visualization, framed by radiant curved connector lines feeding into a pulsing, concentric circular iris emblem at the center of the AI card. Misusing it involves turning it into a static, unaligned block diagram or crowding it with dense paragraphs instead of atomic pill cards.
MUST
- Keep background atmospheric lighting subtle, using low-opacity vertical curtains of cyan and lavender.
- Restrict bold gradient treatment exclusively to the critical second line of the main display headline.
- Enforce rigorous horizontal and vertical alignment across pipeline inputs, processors, and outcome nodes.
- Use hairline 1px borders (#E2E8F0) on white surfaces to maintain razor-sharp separation without heavy drop shadows.
AVOID
- Do not introduce dark saturated backgrounds; the aesthetic demands an immaculate clinical clean-room atmosphere.
- Never apply high-elevation or muddy blur shadows under diagram cards or floating panels.
- Avoid decorative script or serif fonts; stick strictly to clean neo-grotesque sans typefaces.
- Do not clutter the central diagram hub with photorealistic device mockups or human photography.
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 中尝试 
