Design a light-mode website section: gentle healthcare intelligence softened by luminous white pill cards and quiet indigo gradients.
LAYOUT
An asymmetric Bento-grid structure consisting of a top two-column split (approx. 58% hero showcase card on left, 42% vertical four-card stack on right) spaced by 24px gutters. A unified 100% width horizontal metric banner spans the bottom, creating an anchoring foundation. Visual weight flows sequentially from headline to mockup, then across the feature cards, finishing at the quantitative proof bar.
PALETTE (use these exact hex values)
- #F8F9FD — App Canvas: Full-bleed atmospheric page background behind floating bento surfaces
- #FFFFFF — Surface Pure: Primary surface for cards, dashboard containers, and interactive tiles
- #0E1527 — Text Primary: Headings, primary metrics, card titles, and high-emphasis labels
- #5E6B82 — Text Muted: Body copy, subheaders, and descriptive task details
- #4F46E5 — Brand Indigo: Gradient text emphasis, dashboard navigation rail, and primary badge icons
- #EEF2FF — Soft Blue Tint: Background pill fill for tags, micro-badges, and icon backdrops
- #E8ECF4 — Border Subtle: Container card stroke and interior dashboard division lines
- #10B981 — Teal Success: Positive stat indicator arrows and completed badge status text
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px heading, 32px heading-lg, 40px display. Tracking -0.02em at display, 0 at body. The typography relies on a clean, geometric neo-grotesque (matching Inter or Plus Jakarta Sans) tuned for utmost clarity. It strikes a balance between clinical dependability and consumer-grade product polish by setting headlines with tight letter tracking (-0.025em) and body copy with relaxed vertical rhythm.
GEOMETRY & SPACING
Corner radii — cards 24px, links 8px, inputs 12px, buttons 9999px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through soft, high-diffusion drop shadows (0 16px 40px -10px rgba(18, 38, 92, 0.05)) paired with 1px border strokes (#E5EAF2) on pure white containers. A faint radial glow (blend of soft cyan #67E8F9 and indigo #818CF8 at 15% opacity) bleeds subtly behind the embedded UI preview to float it off the white card face.
IMAGERY
The design eschews photographic imagery in favor of clean vector iconography (2px stroke line art) and high-fidelity, miniature SaaS UI abstractions. Any photo integration would disrupt the clinical, high-efficiency software aesthetic unless masked in an identical 24px rounded card.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the ambient, blurred cyan-indigo atmospheric underglow nestled exclusively within the left hero container, which lifts the embedded white command centre mockup cleanly away from the white card background without using harsh borders.
MUST
- Use generous 24px radius on all main bento layout containers for a rounded, calm presence.
- Restrict bright saturated colors to purposeful data tokens and the primary indigo (#4F46E5) brand accent.
- Layer cards over an off-white canvas (#F8F9FD) with a 1px border (#E8ECF4) and deep diffuse shadow.
- Enclose icon glyphs in tinted 48px circular or smooth squircle backplates.
AVOID
- Do not use sharp 0px or 4px square corners; every element must adhere to modern soft rounded metrics.
- Avoid harsh high-contrast black strokes; all dividers must be light pastel grey-blue (#EDF0F8).
- Do not let the background glow overpower text legibility; keep atmospheric blur radius above 80px.
- Avoid solid dark theme elements outside of the small indigo sidebar in the UI mockup.
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 中尝试 
