Design a light-mode web interface screen: clinical authority tempered by airy daylight, pillowy rounded geometry, and electric cobalt focus.
LAYOUT
The workspace uses an asymmetrical hybrid structure: an anchored 240px navigation column on the left with continuous vertical utility, alongside a wide scrollable viewport on the right. Content rhythm is clearly partitioned into distinct horizontal stages: utility header, high-impact hero block, 4-column quick action grid, split video and benefit column, and multi-tier specialty matrix. Gaps between sections hold firmly at 48px to 64px, ensuring breathing room between dense diagnostic categories.
PALETTE (use these exact hex values)
- #F8FAFD — Canvas Ice: Global application page background behind sidebar and dashboard cards
- #FFFFFF — Surface White: Elevated card backgrounds, input containers, and sidebar base panels
- #2B6BEE — Cobalt Primary: Primary CTAs, active sidebar pills, search focus states, and key metric badges
- #0F172A — Navy Heading: Display titles, section headings, card titles, and high-emphasis labels
- #64748B — Muted Slate: Supporting descriptions, breadcrumbs, placeholder text, and inactive nav icons
- #EDF2F7 — Hairline Border: Low-contrast card perimeter lines and horizontal section dividers
- #EFF5FF — Soft Cobalt Tint: Active navigation item background and appointment icon tile backing
- #10B981 — Mint Teal: Success states, checklist checkmarks, and location action icon tile
- #EF4444 — Emergency Coral: Emergency care badge, alert counts, and unread notification indicators
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 32px heading, 48px display. Tracking -0.02em at display, 0em at body. Plus Jakarta Sans delivers an immaculate, contemporary European healthcare presence. The clean geometric counters and tall x-height project clinical precision while remaining friendly and human. Inter or Outfit can be substituted seamlessly if licensed weights (400 through 700) are maintained.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1440px container, comfortable density.
DEPTH
Depth is created using gentle atmospheric layers rather than dramatic elevations. Grounded cards sit flat on the tinted canvas with a 1px hairline border (#EDF2F7) and an optional 0px 4px 20px rgba(15, 23, 42, 0.04) ambient shadow. Floating elements, such as the hero rating pill and video play button, rely on higher-intensity white backgrounds with 0px 12px 32px rgba(43, 107, 238, 0.12) to feel levitated above the graphics.
IMAGERY
Photography depicts bright, sunlit clinical environments and smiling, confident medical practitioners in clean modern scrubs and lab coats. Visual assets are silhouetted cleanly or encased in generous 16px rounded viewports with high key lighting. Moody, grainy, or clinical emergency room scenes with harsh lighting are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive interplay between clinical cobalt (#2B6BEE), soft tinted pastel icon plates (blue, mint, coral, purple), and circular graphic backings behind doctor cutouts. This creates a signature 'reassuring sanctuary' feel where medical rigor meets modern consumer software elegance.
MUST
- Keep card backgrounds strictly #FFFFFF against the #F8FAFD canvas for micro-contrast.
- Use 16px to 20px corner radii for cards to maintain a gentle, reassuring healthcare feel.
- Limit solid cobalt (#2B6BEE) fills to one dominant call-to-action per visual viewport.
- Pair colored category icons with their dedicated ultra-light pastel badge backgrounds.
AVOID
- Never use pure black (#000000) for text; always anchor to deep slate navy (#0F172A).
- Do not drop sharp 0px or 4px box corners into content cards or floating pills.
- Avoid heavy dark drop shadows; stick to low-opacity (4-8%) ambient diffused blurs.
- Do not use saturated red anywhere except for emergency services or critical notifications.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1616:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
