Design a light-mode website section: clinical precision meets generative biological data wrapped in luminous particle ribbon streams.
LAYOUT
Asymmetric two-column split grid within a 1280px container. Left column contains eyebrow tag, 3-line display headline, explanatory paragraph, dual CTA buttons, and a 3-column micro-feature strip. Right column holds the staggered composition of dark API terminal and overlapping white clinical prediction panel backed by the particle field.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary background canvas and base for floating response cards.
- #0E131F — Obsidian Deep: Primary heading typography, core brand wordmark, and primary button fills.
- #111827 — Code Terminal Slate: Background fill for the dark code block and developer terminal surface.
- #335CFF — Cobalt Blue: Headline emphasis, progress metric bars, and primary interactive links.
- #C25E50 — Coral Terracotta: Eyebrow category text above the main hero display headline.
- #E6F7ED — Clinical Mint: Background pill fill for successful 200 OK and clinical tag indicators.
- #128C4B — Clinical Green Text: Text and status color for successful responses and positive bio-markers.
- #4B5563 — Muted Slate Text: Subhead body copy, table labels, and secondary supporting descriptions.
- #E5E7EB — Subtle Border Gray: Outlines on secondary buttons, table rows, and floating card borders.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 14px subheading, 18px body-lg, 24px heading, 56px display. Tracking -0.03em at display, 0.08em at uppercase labels. Authoritative, clinical, and computationally sound. Inter provides neutral high-legibility structure, while tight tracking on the display headline conveys technological sophistication without feeling playful.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through deliberate layer stacking rather than high contrast shadows. The generative particle stream weaves between the background and UI, while the white response card floats atop the dark terminal window using a soft 0px 20px 40px rgba(0,0,0,0.08) drop shadow.
IMAGERY
Abstract generative particle ribbons that mimic DNA helix strands and fluid dynamic wave fields rendered in blue, indigo, and translucent cyan dots. Imagery must feel mathematically generated, scientific, and precise, strictly avoiding stock medical photos or literal microscopic cells.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-layer code terminal and clinical response card assembly interwoven with a 3D generative particle ribbon field. This simultaneously communicates raw API power and structured biological output in a single glance.
MUST
- Keep the canvas strictly clean white to contrast against the dense multi-layer wave graphic.
- Use single-word colored emphasis in the display headline using brand cobalt blue (#335CFF).
- Overlap the white response card slightly across the lower-right portion of the dark code block.
- Include high-contrast badges (e.g. 200 OK in mint green) inside data previews.
AVOID
- Never apply a dark theme canvas to the entire page; only the code editor remains dark.
- Do not use heavy multi-color gradients inside buttons or solid icons.
- Avoid harsh black drop shadows; keep elevation soft, diffused, and cool-toned.
- Never clutter the particle wave with competing photography or dense floating chips.
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 中尝试 
