Design a light-mode website section: clinical operations engineered with developer-grade infrastructure and deep midnight precision.
LAYOUT
The visual journey transitions from an airy, dual-column light CTA container into a structured, full-bleed midnight footer. The CTA divides evenly: value proposition and primary conversion links on the left; tabbed API developer console with compliance tags on the right. Below, the dark footer arranges information into a comprehensive 6-column directory capped by a discrete copyright and regional selector bar.
PALETTE (use these exact hex values)
- #0b1320 — Midnight Base: Full-bleed background surface for the expansive technical footer and navigation matrix.
- #f3f6fb — Canvas Ice: Outer background surrounding the floating light CTA card section.
- #ffffff — Pure White: Surface for the elevated dual-column CTA container and pill buttons.
- #0d1726 — Code Terminal: Background for the interactive code sample block inside the developer preview card.
- #2563eb — Infra Blue: Primary interactive color for buttons, key value headlines, active links, and brand mark.
- #e2e8f0 — Slate Border Light: Hairline separator lines on the light CTA card and badge wrappers.
- #1e293b — Slate Border Dark: Subtle perimeter outlines for footer inputs, social icon boxes, and status panels.
- #0f172a — Text Heading Dark: High-contrast headings and active tab items on light surfaces.
- #64748b — Text Muted Slate: Supporting descriptive copy, line numbers, and inactive light elements.
- #94a3b8 — Text Footer Muted: Column links, copyright notices, and secondary descriptions in the dark footer.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Text,system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 24px heading, 36px display. Tracking -0.02em at display, -0.01em at body. The typography conveys surgical engineering precision through a clean, neutral neo-grotesque sans-serif. Tight letter spacing (-0.02em) on display sizes injects modern confidence, while generous line heights (1.5) on body copy ensure effortless legibility. JetBrains Mono establishes immediate credibility with technical evaluators inspecting the endpoints.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 6px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled strictly via micro-borders and soft tonal shifts rather than heavy drop shadows. The floating CTA card uses an almost imperceptible ambient blur (0 12px 32px -4px rgba(15,23,42,0.04)) paired with a 1px slate border. Within the card, embedded code boxes recede into a darker plane to simulate depth without spatial complexity.
IMAGERY
This interface avoids raster photography entirely, relying instead on interactive interface components as the primary visual artifact. Graphic expression is limited to clean vector iconography (shield, terminal bracket, lightning, checkmarks) and an abstract infinity loop brand mark rendered in glowing blue. Stock medical photography would degrade the authoritative, engineering-led credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The split-personality CTA enclosure that simultaneously pitches clinic operations on the left and renders a functional terminal code preview on the right. It uniquely reconciles healthcare workflow buyers with technical IT decision-makers in a single visual lockup.
MUST
- Use electric blue (#2563eb) solely for interactive items, active states, and focal headline phrases.
- Maintain strict vertical column alignments between the footer categories and bottom legal row.
- Pair monospace code snippets with precise line numbers in deep slate backgrounds.
- Apply hairline borders (#e2e8f0) to separate light surface elements without heavy drop shadows.
AVOID
- Do not saturate headlines entirely with primary blue; restrict colour to the key phrase.
- Never float the CTA card on pure white; it requires a subtly tinted background (#f3f6fb).
- Avoid heavy dark box shadows under the CTA container; rely on a 1px border for definition.
- Do not omit line numbers in API terminal previews; code authenticity is essential.
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 中尝试 
