Design a light-mode website section: crisp clinical precision meets modern 3d SaaS with tactile enterprise assurance.
LAYOUT
Structured around a classic 50/50 two-column hero layout constrained to a 1240px container. Left column stacks headline, subhead, trust indicators, and button group. The right column showcases the comparative 3D architecture graphic, underpinned by a horizontal four-metric proof panel, leading down into a centered client reassurance tagline.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Main page canvas and backdrop for crisp contrast.
- #FFE8E3 — Ambient Peach Glow: Diffused atmospheric radial glow placed in the top right background.
- #136DEC — Primary Electric Blue: Primary interactive buttons, key metrics, and highlighted positive states.
- #0B192C — Deep Slate Ink: Display heading text, logo mark, and high-emphasis labels.
- #505E70 — Muted Slate Gray: Subtitles, navigation link text, and qualitative microcopy.
- #333E4D — Muted Before Slate: Used for 'BEFORE' pill badge and legacy system callout tags.
- #E2E8F0 — Border Subtle: Card borders, secondary button outlines, and vertical dividers.
- #10B981 — Success Mint: Checkmark icons and positive validation indicators within the UI card.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 18px body-lg, 24px heading, 48px display. Tracking -0.025em for display, -0.01em for body, 0.05em for uppercase pills. Inter (or Plus Jakarta Sans) provides an engineered, highly legible, and trustworthy corporate voice. Tight letter-tracking (-0.03em) on large bold headings gives an authoritative presence essential for healthcare logistics, while neutral geometric properties ensure readability at small microcopy scales.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created primarily through realistic 3D isometric rendering rather than heavy UI drop shadows. The UI cards and stats container rely on extremely delicate diffuse shadows (rgba(11, 25, 44, 0.04) with 24px blur) and precise 1px borders (#E2E8F0) to float slightly above the clean background plane.
IMAGERY
Features bespoke isometric 3D product visualizations that juxtapose dark, fragmented hardware-like plates against clean, rounded, illuminated software tiers. Photography is absent; credibility is conveyed through polished rendering, technical diagrams, and authoritative security icons.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-state isometric architectural contrast: dark, fragmented legacy strata on the left transitioning into an illuminated, unified white-and-blue platform slab with clean floating pill callouts. Replicating this requires showing both states side-by-side with clear directional indicators, not just the finished software product.
MUST
- Keep typography high-contrast using #0B192C for headings against pure white canvas.
- Use pill-shaped status badges strictly for the 'BEFORE' and 'AFTER' contextual tags.
- Maintain generous 72px+ vertical separation between hero narrative and secondary social proof.
- Pair primary electric blue (#136DEC) with clear micro-interactions such as right-facing arrows.
AVOID
- Do not saturate the background; keep the warm peach atmospheric gradient localized to one edge.
- Do not use dark backgrounds for cards on the modern 'AFTER' software representation.
- Do not mix rounded pill buttons with the standard 8px radius form actions.
- Do not omit compliance badges (HIPAA, SOC 2) as they establish required health-tech authority.
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 中尝试 
