Design a light-mode website section: soft medical blue and pristine whitespace engineering trust for chronic condition management.
LAYOUT
The hero section is structured as an asymmetrical two-column layout: copy and action drivers occupy the left 52%, while a floating telemetry dashboard fills the right 48%. Below the primary CTA button lies an inline row of three credential micro-badges. The page concludes with a comprehensive 5-column footer housed in a pale blue surface band, cleanly separating brand capture on the left from structured sitemap columns on the right.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary hero background and surface color for internal dashboard metric cards.
- #F2F6FC — Cerulean Wash: Footer section background and trust badge icon containers providing gentle structural separation.
- #1F69F6 — Vibrant Ultramarine: Primary action buttons, prominent word highlights, graph trendlines, and logo glyph.
- #EBF2FE — Ice Blue Tint: Background fill for trust icon tiles and active dashboard status indicators.
- #0F172A — Obsidian Slate: Display headlines, section titles, card labels, and primary brand typography.
- #475569 — Muted Slate: Explanatory subtext, navigation links, and descriptive secondary copy.
- #94A3B8 — Neutral Gray: Form placeholders, copyright notices, timestamp labels, and chart axes.
- #10B981 — Clinical Emerald: Checkmark verification states, completion pills, and positive health delta tags.
- #F59E0B — Cautionary Amber: Security shield badge stroke denoting personal privacy and data ownership.
- #E2E8F0 — Divider Mist: Hairline strokes on inputs, cards, and bottom legal delimiter boundaries.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 48px display. Tracking -0.025em at display, 0em at body. The type voice is modern, reassuring, and impeccably clear, typical of contemporary digital health innovators. Plus Jakarta Sans provides crisp geometry with humanist touches that soften clinical severity while projecting scientific authority. For open-source implementations, Inter or DM Sans serve as seamless substitutes with identical baseline metrics.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled with clinical subtlety, avoiding heavy skeuomorphism or stark dark drop shadows. Floating cards utilize an ultra-diffuse, low-opacity ambient blur (0px 20px 40px -15px rgba(15, 23, 42, 0.07)) combined with a crisp 1px perimeter border #F1F5F9. Interactive buttons rely entirely on high-contrast flat fills rather than elevation changes.
IMAGERY
Visual elements avoid generic lifestyle photography, opting instead for faithful, high-fidelity UI telemetry mockups. The dashboard visual features authentic medical health metrics: 7-day sparklines, energy scores, and daily check-in logs rendered in pure vector lines. Illustrations or decorative 3D assets would feel gimmicky and contradict the authoritative clinical tone.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the punctuated two-line headline where the closing word 'clear.' is styled in vibrant #1F69F6 against obsidian text, paired immediately with clinical credentialing badges directly below the CTA. It solves the user's anxiety instantly by marrying clarity of language with explicit data security guarantees.
MUST
- Highlight key final headline words using primary brand blue #1F69F6 for immediate semantic emphasis.
- Maintain generous 80px to 96px vertical section spacing to preserve a calm, medical-grade breathing room.
- Use 10px border radius uniformly across interactive elements like buttons, inputs, and icon frames.
- Pair trust badges directly below the CTA cluster to alleviate user friction regarding health data privacy.
AVOID
- Do not introduce heavy black drop shadows; keep elevation strictly below 0.08 opacity slate tones.
- Do not use harsh 0px sharp corners; the interface relies on soft radii to feel approachable.
- Do not color entire sentences in brand blue; restrict vibrant blue to actions and single-word accents.
- Do not use saturated warning colors like red; stick to calm emerald green and soft amber for metrics.
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 中尝试 
