Design a dark-mode website section: midnight developer console precision meeting sterile, enterprise-grade healthcare compliance infrastructure.
LAYOUT
Vertical progression begins with a monolithic split-hero CTA card containing headline copy on the left and terminal on the right. Directly beneath sits a full-width, four-metric horizontal proof strip bounded by subtle rules. The bottom section unfolds into a 6-column global footer with newsletter subscription, concluding in a legal bar.
PALETTE (use these exact hex values)
- #04070f — Canvas Midnight: Deepest canvas background behind all sections and footer grid
- #080e1a — Surface Elevation 1: Background for floating interactive CTA card container and console terminal
- #060a12 — Terminal Interior: Inner code display background with subtle dark contrast
- #162032 — Border Subtle: Hairline separator lines, card perimeter strokes, and column dividers
- #1e6beb — Electric Blue: Primary CTA button background, submission arrow button, active status
- #40c4ff — Luminescent Cyan: Subtle glow highlights, terminal link states, and interactive hover focus
- #22c55e — Compliance Green: 200 OK status beacon and live environment indicator
- #ffffff — Text Primary: Main headlines, bold badges, button labels, and brand logotype
- #8a99ad — Text Secondary: Supporting descriptions, sitemap links, and metadata captions
- #f472b6 — Code String Pink: Syntax-highlighted strings and payload keys within terminal blocks
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 22px heading, 38px display. Tracking -0.03em display, -0.01em body. The voice is hyper-engineered, stoic, and clinical. Inter provides neutral, highly legible authority for compliance-minded buyers, while JetBrains Mono injects developer-grade rigor that proves technical viability without extra fluff.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 6px, buttons 6px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely without drop shadows. The system uses luminous atmospheric cyan glow behind floating structural panels, paired with 1px border highlights (#162032) and slight background luminance shifts from #04070f to #080e1a.
IMAGERY
No photographic imagery is present. Visual authority is established exclusively through precise line-art icons (shield, lock, bolt, pulse), terminal code syntax, and schematic interface layout.
SIGNATURE DETAIL — the thing that makes this design itself
The two-sided developer hero card that pairs human compliance promises on the left with an active cURL/JSON code terminal and live latency metrics on the right. If replaced by a generic illustration or stock photo, the interface loses its essential technical credibility.
MUST
- Pair monospace code interfaces alongside high-level executive value copy.
- Use micro status dots in green (#22c55e) to communicate real-time reliability.
- Keep borders hairline thin (1px) in dark slate (#162032) to maintain technical crispness.
- Apply deep cyan radial glows under floating hero panels to create focal depth.
AVOID
- Never introduce warm colors, saturated yellows, or playful red tones.
- Do not use heavy, opaque drop shadows; rely on luminous glows and fine borders.
- Avoid pill-shaped round buttons for primary actions; use compact 6px softened rectangles.
- Do not allow code terminal fonts to bleed into general marketing copy.
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 中尝试 
