Design a dark-mode website section: deep midnight glassmorphism meeting organic bioluminescence, balancing computational precision against raw ecological depth.
LAYOUT
The section follows a classic 50/50 two-column desktop hero layout within a 1360px container. The left column commands narrative attention with a bold three-line headline, explanatory paragraph, dual CTA cluster, and a floating trust badge. The right column is dedicated entirely to a dense, multi-module interactive platform cockpit showcasing molecular models, sequential workflow pipelines, and query consoles.
PALETTE (use these exact hex values)
- #05090e — Midnight Abyss: deep background canvas underlay beneath photography and ambient gradients
- #0c1a2d — Subsea Glass: translucent background base for application consoles and floating metric cards
- #1d3652 — Glass Membrane Border: 1px hairline stroke defining boundaries of all interactive glass panels and cards
- #1e6cf4 — Bio Blue: starting anchor for primary buttons, active workflow nodes, and gradient headline
- #3ae4ab — Bioluminescent Mint: terminal gradient stop, live status indicators, circular chart active rails, and headline highlight
- linear-gradient(135deg, #1e6cf4 0%, #3ae4ab 100%) — Spectral Gradient: primary call-to-action button fills and accent typography spans
- #ffffff — Pristine Snow: hero headline, prominent stats, primary button labels, and active navigation items
- #8ea6c1 — Starlight Slate: body copy, inactive tabs, table captions, and secondary metric labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 15px body, 17px subheading, 24px heading, 36px heading-lg, 56px display. Tracking -0.03em at display, -0.01em at body, 0.04em at captions. The typographic tone is ultra-precise, clinical, and computationally authoritative. Inter brings neutral, modern grotesque clarity that renders flawlessly in small data tables and terminal lines. Geist Sans or Plus Jakarta Sans make seamless drop-in replacements, maintaining the rigorous -0.025em display tracking.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1360px container, tight density.
DEPTH
Depth is created through optical glass layers rather than traditional drop shadows. A dark photographic base provides spatial horizon, upon which frosted glass panels (rgba(10, 22, 38, 0.75)) sit with subtle 1px luminous edge strokes (#1d3652) and localized back-glows emitted by cyan data points and molecular renders.
IMAGERY
The visual foundation relies on macro-scale nocturnal natural landscape photography featuring bioluminescent moss, mushrooms, and spores on damp terrain. The image is treated with a heavy top vignette and cool navy color grade to ensure technical copy readable while providing organic authenticity. Cartoon illustrations or sterile stock lab photos would completely break this aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the juxtaposition of raw bioluminescent botanical macro-photography overlaid with an ultra-crisp, dark-glass scientific dashboard illuminated by cyan-to-emerald light leaks.
MUST
- Reserve the vivid cyan-to-mint gradient exclusively for primary conversion elements and focal medical insights.
- Encase all interactive UI panels in backdrop-blur(16px) with a translucent fill and 1px border (#1d3652).
- Keep typography high in contrast: #ffffff for headers and #8ea6c1 for supporting telemetry labels.
- Anchor dashboard widgets within a unified master shell rather than floating unconnected cards across the screen.
AVOID
- Never use pure black (#000000) for surfaces; always tint dark tones with midnight navy (#05090e to #0c1a2d).
- Do not apply bright warm tones (orange, magenta, red) except for critical error states.
- Never omit the 1px subtle boundary stroke on glass panels; without it, dark surfaces melt into the photo backdrop.
- Avoid fully rounded 999px pills on content cards; reserve pill radii only for badges and select buttons.
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 中尝试 
