Design a dark-mode website section: deep midnight cosmos meets bioluminescent emerald computational biology.
LAYOUT
Structured top-to-bottom: wide full-width container enclosing a 1280px padded area. A dominant hero banner card (height ~420px) occupies the upper section with 50/50 copy-to-graphic distribution. Below it, a 64px vertical gap leads to a six-column footer layout (brand bio occupying ~25% width, followed by five neatly balanced 15% navigation columns), terminated by a horizontal bottom bar for copyright and legal anchors.
PALETTE (use these exact hex values)
- #050B14 — Abyssal Canvas: Outer background surrounding the entire CTA card and footer section
- #06111E — Void Surface: Internal fill of the primary CTA card container
- #162A3D — Subtle Border: Hairline 1px border enclosing cards, input fields, and secondary outline buttons
- #46C28E — Bio Mint: Primary interactive buttons, headline highlight text, eyebrow uppercase labels, and submit buttons
- #0D2224 — Deep Teal Dark: Deep ambient background glows and subtle accents within graphic compositions
- #FFFFFF — Pure White: Primary headline phrases, brand logo text, and high-emphasis labels
- #8A9BA8 — Muted Slate: Body copy explanations, newsletter descriptions, and navigation links
- #4A5B6D — Dull Steel: Copyright text, legal footer links, and input placeholder text
- #041B15 — Button Dark Text: Dark typography set inside high-contrast mint green filled buttons
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 20px subheading, 44px display. Tracking -0.03em for headlines, 0.05em to 0.12em for uppercase metadata. Scientific, architectural, and highly calculated. Inter or Geist Sans provides neutral, ultra-clean geometry that avoids consumer-tech playfulness in favor of institutional biotech rigour, made distinct by the alternating white-to-mint title coloration and technical uppercase metadata tracking.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 32px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved flatly without drop shadows. Contrast relies entirely on value stepping from deep abyss background (#050B14) to card surface (#06111E), bounded by razor-sharp hairline borders (#162A3D) and lit from within by synthetic bioluminescent glow effects.
IMAGERY
Photorealistic 3D particle simulation representing biological cellular structures or molecular membranes, rendered with emissive turquoise, green, and deep cyan points of light tapering into particulate nebulae. Organic textures, flat vector illustrations, or stock photography of humans are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone display headline (top phrase in pure white, bottom phrase in vibrant mint #46C28E) juxtaposed directly against a volumetric cellular particle sphere emerging from total darkness inside a 24px bordered card.
MUST
- Pair crisp white headings (#FFFFFF) with mint green (#46C28E) second sentences for high-impact value statements.
- Use uppercase tracking (0.12em) strictly on 11px category labels and eyebrows.
- Keep card corners rounded to 24px and inner button corners rounded to 10px.
- Enclose 3D bioluminescent particle art within the card overflow to create deep space contrast.
AVOID
- Do not use saturated blues or purples; keep accents strictly within mint green and deep teal.
- Do not set footer link headers in sentence case or white text; they must remain mint and uppercase.
- Do not make buttons pill-shaped (999px); use exact 10px rounded rectangles.
- Do not drop shadows under dark cards; depth is achieved solely via 1px border contrast.
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 中尝试 
