Design a dark-mode website section: ethereal bioluminescent auroras emerging from deep space black, paired with clean scientific precision and pill-shaped interactive controls.
LAYOUT
The layout is divided into two distinct vertical blocks: an open, center-aligned CTA hero stage on top and an orderly 6-column tabular directory footer below. The top block centers the tag, large headline, description, and dual action buttons within a 720px optical column. The bottom footer anchors the brand identity and newsletter at opposite edges while distributing four navigation categories evenly across the interior.
PALETTE (use these exact hex values)
- #02050c — Obsidian Base: The primary background canvas for the footer and surrounding void space.
- #72f6b2 — Bioluminescent Mint: Gradient start stop for primary CTA button, submit icon fill, and highlighted heading text.
- #3f8af6 — Synaptic Cobalt: Gradient end stop for primary actions and atmospheric backlight glow.
- #2ce0e8 — Neural Cyan: Luminous fiber highlights in background graphics and active domain link text.
- #ffffff — Primary Text: Main headline copy, active links, and brand title.
- #8c9aa8 — Secondary Text: Body copy, input placeholder text, and inactive directory links.
- #4d5b6e — Subtle Text: Footer copyright, category column headers, and compliance statements.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 52px display. Tracking -0.03em at display, 0.05em at caps. The typographic tone is ultra-modern, clinical, and confidently restrained, evoking synthetic biology and advanced AI infrastructure. Using a clean grotesque sans-serif like Plus Jakarta Sans prevents the design from feeling overly decorated, grounding the dramatic light effects in academic and scientific rigor. For open-source deployment, Inter or Geist Sans serve as flawless substitutions.
GEOMETRY & SPACING
Corner radii — cards 0px, links 2px, inputs 999px, buttons 999px. Spacing on a 4px unit, 32px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered purely optically through light bloom and atmospheric luminescent streaks rather than dropped drop-shadows. Surfaces feel flush with the deep screen space, using hairline 1px borders with low-opacity white (rgba(255,255,255,0.12)) to demarcate boundaries without adding physical weight.
IMAGERY
Background visuals resemble biological or computational neural pathways rendered as luminous fiber-optic curtains. Colors cascade from intense teal-cyan to electric royal blue with soft motion blur. Literal stock photography, human portraits, or standard hardware shots would violate the abstract, high-tech aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal mint-to-blue gradient pill button (#72f6b2 to #3f8af6) set against the vertical fiber-optic neural bloom. It creates a tactile, luminous focal point that immediately pulls the eye inward from the dark periphery. It is misused if applied to secondary controls or if the gradient angle is rotated vertically.
MUST
- Use pill geometries (999px radius) for all interactive inputs and primary buttons.
- Maintain high contrast by keeping display copy in bright white against dark luminous backdrops.
- Use uppercase tracking (>=0.05em) strictly on small micro-copy below 12px.
- Accent key technological terms in headings using the mint-to-cyan highlight color.
AVOID
- Never apply rounded corners (radii > 0px) to structural containers or card sections.
- Avoid solid flat backgrounds for hero sections; preserve atmospheric optical glow.
- Do not style secondary links as heavy bordered buttons; keep them as understated text links.
- Never use dark text on dark surfaces without at least a 7:1 contrast ratio.
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 中尝试 
