Design a light-mode website section: clinical engineering rigor met with misty topological landscapes and disciplined developer telemetry.
LAYOUT
The page opens with a standard top navigation bar featuring left-aligned branding, centered nav links, and right-aligned dual actions. Below, the hero splits into an asymmetric two-column composition: the left column houses the launch pill, large headline, description, dual buttons, and compliance block; the right column stacks a 4-step horizontal pipeline directly above a full-width interactive API terminal.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary surface background across the hero header, pill badge, and upper workflow cards.
- #F8FAFC — Cloud Frost: Soft secondary fill used inside card previews, input wrappers, and subtle background tiers.
- #0D1527 — Terminal Slate: High-density dark surface housing the code playground, active tabs, and telemetry logs.
- #131F38 — Terminal Chamber: Inset response container inside the dark code terminal block displaying JSON payloads.
- #2563EB — Electric Cobalt: Emphasized headline focal text, numerical pipeline indices, action states, and primary micro-icons.
- #111827 — Obsidian Ink: Primary headline text, high-emphasis button fills, and dominant structural navigation links.
- #64748B — Muted Slate: Secondary descriptors, unselected code tabs, inactive pipeline text, and metadata bullets.
- #10B981 — Operational Emerald: Status indicator pulse dots in the launch badge and live terminal uptime monitor.
- #E2E8F0 — Divider Zinc: Delicate 1px borders surrounding cards, buttons, pill badges, and directional arrows.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 18px subheading, 24px heading, 56px display. Tracking -0.03em at display, -0.01em at body. The typography balances developer precision with enterprise authority through a tightly kerned, neutral neo-grotesque sans (Inter match). The ultra-bold headline with negative tracking conveys decisive technological readiness, while the monospace console typography signals uncompromised technical rigor.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 72px between sections, 1240px container, comfortable density.
DEPTH
Depth is strictly architectural and planar rather than illusory. There are virtually no visible drop shadows on cards or buttons; separation is achieved via fine 1px borders (#E2E8F0) and stark tonal contrasts between the white canvas and the dark navy code console.
IMAGERY
The visual system contrasts stark, schematic UI abstractions with a wide, soft-focus landscape of rolling mountain ridges grounded along the footer. The photography features muted sage, earth, and misty atmospheric haze, avoiding vibrant nature tropes or clinical stock photos of hospital workers.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-register composition: clinical, white-surface developer schematics floating directly above a grounding, atmospheric landscape photograph, punctuated by an electric cobalt keyword highlight.
MUST
- Reserve #2563EB strictly for purposeful emphasis like final headline keywords and pipeline sequence badges.
- Keep card borders at exactly 1px solid #E2E8F0 with zero drop-shadow to preserve clean clinical sterility.
- Maintain high contrast between the pure white upper application layer and the #0D1527 code console.
- Position the landscape photography strictly along the bottom third as an atmospheric horizon anchor.
AVOID
- Do not introduce gradients into the headline text or pipeline stage cards.
- Avoid heavy drop shadows or diffuse colored glows beneath the terminal component.
- Never replace the dark terminal surface with a light card; the high-contrast split is intentional.
- Do not allow the background mountain imagery to obscure typography or upper interactive cards.
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 中尝试 
