Design a light-mode web interface screen: calm clinical oversight distilled into crisp cobalt metrics, reassuring emerald tallies, and frictionless patient records.
LAYOUT
The workspace uses a persistent 240px vertical left sidebar housing identity, primary links, and a bottom support widget. The main body opens with a global title row and contextual action bar. Below, content cascades through a 4-column metric card grid, a 2-column analytics split (60% coverage spline, 40% status ring), a full-width patient records table with search filter headers, and a terminating awareness callout banner.
PALETTE (use these exact hex values)
- #F5F7FB — Canvas Ice: Global application viewport background behind floating white cards and navigation panels.
- #FFFFFF — Surface Pure: Background fill for cards, tables, modals, input elements, and the persistent left sidebar.
- #2563EB — Cobalt Shield: Primary interactive color for action buttons, active navigation states, chart lines, and brand insignia.
- #EFF6FF — Active Tint: Subtle background tint for active sidebar pills, icon circle enclosures, and patient initials.
- #111827 — Slate Obsidian: High-emphasis text for primary page headings, metric tallies, patient names, and card titles.
- #6B7280 — Cool Secondary: Mid-tier text for navigation labels, table headers, percentage annotations, and secondary subtitles.
- #E5E7EB — Border Fog: Delicate hairline boundaries separating table rows, chart axes, and form input perimeters.
- #10B981 — Immune Emerald: Affirmative indicator for up-to-date statuses, success badges, and dominant chart segment.
- #F59E0B — Pending Amber: Warning status token for due-soon vaccinations, caution badges, and middle chart sector.
- #EF4444 — Overdue Coral: High-priority alarm state for expired coverage, overdue records, and alert badges.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Figtree, Public Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 24px heading, 30px display. Tracking -0.02em at display, -0.01em at body, 0.02em at caps. Plus Jakarta Sans delivers an open, authoritative, yet thoroughly approachable clinical cadence. The geometric letterforms provide unambiguous numeric legibility at high data density while feeling modern and reassuring. Clean tabular figures are critical for numerical alignment across table columns and KPI blocks.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is rendered flat-to-soft using ambient, barely perceptible drop shadows (0 1px 3px rgba(0,0,0,0.04)) over the pale slate canvas. Cards sit at level 1 with a thin 1px borderline in #F1F4F9 to maintain separation without visual bulk. Floating tooltips and active dropdowns utilize a sharper, high-blur shadow (0 4px 12px rgba(0,0,0,0.08)) to cleanly lift above dense tabular content.
IMAGERY
Photography is confined to circular 32px user profile avatars with authentic, professional headshots. Auxiliary promotional or informational banners utilize gentle, vector-based lifestyle illustrations with friendly flat shapes and pastel tones. Complex stock photography or photographic backdrops are strictly prohibited to protect clinical focus.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the shield-anchored cobalt identity paired with the 3-state clinical health badge taxonomy—where soft-tinted status pills, colored micro-bars beneath KPI tallies, and coordinated donut ring segments speak the exact same color dialect. It fails when arbitrary accent hues (such as purple or cyan) are introduced into clinical metrics.
MUST
- Maintain strict 16px corner radius across all major dashboard card surfaces.
- Use semantic colors (green, amber, red) strictly for medical status states.
- Ensure table rows have a minimum 44px height for touch and click precision.
- Pair every numerical metric with its clear contextual denominator or time interval.
AVOID
- Never use harsh dark shadows; rely on crisp 1px borders and subtle elevation.
- Avoid applying brand blue as a status indicator for patient health conditions.
- Do not crowd cards; sustain at least 20px internal padding throughout.
- Never display raw tabular data without patient initials or visual identifiers.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2784:2960. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
