Design a light-mode website section: sterile clinical laboratory daylight shifting into deep computational obsidian at midnight.
LAYOUT
Centered single-column stack on the white canvas: top headline, supporting paragraph (max-width 640px), dual CTA buttons, followed by the single-line terminal command container. The canvas then abruptly transitions to a full-bleed dark footer containing a 5-column layout: left column houses logo, company thesis, operational badges, and newsletter; right four columns house structured vertical navigation links; bottom baseline contains copyright, legal links, and trust badges.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Background surface for the primary conversion tier and CTA zone.
- #090D16 — Obsidian Deep: Base background for the comprehensive developer footer surface.
- #111726 — Obsidian Elevated: Surface for status indicators, input containers, and compliance badges.
- #0D5DF6 — Cobalt Electric: Brand accent, primary button fills, headline emphasis, and interactive links.
- #EFF4FE — Cobalt Tint: Background fill for the API pill badge in the CLI runner.
- #22C55E — Operational Green: Semantic status dots and compliance verification iconography.
- #0A0D14 — Text Primary Light: Primary heading typography on the white CTA surface.
- #525866 — Text Secondary Light: Subtitle paragraphs and command string labels on light backgrounds.
- #F8FAFC — Text Primary Dark: Column headings, brand titles, and active buttons in the dark footer.
- #8590A6 — Text Muted Dark: Navigation links, copyright strings, and placeholder text in footer.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.03em at display, -0.01em at body. Disciplined, clinical, and computationally precise. The grotesque sans-serif (Inter match) conveys institutional authority and biotech rigor without tech-bro playfulness. The inclusion of JetBrains Mono in the CLI preview anchors the platform firmly as an API-first tool for serious computational scientists.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is flattened and architectural. Surfaces rely on hairline 1px strokes (#E2E8F0 on white, #1E293B on obsidian) rather than diffuse drop shadows. The sole perception of depth arises from the stark contrast between the bright white daylight CTA plane and the midnight void of the lower footer.
IMAGERY
Vector-based scientific graphics resembling molecular protein folds and DNA helical strands. Rendered in monochromatic ice-blue halftones at very low opacity (8-10%), bleeding off the left and right margins. Photo-realistic lab photos or saturated 3D renders would severely violate the minimalist clinical aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The abrupt split-horizon transition between a clinical daylight white CTA tier and a deep obsidian developer footer, bridged by a floating single-line CLI terminal snippet. Misuse commonly occurs by attempting to soften the horizon with a dark-to-light gradient or by placing high-opacity illustrations that distract from the terminal prompt.
MUST
- Retain the sharp boundary between white CTA space and dark footer without gradient blends.
- Use electric blue #0D5DF6 sparingly for high-priority CTA actions and brand emphasis.
- Ensure scientific watermarks remain sub-15% opacity to avoid collision with copy.
- Maintain monospace formatting for all code arguments, flags, and CLI commands.
AVOID
- Never blur or gradient-fade the transition between the white CTA and dark footer.
- Do not color entire sentences in blue; restrict #0D5DF6 to specific key phrases.
- Avoid thick shadows; structure surfaces purely through 1px border strokes (#E2E8F0 and #1E293B).
- Do not use colorful saturated imagery; maintain strictly monochrome or pale cyan biology art.
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. Try in DraPub 
