Design a light-mode website section: sterile clinical precision warmed by high-confidence indigo and luminous card architecture.
LAYOUT
The section is constructed as an asymmetrical two-column layout sitting atop an integrated baseline trust ribbon. The left column (approximately 45% width) holds editorial persuasion: the category badge, a two-line display headline, explanatory paragraph, dual action triggers, and a horizontal triplet of feature points. The right column (55% width) features a self-contained proof dashboard split horizontally into a top 4-column KPI strip and two side-by-side technical specification panels. The bottom trust ribbon spans the full grid width with five evenly distributed compliance proof points.
PALETTE (use these exact hex values)
- #F8F9FC — Canvas Background: ambient page background with faint periwinkle radial wash
- #FFFFFF — Pure Card Surface: elevated content cards, metric panels, and pill badges
- #1A56DB — Primary Cobalt: primary interactive buttons, hero keyword emphasis, and active dashboard links
- #0F172A — Obsidian Body: display headlines, major numerical metrics, and section titles
- #5A6578 — Slate Neutral: descriptive paragraphs, microcopy subtitles, and table metric names
- #059669 — Clinical Mint: positive percent indicators, trend lines, and verification checkmark icons
- #6366F1 — Lavender Accent: eyebrow badge text, pill borders, and circular feature icon glyphs
- #E2E8F0 — Hairline Border: structural bounding borders separating nested card modules
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 18px subheading, 26px heading, 44px display. Tracking -0.03em at display, 0 at microcopy. The typographic tone is authoritative, highly disciplined, and modern, conveyed through a pristine neutral geometric sans serif like Inter. It bridges high-stakes medical reliability and enterprise SaaS automation through strict hierarchy and tight tracking on display headings. In open-source setups, Inter or Plus Jakarta Sans perfectly preserves the balanced x-height and clear tabular numerals essential for financial telemetry.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled with exceptional restraint via ambient, diffuse shadows rather than stepped directional lighting. The primary right-hand dashboard card hovers using a subtle box-shadow (0 20px 40px -15px rgba(26, 86, 219, 0.07)) that blends into the background's soft lavender gradient floor. Inner nested cards avoid shadows entirely, relying solely on 1px neutral borders to delineate hierarchy.
IMAGERY
This interface intentionally avoids photographic stock imagery or lifestyle doctor portraits in favor of pure UI visualization as proof. Real-world credibility is communicated through structured tabular data, clean micro-illustrations, and standardized outline iconography. Any abstract 3D shapes or decorative lifestyle photography would dilute the clinical software seriousness.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline pairing with an embedded operational telemetry card acting as the hero illustration. Rather than using an abstract mock-up, the UI itself serves as the hero artwork, divided into a quad-metric header and twin sub-cards (feature checklist vs live reporting stream) wrapped in a unified 16px radius vessel.
MUST
- Reserve the bold cobalt color (#1A56DB) exclusively for the key brand word in the headline, primary button, and select key telemetry numbers.
- Enclose multi-step proofs within a structured monolithic card containing internal hairline borders.
- Pair emerald green (#059669) only with affirmative metrics, checkmarks, and upward trends to denote clinical accuracy.
- Use tight negative tracking (-0.03em) on headings above 32px to retain high-density medical authority.
AVOID
- Never introduce heavy black drop shadows; keep elevation diffuse using high-blur (30-40px) low-opacity cool tones.
- Do not fill icon containers with saturated solid backgrounds; use fine 1.5px stroke weight outlines.
- Avoid using more than one primary cobalt fill button within the same viewport row.
- Never omit the hairline border (#E2E8F0) around floating white cards against light backdrops.
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 中尝试 
