Design a dark-mode website section: deep midnight canvas illuminated by bioluminescent point clouds, pristine serif editorial authority, and subtle frosted surfaces.
LAYOUT
The section is structured in a vertical cascade within a 1280px container. The top zone features a split two-column hero: a left-aligned headline with body intro, paired with an elevated feature card containing the primary volumetric sphere. Below sits a balanced 5-column grid of equal-width vertical capability cards. The section terminates in a horizontal full-width banner spanning the full width with dual CTAs on the right.
PALETTE (use these exact hex values)
- #02060d — Canvas Background: Deepest midnight black-blue background spanning the entire page layout
- #08101a — Surface Card: Elevated card surface with faint transparency for vertical feature cards and hero callouts
- #162338 — Surface Border: 1px hairline border separating containers from the main canvas
- #f1f5f9 — Text Primary: Highest emphasis typography for headings and hero statement titles
- #8ba1b7 — Text Secondary: Muted slate-cyan body text and descriptive card paragraphs
- #38bdf8 — Accent Cyan: Primary interactive buttons, text links, icon backdrops, and particle effects
- #34d399 — Accent Emerald: Secondary scientific accent used for mechanism elucidation visualisations and badges
- linear-gradient(135deg, #2563eb 0%, #38bdf8 100%) — Button Primary Gradient: Vibrant blue-to-cyan linear fill on the primary CTA button
TYPOGRAPHY
Typeface Instrument Serif (or Newsreader, Editorial New, Playfair Display), weights 400. Sizes 11px caption, 13px body-sm, 14px body, 18px subheading, 22px heading, 46px display. Tracking -0.01em at display, 0 at card titles. The typography blends scholarly biotech authority with cutting-edge software precision. An elegant, high-contrast serif (matching Instrument Serif or Editorial New) lends academic and scientific gravitas to headlines. This is paired with an ultra-neutral geometric sans-serif (Inter/Geist) for micro-copy and interactions, ensuring legibility at small sizes.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical luminance rather than drop shadows. Translucent dark card surfaces (#070e18) with faint cyan hairline strokes (1px #162338) delineate boundaries against the #02060d void. Point-cloud biological assets and glowing spheres cast soft radial blurs behind them to simulate self-illuminated laboratory data.
IMAGERY
Visual assets consist of 3D point-cloud data simulations, neural-like biological meshes, and volumetric glowing spheres set against pitch black. The style evokes computational biology, spatial transcriptomics, and high-dimensional cellular maps. Flat vector clip art, photographic humans, or bright daylight photography would instantly destroy this visual language.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an academic editorial serif heading directly above glowing, hyper-technical point-cloud biological visualisations embedded seamlessly inside dark cards. To use it properly, keep the particle clouds organically illuminated against deep black while setting the card titles in delicate, high-contrast serif.
MUST
- Reserve the serif typeface strictly for headings and card titles to preserve scholarly authority.
- Maintain high contrast between #f1f5f9 display titles and the #02060d background void.
- Use 1px subtle dark-cyan borders (#162338) around cards to separate surfaces without heavy drop shadows.
- Keep icon squircle backgrounds softly tinted with the corresponding card's accent colour at 10-15% opacity.
AVOID
- Never use serif fonts for body copy, buttons, or metadata tags.
- Do not apply heavy drop shadows; depth is strictly created via border luminance and particle glows.
- Avoid bright white borders or solid saturated background panels that break the deep midnight atmosphere.
- Do not use generic vector icons without their dedicated rounded squircle frame.
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 中尝试 
