Design a light-mode website section: clinical precision bathed in warm apricot and lavender aura glows for high-trust developer tooling.
LAYOUT
The header sits within an elevated floating capsule centered at the top. The hero split-screen features value proposition copy and dual CTA buttons on the left 45%, flanked by an interactive three-column product composition on the right 55% (dock, code terminal, telemetry stack). Beneath the hero fold, an enterprise trust dock spans the full container width before leading into the feature grid.
PALETTE (use these exact hex values)
- #f8f9fc — App Canvas: Outer background carrying subtle peach-to-lavender atmospheric glows
- #ffffff — Card Surface White: Primary card, dock, and floating pill background with crisp drop shadows
- #0d131f — Terminal Void: Deep navy-black container for the interactive API console panel
- #0b1320 — Ink Navy: Main heading text, primary CTA button fills, and strong metrics
- #64748b — Muted Slate: Body copy, navigation links, inactive sidebar icons, and microcopy labels
- #6366f1 — Digital Iris: Gradient start for patient focal text, active icons, and badges
- #ea580c — Warm Coral: Gradient terminus for the key phrase 'Focus on patients.'
- #10b981 — Console Green: Status indicator, 201 Created chip, and upward percentage metrics
- #edf2f7 — Card Border: Subtle boundary definition on white cards, pills, and pill buttons
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 heading, 52px display. Tracking -0.03em display, -0.01em body. The typographic tone is authoritative, approachable, and meticulously engineered. Plus Jakarta Sans provides clean geometric clarity with rounded humanist apertures that feel friendly for healthcare, while JetBrains Mono injects strict engineering credibility. For open alternatives, pairing Inter for body with Space Grotesk for headings closely mirrors this precision.
GEOMETRY & SPACING
Corner radii — cards 20px, links 9999px, inputs 10px, buttons 12px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered through soft, luminous white card elevations floating over a tinted radial background. Shadows are diffuse (0 12px 40px rgba(15, 23, 42, 0.06)) rather than stark, creating an airy, layered tactile stack. Dark terminal surfaces recede while white telemetry cards pop forward.
IMAGERY
This interface avoids stock photography entirely, relying instead on clean interactive product UI components, syntax-colored JSON code, and vector telemetry widgets. Charts use minimalist vector curves in soft pinks and corals, while trust badges feature recognizable compliance stamps (HIPAA caduceus, SOC 2 crest). Any photography would disrupt the authoritative developer-first abstraction.
MUST
- Retain the gradient text strictly on the human-centric phrase 'Focus on patients.' for semantic contrast.
- Pair the deep dark developer console directly beside pristine white metric cards for balanced tech/care authority.
- Maintain generous 20px-24px corner radii across all floating card structures.
- Use micro pill badges with icons to reinforce security credentials and zero setup friction.
AVOID
- Do not make the entire headline a gradient; keep the core action in solid dark ink #0b1320.
- Avoid sharp 0px or 4px radii which break the friendly medical-grade aesthetic.
- Do not saturate card backgrounds; keep them solid white with 1px low-contrast strokes.
- Never hide code samples in technical medical SaaS when targeting modern developer workflows.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
