Design a dark-mode website section: deep void canvas illuminated by flowing bioluminescent particle streams and electric mint-to-cyan data conduits.
LAYOUT
The layout is divided into two distinct vertical movements within a 1280px centered grid. The upper conversion section splits evenly into a left-aligned typography cluster and a right-aligned horizontal pipeline schematic. Below an edge-to-edge 1px hairline rule, the footer organizes into an asymmetric multi-column layout featuring brand metadata on the far left, four link categories in the center, and a newsletter sign-up block on the far right.
PALETTE (use these exact hex values)
- #03060E — Obsidian Canvas: Primary screen background across the entire CTA and footer container.
- #081320 — Telemetry Slate: Background for floating schema cards, code containers, and form inputs.
- #13263B — Conduit Border: Hairline horizontal dividers, card perimeters, and input boundaries.
- #56E3B8 — Bioluminescent Mint: Starting anchor for primary gradients, eyebrow indicators, and footer category titles.
- #4BA8F5 — Signal Azure: Gradient terminus on CTAs and brand logo; pipeline particle highlighting.
- linear-gradient(90deg, #56E3B8 0%, #4BA8F5 100%) — Signal Luminescence: Primary CTA fill, headline gradient text, and active node glows.
- #FFFFFF — Stark White: Main headline text, prominent data metrics, and high-priority brand labels.
- #899EB5 — Muted Horizon: Body paragraphs, navigation links, copyright text, and table row labels.
- #041920 — Deep Teal Void: High-contrast text label placed directly on bright gradient CTA buttons.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 22px heading, 44px display. Tracking -0.03em on display headers, +0.06em on uppercase subheadings. The typographic tone is disciplined, scientific, and authoritative. Set in crisp neo-grotesque sans-serif (Inter / Plus Jakarta Sans) paired with monospaced code blocks, the hierarchy balances aggressive negative tracking on bold display headlines (-0.03em) with deliberate wide tracking (+0.08em) on functional telemetric labels.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved optically through luminescence rather than drop shadows. Translucent surface tiles (#071524 at varying opacities) sit directly over glowing bioluminescent particle fields, allowing diffuse cyan and mint light to create natural atmospheric depth.
IMAGERY
Visual assets are strictly schematic and algorithmic: particle point clouds, glowing vector flowlines, and structured terminal JSON outputs. Photographs, 3D character renders, or soft organic illustrations are strictly incompatible with this technical infrastructure aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-tone gradient headline continuation ('We'll build the engine.') mirrored by the organic particle-cloud pipeline visualizer. The system gains its entire identity from the transition of raw data inputs via glowing conduits into polished structural output cards.
MUST
- Keep background tones strictly in deep cold black (#03060E) rather than neutral slate greys.
- Render the secondary headline clause using the cyan-to-mint linear gradient (#56E3B8 to #4BA8F5).
- Maintain high contrast on primary buttons by placing deep void text (#041920) over bright gradient fills.
- Use 1px borders (#13263B) to define cards and containers instead of heavy elevation drop-shadows.
AVOID
- Do not introduce warm accent colors such as red, orange, or yellow into the palette.
- Avoid solid, fully opaque card fills that obstruct the ambient particle glow effect.
- Do not use pill-shaped (full border-radius) primary buttons; keep radius constrained to 8px.
- Never drop letter-spacing below normal on uppercase caption and header elements.
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 中尝试 
