Design a light-mode website section: airy clinical clarity anchored by soft lavender tints, disciplined slate typography, and high-trust medical data callouts.
LAYOUT
The composition follows a two-part vertical rhythm: an expansive hero CTA at top split into a 50/50 desktop column layout, followed by a wide-format footer. The left hero column stacks pill badge, headline, body copy, CTA row, and trust signals. The right hero column embeds a framed app viewport alongside stacked outcome statistics within a unified tinted card. The footer concludes with standard logo placement, four navigation stacks, and a newsletter utility.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary screen canvas and card container background
- #F4F6FD — Lavender Mist: Large rounded hero display container and light badge backgrounds
- #5B47E0 — Iris Violet: Primary action button, active brand icons, and spark badges
- #121826 — Deep Midnight: Headings, metric values, and high-contrast structural text
- #64748B — Cool Slate: Supporting descriptive copy, metric labels, and footer links
- #EEF1F6 — Divider Grey: Horizontal section rules and trust badge vertical dividers
- #EF4444 — Health Coral: Specific metric indicator icon for patient confidence metrics
- #38BDF8 — Trust Cyan: Specific metric indicator icon for reduced clinic visits
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 28px heading, 44px display. Tracking -0.03em at display, 0 at body. The typographic tone is authoritative, compassionate, and precise. A crisp geometric sans with wide apertures communicates contemporary digital efficiency while preserving clinical warmth. When substituting, prioritize fonts with balanced x-heights and legible numerals (e.g., Plus Jakarta Sans, Inter).
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Elevation is remarkably shallow and diffused. Almost all boundary separation is achieved via low-contrast fills (#F4F6FD) rather than shadows. When a shadow is used—as beneath the phone frame—it is a 0 16px 36px blur at 4% opacity in dark indigo, simulating soft directional ambient light.
IMAGERY
Vector line icons are delicate, constructed with uniform 1.5px strokes and rounded joins. Real-world photography is omitted in favor of clear, schematic product UI mockups with high information density and gentle pastel highlight fills. Avoid stock photos of smiling doctors or clinical equipment.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-column tinted container card (#F4F6FD) uniting a mobile conversation UI alongside vertically stacked outcome metrics with soft-tinted icon badges. Misusing it involves separating the stats from the preview screen, which dismantles the immediate cause-and-effect proof loop.
MUST
- Anchor primary buttons with the high-chroma #5B47E0 iris violet.
- Pair clinical statistics with dedicated pastel-tinted icon containers.
- Use subtle vertical line dividers between inline trust badges.
- Maintain high whitespace ratios around the 44px display headline.
AVOID
- Never apply harsh black borders or drop shadows with opacities exceeding 8%.
- Avoid using saturated red or green accents outside of designated metric icons.
- Do not remove the generous 24px corner radius from structural preview cards.
- Never use fully uppercase text for long descriptive sentences.
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. 在 DraPub 中尝试 
