Design a light-mode website section: clinical rigour meets developer ergonomics across an airy gradient hero and a commanding obsidian footer.
LAYOUT
A two-stage vertical progression: top stage features a clean 50/50 horizontal split presenting the value proposition and dual CTAs on the left against a live terminal window on the right. Immediately below, three trust metrics provide horizontal grounding. The bottom stage is a continuous obsidian slab containing brand identity, compliance chips, newsletter form, four navigation columns, and a legal utility bottom bar.
PALETTE (use these exact hex values)
- #F2F5FB — Canvas Gradient Top: ambient hero canvas background with light blue-indigo cast
- #0B111E — Deep Harbor Obsidian: primary container surface for terminal preview and the full-width footer
- #0E1626 — Terminal Card Base: elevated terminal card body surface inside the hero preview
- #2F54EB — Electric Cobalt: primary call-to-action buttons, active toggles, and subscribe action
- #0A0D14 — Text Primary Light: main titles and primary statements on light canvas
- #525D73 — Text Secondary Slate: subtitles, supporting copy, and metadata captions on light canvas
- #8B95A5 — Text Dark Mode Inactive: footer links, copyright text, and terminal column headers
- #10B981 — Status Success Green: terminal active indicator and completed status pills
- #F59E0B — Status Warning Amber: terminal enrolling status pill and telemetry highlights
- #1C2638 — Dark Border Stroke: subtle boundaries for terminal panel, badge strokes, and input outlines
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 48px display. Tracking -0.025em on display, -0.01em on body. The voice is hyper-precise, institutional yet modernized. Inter handles heavy lifting with an uncompromising -0.025em display tracking that feels engineered rather than expressive. JetBrains Mono injects authentic developer craft into clinical metrics, reassuring biotech engineers that the platform is technical rather than superficial.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is achieved through severe tonal contrast rather than layered blurs. The dark terminal window sits atop the pale gradient via a faint 1px border (#1C2638) backed by a 24px soft black shadow (rgba(11, 17, 30, 0.16)). The massive footer creates an unmissable geological baseline without relying on drop shadows.
IMAGERY
Avoided entirely in favor of programmatic vector artifacts: an ultra-crisp CLI terminal window, wireframe geometric polygons floating softly in the ambient hero background, and precise SVG micro-sparklines. Any photographic stock imagery or decorative illustration would compromise the developer-grade clinical authority.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an executive-level clinical CRO headline on an airy canvas paired directly with an authentic dark CLI terminal window featuring live tabular trial data and inline sparklines.
MUST
- Anchor primary dark elements with 1px border (#1C2638) to preserve edge definition against both light and dark grounds.
- Prefix primary CTA buttons with monospace developer symbols ('>_') to tie marketing directly to the product's identity.
- Use uppercase, letterspaced 11px font for the kicker question ('READY TO TRANSFORM TRIAL OPERATIONS?').
- Keep terminal status chips strictly semantic: amber for enrolling, cyan/blue for ramping, green for active.
AVOID
- Do not use generic soft multi-colored drop shadows; stick to subtle dark slate box-shadows or crisp 1px strokes.
- Never replace monospace CLI trial listings with generic marketing icon grids.
- Do not invert the hero to fully dark mode; the contrast between airy ice-blue hero and obsidian footer is essential.
- Avoid pill radiuses on major rectangular panels; keep card corners at 16px and preserve pills strictly for tags.
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 中尝试 
