Design a dark-mode website section: cosmic deep-indigo canvas anchoring clinical precision with electric cobalt vectors and luminescent data points.
LAYOUT
The layout progresses vertically from a concentrated, centered hero call-to-action down to an expansive six-column structured footer grid. The hero maintains an 800px maximum width column for title and actions over the cosmic backcloth. Transitioning downward, a faint 1px divider rule anchors a 1240px wide footer comprising brand identity, four navigation link lists, and a dedicated newsletter capture block, followed by legal attribution.
PALETTE (use these exact hex values)
- #050811 — Obsidian Deep: Foundational background canvas for the footer and lower viewport layers
- #080F1E — Midnight Space: Base dark tone beneath the atmospheric particle vortex in hero area
- #0E1626 — Surface Container: Background fill for input fields and system status pills
- #1E5AF6 — Cobalt Engine: Primary CTA button fill and primary brand accent color
- #38BDF8 — Telemetry Cyan: Trailing column header dots and period accents on hero headlines
- #22C55E — Operational Emerald: Pulsing live status indicator for operational infrastructure badge
- #BBF7D0 — Phosphor Mint: High-contrast action fill for the email submission arrow button
- #FFFFFF — Starlight White: Primary headings, active link states, and prominent titles
- #8EA0B8 — Slate Nebula: Subheadings, body paragraphs, and secondary action text
- #162032 — Subtle Void Border: Structural dividing rules, input outlines, and card containment borders
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px heading, 52px display. Tracking -0.025em at display, +0.06em at uppercase micro-labels. The typography communicates hyper-disciplined scientific authority via a clean neo-grotesque sans-serif. Tight tracking (-0.03em) on the 52px hero title conveys monolithic conviction, while generous tracking (+0.08em) on 11px uppercase metadata provides telemetry clarity. Geist Sans or Inter provides the ideal neutral, engineered cadence required for bio-tech infrastructure.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 104px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered entirely through atmospheric back-lighting and subtle surface contrast rather than physical drop shadows. Dark containers (#0E1626) float faintly over the obsidian canvas (#050811) via delicate 1px borders (#162032). The hero typography gains natural lift from the swirling, organic particle cloud radiating celestial blue light behind it.
IMAGERY
The visual anchor is an ethereal, microscopic-meets-astronomical particle stream swirling with bioluminescent blues and gold dust. It symbolizes biological computation, molecular dynamics, and cellular oncology at planetary scale. Realistic human photos or generic stock 3D renders would completely rupture the clinical, otherworldly aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable hallmark is the vibrant cyan dot (•) punctuating uppercase category headers and headlines, paired with the luminescent mint submit button. This punctuation treats marketing copy as live telemetry signals, reinforcing the platform's computational data precision.
MUST
- Anchor headline conclusions with a saturated cyan period dot (#38BDF8) matching the brand rhythm.
- Maintain strict 32px column gaps between navigation categories in the wide footer grid.
- Pair micro uppercase category headings (11px) with prominent trailing telemetry dots.
- Use high-contrast mint (#BBF7D0) sparingly, reserved strictly for micro-action triggers like form submission.
AVOID
- Do not use saturated cyan or mint fills for primary hero CTA buttons.
- Avoid thick container outlines or heavy cards that disrupt the seamless void background.
- Never omit the terminal cyan dot on navigation headers and hero display typography.
- Do not use pure black (#000000); always tint dark backgrounds with deep navy undertones (#050811).
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 中尝试 
