Design a light-mode website section: clinical developer infrastructure anchored by deep crimson brand accents, crisp monospace terminals, and structured verification architecture.
LAYOUT
The hero employs a balanced two-column desktop arrangement within a 1280px max-width boundary. The left column stacks category pill, H1 headline, explanatory body, dual CTAs, and a combined metric/Product Hunt card. The right column showcases a vertical stack: dark code terminal above, white pipeline architecture diagram below. A 5-column horizontal feature strip spans the bottom edge to anchor the viewport.
PALETTE (use these exact hex values)
- #fbfbfc — Canvas Background: Root page background providing soft, sterile contrast against pure white cards.
- #0e131b — Terminal Canvas: Deep blue-black background for code execution panels and interactive terminal mocks.
- #ffffff — Card Surface: Elevated white background for metrics cards, schema boxes, and light buttons.
- #be1823 — Rubric Crimson: Primary brand accent used for logo mark, category badge borders, and headline keyword emphasis.
- #16a34a — Operational Green: Status indicators, execution pass alerts, live latency ticks, and verification check marks.
- #0f172a — Charcoal Primary: High-contrast text for H1 headlines, primary CTA buttons, and active tabs.
- #64748b — Muted Slate: Supporting descriptive copy, inactive code tabs, line numbers, and metric sublabels.
- #e2e8f0 — Subtle Border: Hairline borders enclosing white cards, structural dividers, and secondary controls.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 60px display. Tracking -0.03em at display, -0.01em at body. The typographical tone is rigorous, confident, and unapologetically technical. Plus Jakarta Sans lends an engineered neo-grotesque authority with clean letter terminals and tight letter spacing. If substituting, Inter or DM Sans retain the required infrastructural tone, provided weights are dialed to heavy bold for headlines and medium for UI elements.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 72px between sections, 1280px container, comfortable density.
DEPTH
Depth is created primarily through flat surface layering and precise hairline borders (#e2e8f0) rather than heavy drop shadows. The obsidian code terminal creates an intense dark-field contrast against the #fbfbfc canvas, acting as a visual anchor. Very soft, ambient diffuse shadows (blur: 24px, opacity: 0.04) are permitted strictly under elevated card containers.
IMAGERY
Avoid photographic assets or generic 3D abstract shapes entirely. The visual language consists exclusively of technical artifacts: real code samples, precise vector flowcharts, geometric iconography, and structured verification badges. Diagram elements must feel like authentic developer tool interfaces with crisp connectors and status pills.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-canvas preview stack: a deep obsidian terminal window displaying live cURL execution stacked directly atop a clean white architectural schema card. This instantly communicates that the platform bridges code-level implementation with high-level system reliability. Misusing it by turning both cards dark or removing the live response telemetry collapses its developer-grade authenticity.
MUST
- Highlight only the single most pivotal operational verb in the hero H1 with brand crimson (#be1823).
- Pair the dark terminal mockup directly with a light-mode architectural diagram to exhibit breadth.
- Use JetBrains Mono or equivalent monospace type exclusively for code blocks, parameters, and verdict text.
- Preserve 16px corner rounding on cards and 10px on interactive action buttons.
AVOID
- Never saturate entire hero backgrounds with brand red; crimson must remain strictly an accent.
- Do not omit line numbers or HTTP status codes in terminal previews.
- Avoid pill radiuses on major rectangular content cards; confine pills exclusively to badges.
- Never let code terminal text wrap arbitrarily; maintain structured indentation and fixed line height.
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 中尝试 
