Design a dark-mode website section: deep navy void punctuated by bioluminescent cyan cellular forms, framed in whisper-thin rounded enclosures.
LAYOUT
The layout is governed by a modular bento grid arranged into two horizontal tiers. The top tier features a balanced split: a text-dense hero card on the left (headline, badge, dual CTA, and trust points) beside an expansive visual showcase card on the right. The lower tier is composed of three sections: a leftmost section header card with ambient light trails, an expansive four-step horizontal sequence linked with chevron nodes, and a right-aligned metric column.
PALETTE (use these exact hex values)
- #03070E — Abyssal Void: Deepest canvas background behind all structural containers and navigation elements.
- #070E18 — Submerged Slate: Primary surface fill for modular hero cards and metric containers.
- #152538 — Midnight Border: Delicate 1px boundary separating dark card surfaces from canvas and each other.
- #5EEAD4 — Neon Mint: Primary interactive action button fill and terminal stop in headline gradient.
- #38BDF8 — Bioluminescent Cyan: Initial stop for illuminated gradient typography, glows, and step icons.
- #FFFFFF — Starlight White: Primary headings, headline prefix, step titles, and numerical metrics.
- #8E9EAF — Cool Muted Grey: Supporting descriptive copy, subtitle paragraphs, and subtle metadata labels.
- #0A2838 — Deep Aqua Glow: Soft ambient volumetric shadows and background lighting beneath glass spheres.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 22px heading, 52px display. Tracking -0.02em at display, 0.01em at body, 0.06em at caption. The typography is technical yet approachable, driven by a precision geometric neo-grotesque sans-serif. Tight negative tracking at display scale (-0.03em) lends authority and digital sophistication to the product proposition, while open tracking on uppercase micro-badges ensures effortless legibility at 11px. Plus Jakarta Sans or Inter is the mandatory typographic foundation.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1360px container, comfortable density.
DEPTH
Depth is not constructed through traditional drop shadows, which would vanish on an abyssal background. Instead, spatial layering is achieved through luminance staging: 1px borders (#152538) establish geometric perimeters while interior volumetric gradients and bioluminescent 3D forms illuminate the card from within. Floating badges employ translucent dark-glass surfaces over illuminated artwork to establish proximity.
IMAGERY
Imagery centers exclusively on high-fidelity, bioluminescent 3D microscopic and scientific subjects—specifically glowing cellular spheres, micropipettes, refractive glass spheres, and luminous digital artifacts. The palette within the artwork is strictly blue, cyan, and translucent glass with internal light sources. Generic stock photography, warm human portraits, or flat cartoon illustrations are completely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the bioluminescent cyan cellular sphere encased within a thin-bordered nocturnal card, mirrored by the mint-to-cyan gradient text in the headline. This biomorphic neon glow creates an aesthetic of 'synthetic biological birth'. To use it properly, keep the surrounding canvas virtually lightless so the central object acts as an organic lantern; overlighting the surrounding cards breaks the illusion.
MUST
- Use deep abyssal navy (#03070E) instead of pure #000000 to retain oceanic atmospheric glow.
- Restrict bright mint (#5EEAD4) to the primary CTA and key accent phrases to preserve visual hierarchy.
- Frame every modular surface with a subtle 1px border (#152538) to define spatial boundaries.
- Pair organic cellular or scientific 3D artifacts with cool-toned cyan and electric blue internal lighting.
AVOID
- Never use warm accent colors like orange, red, or warm yellow in UI elements.
- Do not omit the 1px container border, or surfaces will blend muddy into the canvas.
- Avoid solid flat backgrounds for hero imagery; depth requires volumetric ambient luminescence.
- Do not apply heavy drop shadows; depth is conveyed via border contrast and internal illumination.
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 中尝试 
