Design a light-mode website section: clinical engineering rigor rendered in soft white planes, cobalt accents, and structured architectural diagrams.
LAYOUT
The section is structured in two distinct tiers within a 1280px container. The top tier splits between a left-aligned headline block and a right-aligned 5-item horizontal step chain. The bottom tier is an asymmetric 3-column bento grid: left column stacks Steps 1 & 2, center column houses the wide Step 3 architecture diagram, and right column stacks Steps 4 & 5.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Dominant background for the main canvas and primary content cards
- #FAFAFC — Card Surface Subtle: Background fill for nested micro-containers, integration slots, and code tags
- #1D4ED8 — Primary Blue: Eyebrow tag, active step indicators, key nodes, primary metric digits, and icon accents
- #EFF6FF — Soft Brand Tint: Faint blue fill for active chips, icon backgrounds, and badge rings
- #0F172A — Text Slate Dark: Primary headings, step titles, metric values, and bold structural labels
- #64748B — Text Slate Muted: Supporting descriptive copy, subtitle paragraphs, and metadata captions
- #E2E8F0 — Border Subtle: Single-pixel hairline borders on cards, diagrams, pills, and connector lines
- #10B981 — Status Success: Checkmark icon and background tint for verified/proven state badges
- #F59E0B — Status Warning: Alert icon and counterexample state badge highlight
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 body-lg, 20px subheading, 24px heading, 40px display. Tracking -0.02em for headings, 0.05em for uppercase kickers. The typographic tone is authoritative, objective, and deeply rooted in developer-tooling culture. Inter (or a high-grade geometric grotesque substitute like Plus Jakarta Sans) provides neutral clarity at small diagram label scales while feeling robust and decisive in large headline weights.
GEOMETRY & SPACING
Corner radii — cards 14px, links 9999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through crisp 1px borders (#E2E8F0) paired with an ultra-diffuse, faint drop shadow (0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.02)). Internal diagram nodes sit directly on flat surfaces or slightly recessed tints (#F8FAFC) without elevation.
IMAGERY
No photographic imagery is present. The visual language consists entirely of schema diagrams, node graphs, technical pipeline mockups, and micro-UIs that mirror engineering tools. Any decorative or marketing photo would compromise the clinical verification tone.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tier workflow progression: a linear 5-step numbered overview along the top that maps 1:1 to detailed, interconnected micro-architecture cards arranged in an asymmetric bento grid below.
MUST
- Use exact 1px solid #E2E8F0 borders on all outer card containers and internal sub-panels.
- Reserve vibrant cobalt blue (#1D4ED8) for interactive anchors, numbered step badges, and active state nodes.
- Maintain consistent 14px outer corner radius on main cards and 8px on internal micro-nodes.
- Pair heavy display titles (-0.03em tracking) with high-legibility muted paragraph copy (#64748B).
AVOID
- Never introduce heavy drop shadows, colored glows, or dark outer borders.
- Do not use saturated gradient fills; keep card backgrounds pristine white or subtle #F8FAFC.
- Never omit step numbering; the 1-to-5 narrative structure is essential to customer comprehension.
- Avoid decorative illustrations or 3D mascots; visuals must strictly represent verifiable technical architecture.
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 中尝试 
