Design a light-mode website section: clinical clarity meets code execution against a sterile, particle-sculpted canvas.
LAYOUT
The header spans full width with logo left, centered section links, and right-aligned dual actions (Sign in + CTA). The hero is an asymmetrical two-column layout: headline, subcopy, and dual CTAs on the left; floating particle art and code window on the right. Anchoring the hero is a four-column credential bar divided by fine vertical rules.
PALETTE (use these exact hex values)
- #FAFAFA — Canvas Background: Primary light canvas background spanning the viewport
- #0C1322 — Console Surface: Deep navy-black fill for the interactive API simulation window
- #1E293B — Console Border: Fine 1px structural stroke on the API console container
- #D05849 — Primary Terracotta: High-priority CTA buttons and system status indicator dot
- #3B66DE — Cobalt Highlight: Hero headline emphasis and API method badge background
- #4ADE80 — Success Green: Success badges, 200 OK status, and validation checkmarks
- #0F172A — Text Primary: Headlines, primary stat values, and prominent navigation labels
- #475569 — Text Secondary: Subtitles, body paragraphs, and secondary navigation links
- #94A3B8 — Text Muted: Code comment keys, line numbers, and metric captions
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 28px heading, 56px display. Tracking -0.03em at display, 0 at body. The typography conveys surgical, no-nonsense engineering authority. A neutral neo-grotesque (Inter match) set with tight negative tracking gives the short, punchy headline monumental weight. JetBrains Mono balances the clinical tone with pure developer utility, asserting that biology is here treated as an exact, programmable software system.
GEOMETRY & SPACING
Corner radii — cards 12px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created flatly and surgically. The dark console card achieves lift through a subtle 20px blur drop shadow against the soft off-white background and particle field. Interior surfaces inside the console rely solely on hairline borders (#1E293B) rather than layered elevation.
IMAGERY
Biological concepts are rendered as abstract, high-density point-cloud particle meshes in soft cyan and indigo (#60A5FA to #38BDF8). The aesthetic mimics computational molecular modeling and cryo-EM density maps rather than photorealistic renders or literal medical stock photography. Clean, vector line-art icons accompany the bottom stat modules.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an assertive, large grotesque headline ('Destroy all cancers.') directly adjacent to a working REST API JSON console superimposed over a stippled biological point cloud. This visual equation instantly signals that life-saving therapeutic biology is being executed via computational code.
MUST
- Reserve the terracotta color (#D05849) strictly for primary actions and critical attention marks.
- Highlight specific key numerical metrics within headlines using vivid cobalt blue (#3B66DE).
- Pair monospace code viewports with fine structural 1px borders in deep navy (#1E293B).
- Use a stippled or point-cloud visual treatment for biological motifs rather than glossy 3D renders.
AVOID
- Do not use dark themes for the entire page canvas; keep the background bright and clinical.
- Avoid pill radiuses on buttons; CTAs use tight 6px corners while pills are reserved for badges.
- Do not saturate secondary buttons; leave them as light outlines with white fills.
- Avoid heavy drop shadows; elevate the code terminal with a diffuse, low-opacity spread.
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. Try in DraPub 
