Design a light-mode website section: clinical precision meets developer infrastructure in a split light-to-dark canvas transition.
LAYOUT
The page follows a sharp horizontal tripartite rhythm. The top tier features a balanced two-column hero CTA (headline and actions left, interactive code terminal right). The middle tier is an unbroken 48px high enterprise compliance and uptime bar. The bottom tier transitions into a deep navy footer structured as a 5-column navigation grid flanked by an interactive contact callout.
PALETTE (use these exact hex values)
- #FAFAFC — Light Canvas: Background canvas for the upper CTA and hero showcase area
- #050811 — Dark Canvas: Primary ground for the dense technical footer container
- #0A0E17 — Terminal Surface: Background for the floating API terminal window card
- #0E1526 — Footer Card Surface: Elevated container background for the footer contact panel
- #4338CA — Primary Indigo: Primary CTA fill, emphasis gradient word in title, and logo icon accent
- #10B981 — Status Green: Live indicators, status dots, 200 OK badges, and uptime flags
- #0F172A — Ink Dark: Primary headline and text color on the light canvas
- #64748B — Muted Slate: Subtitles, labels, and light theme secondary copy
- #94A3B8 — Footer Muted: Footer navigation links, copyright, and secondary metadata
- #FFFFFF — White Text: Headings, status values, and primary text within dark footer
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Display,system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.03em at display, 0.05em at micro caps. The typography communicates institutional reliability and surgical precision. Neutral neo-grotesque sans-serif headlines with tight tracking (-0.03em) suggest modern product authority, while the deliberate injection of monospace accents in the eyebrows and telemetry strips evokes verified enterprise tooling.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created strictly through surface contrast rather than diffused drop shadows. The terminal card uses a crisp 1px border in #1E293B with a very soft, dark ambient shadow (0 12px 32px rgba(0, 0, 0, 0.12)) to lift off the light canvas, while footer cards sit flat on their dark parent with only border stroke separation.
IMAGERY
This design completely avoids illustrative or photographic imagery, relying entirely on programmatic artifacts: API requests, real JSON response payloads, SVG status badges, and precise stroke-based technical iconography. Any decorative lifestyle photo or 3D cartoon asset would directly contradict this clinical developer voice.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden, unmasked boundary between a luminous clinical SaaS value proposition and a midnight-dark developer terminal footer, stitched together by a razor-thin, live operational health ticker.
MUST
- Use JetBrains Mono specifically for status chips, telemetry, code snippets, and eyebrow tags.
- Pair the electric indigo button (#4338CA) directly with an adjacent secondary white button.
- Keep terminal chrome minimal with simple dot indicators and precise HTTP status markers.
- Use semantic emerald green (#10B981) exclusively for positive, live, and compliant states.
AVOID
- Do not soften the hard boundary between the light CTA canvas and dark footer with large gradients.
- Do not use colorful badges inside the footer; restrict tags to monochrome or deep muted fills.
- Do not scale code typography beyond 13px inside the terminal window.
- Do not mix rounded pill buttons with squared cards; adhere strictly to 10px radius on buttons.
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 中尝试 
