Design a light-mode website section: clinical precision softened by serene lavender halos and tactile cloud cards.
LAYOUT
Two-column asymmetric layout balanced on an expansive 1360px container. Left column contains a vertical marketing stack: category pill, dual-tone display headline, description, 3 mini-value propositions, dual CTAs, and avatar trust badge. Right column holds a slightly angled, elevated full-width product UI mockup with an overlapping interactive toast breaking the grid in the bottom-right.
PALETTE (use these exact hex values)
- #ffffff — Base White: Main canvas background and primary dashboard card shell surface
- #f8fafc — Subtle Grey Wash: Background for dashboard interior metric tiles and hover fills
- #e2e8f0 — Border Slate: Delicate 1px borders around cards, pill containers, and secondary buttons
- #375dfb — Cobalt Blue: Primary hero text accent, active icons, primary button fill, and AI badge tint
- #0f172a — Deep Charcoal: Primary display headline, dashboard metric numbers, and section headers
- #64748b — Muted Slate: Hero description copy, subtitle captions, timestamps, and inactive sidebar icons
- #10b981 — Emerald Success: Positive trend indicators, active agent green dots, and completion metrics
- #e11d48 — Rose Alert: Care gap alerts, at-risk chart slices, and notification pings
- #06b6d4 — Cyan Teal: Feature card icon background and progress track accents
- #f59e0b — Amber Rating: Star rating review icons in social proof block
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700/800. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 18px body-lg, 24px heading, 32px heading-lg, 56px display. Tracking -0.03em on headlines, 0 on body. Plus Jakarta Sans delivers an ultra-clean, clinical-yet-modern voice that bridges enterprise healthcare governance with contemporary AI agility. Large optical negative tracking (-0.03em) on headlines makes bold statements crisp, while relaxed body line-heights (1.5) maintain high legibility.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created via soft multi-layered drops with subtle blue chromatic influence. The main dashboard floats over the canvas with a broad 60px blur at 12% opacity, while the AI notification toast sits in a higher z-index with a sharper 20px offset shadow to pop forward. Hairline 1px borders define card edges without needing heavy drop shadows.
IMAGERY
No photographic lifestyle imagery is present in the main hero; visual engagement is driven purely by clean SVG vector graphs, colorful functional icons, and clean dashboard layout mockups. The only human presence is restricted to tiny, trustworthy circular headshots in the social proof banner.
SIGNATURE DETAIL — the thing that makes this design itself
The split-sentence two-color display headline ('Run your care organization. We handle the rest.') paired directly with a high-fidelity, floating product dashboard that sprouts a detached AI foreground insight card. This communicates both strategic value and instantaneous tactical capability in a single glance.
MUST
- Reserve vibrant cobalt #375dfb strictly for the primary sentence fragment and active interactive triggers.
- Use generous corner radii (16px to 24px) for all primary enclosing UI surfaces to retain software friendliness.
- Keep dashboard internal strokes hairline-thin (1px in #f1f5f9 or #e2e8f0) to prevent visual noise.
- Offset the app mock slightly off-center to allow natural overlap of conversational floating elements.
AVOID
- Do not use dark, heavy borders; all card outlines must remain light grey or faint tinted blue.
- Do not style both headline clauses in the same color—the second clause must be brand cobalt.
- Avoid harsh black drop shadows; all shadows must have low opacity with a slight indigo tint.
- Do not clutter the app preview with real photography; keep it exclusively typographic and vector-based.
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 中尝试