Design a dark-mode website section: clinical precision transitioning from pristine laboratory white to deep operational dark mode.
LAYOUT
Vertical dual-section hierarchy: top section is an asymmetrical split hero (text and CTA on the left, wireframe torso on the right) anchored by a full-width terminal block. The bottom section is a structured 5-column navigation grid topped by brand info, followed by an operational telemetry status bar, and resolved with a compact copyright row.
PALETTE (use these exact hex values)
- #f8fafd — Canvas Hero: Background for the upper CTA and 3D visual showcase.
- #040d1a — Canvas Footer: Dominant deep navy foundation for the entire lower footer section.
- #081325 — Console Surface: Background for the developer code terminal block.
- #2563eb — Primary Cobalt: Primary CTA fill, headline gradient highlight, and subscribe button.
- #10b981 — Operational Emerald: System status lights, 201 response tags, and rate limit progress fill.
- #94a3b8 — Slate Text Muted: Footer link columns, descriptions, and code syntax metadata.
- #ffffff — Pure White: High-contrast headings, active tabs, and primary labels on dark.
- #1e293b — Subtle Dark Border: Dividers, input field outlines, and status dashboard container borders.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 44px display. Tracking -0.02em at display, 0 at body. Inter provides a clean, highly legible structural voice suitable for scientific enterprise software. JetBrains Mono balances this with developer credibility inside the terminal and telemetry blocks. System fallbacks like SF Pro or Roboto preserve the neutral, precision-driven tone.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled strictly through surface value shifts and razor-thin borders rather than ambient shadows. The API terminal elevates from the light background through its deep navy tone, while floating biometric chips on the hero use an ethereal, soft-spread box-shadow (0 8px 24px rgba(0,0,0,0.06)).
IMAGERY
Light, translucent 3D mesh wireframes representing human anatomy, dotted with precise coordinate grid marks and floating data cards. Generic lifestyle stock photography or non-clinical illustrations would immediately break the developer-biotech aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated live API terminal docked immediately below the hero copy, visually bridging the gap between high-level medical positioning and low-level code implementation.
MUST
- Use uppercase 11px tracking for column headers and telemetry category tags.
- Pair code snippets strictly with monospaced typography and color-coded HTTP status badges.
- Maintain high contrast between active system green (#10b981) and dark navy surfaces.
- Frame telemetry metrics in compartmentalized columns with 1px border dividers.
AVOID
- Do not use warm or earthy tones; the palette is strictly clinical blue, slate, and navy.
- Do not omit the dark code console when replicating this hero CTA style.
- Do not use heavy, harsh drop shadows on cards—rely on subtle 1px border outlines.
- Do not center-align the footer columns; keep all link lists left-aligned.
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 中尝试 
