Design a dark-mode website section: deep midnight blue bio-computational interface with glowing horizon accents and precision developer ergonomics.
LAYOUT
The layout is strictly stacked and vertically disciplined. The top half is centered around a prominent hero CTA containing a kicker badge, 48px headline, body paragraph, dual action buttons, and a tripartite trust row. A luminous horizontal dividing line marks the transition to the lower half, which presents an asymmetrical 6-column footer grid concluding with a self-contained newsletter card and a legal baseline.
PALETTE (use these exact hex values)
- #02050b — Void Canvas: Deepest canvas background underpinning the full viewport height.
- #070d18 — Terminal Surface: Background fill for the code snippet pill and newsletter registration card.
- #162238 — Horizon Border: Delicate stroke framing cards, input boxes, and the footer boundary line.
- #1d6bf3 — Signal Blue: High-priority CTA buttons, pill badge text, and active vector stroke fills.
- radial-gradient(circle at 50% 0%, #17386b 0%, #02050b 70%) — Horizon Glow: Subtle atmospheric blue gradient emanating across the central horizontal divider.
- #f8fafc — Text Primary: Primary headings, action button text, and high-visibility logo mark.
- #94a3b8 — Text Secondary: Body copy, supporting value propositions, and newsletter explanatory text.
- #475569 — Text Muted: Footer column links, copyright metadata, and disabled placeholder inputs.
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.02em at display, 0.05em at micro badges. The typographic tone is analytical, modern, and deeply authoritative, matching clinical genomics and computational AI. Geist or Inter provides clinical neutrality with tight display tracking (-0.02em), while JetBrains Mono injects developer cred into API signatures.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through ambient light rather than structural shadows. Surfaces remain flat, using a 1px stroke (#162238) to define spatial boundaries, while a soft radial blue glow emerges from behind the central divider line to imply an illuminated digital horizon.
IMAGERY
Iconography is strictly vector outline with a 1.5px stroke weight, rendered uniformly in signal blue. No photography, 3D renders, or human imagery are present; developer-grade legitimacy is established via a miniature syntax-highlighted code payload and an abstracted molecular helix glyph.
SIGNATURE DETAIL — the thing that makes this design itself
The blue horizon seam: an ultra-subtle horizontal rule energized by a soft, diffuse royal blue atmospheric glow positioned between the conversion block and the directory footer.
MUST
- Reserve the solid vibrant blue (#1d6bf3) exclusively for primary action triggers and icon highlights.
- Use uppercase tracking (0.08em) for metadata kickers like category labels and footer column headers.
- Introduce soft blue radial illumination only at structural transition borders, never inside content cards.
- Keep code snippet syntax highlighted in pastel semantic tones (teal, coral, white) on dark navy grounds.
AVOID
- Do not use saturated cyan or purple gradients; keep all luminous styling within the deep blue spectrum.
- Never use pure black (#000000); the canvas must always remain a deep navy tint (#02050b).
- Avoid thick decorative borders; all strokes must be 1px wide with muted contrast (#162238).
- Do not set primary display headlines in uppercase; use natural Title Case with tight letter-spacing.
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 中尝试 
