Design a dark-mode website section: dense nocturnal cybernetics anchored by phosphorescent mint nodes and architectural line paths.
LAYOUT
The upper section uses an asymmetrical two-column layout: left column contains the display headline, copy, dual CTA group, and trust row; right column features the hub-and-spoke agent flow diagram. A soft horizontal divider transitions to a five-column footer layout: brand/social column, three topical link columns, and a dedicated newsletter capture module.
PALETTE (use these exact hex values)
- #050B10 — Obsidian Ground: Deepest canvas background framing the hero CTA section and upper viewport.
- #08131B — Abyssal Navy: Slightly elevated foundation canvas for the multi-column footer block.
- #0B1D28 — Node Fill: Background fill for floating diagram nodes and the newsletter input wrapper.
- #2CD897 — Phosphor Mint: Primary CTA fill, focal text highlights, logo icon, and glowing terminal badges.
- #40A9FF — Electric Cyan: Accent icons and badge indicators within workflow diagrams.
- #FFFFFF — Pure White: Hero headline text, prominent button copy, and column heading labels.
- #7F93A4 — Muted Slate: Supporting descriptive copy, inactive footer links, and trust badge annotations.
- #1E3847 — Faint Cyan Edge: Subtle 1px outlines on secondary action buttons, diagram cards, and input fields.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 44px heading-lg. Tracking -0.03em at display, 0 at body. Engineered, disciplined, and razor-sharp. Inter or its technical neo-grotesque peers communicate developer tooling credibility through geometric proportions, tight tracking, and neutral body weights.
GEOMETRY & SPACING
Corner radii — cards 10px, 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 via luminosity against deep cyan-black rather than drop shadows. Active nodes and primary triggers emit soft radial blooms of #2CD897, while secondary surfaces sit slightly elevated with 1px #1E3847 boundary strokes.
IMAGERY
Avoid photographic assets entirely; the brand identity relies strictly on schematic vector line art, topological curves, and glowing pipeline network diagrams. Any visual additions must resemble abstracted developer architecture or agent orchestration diagrams.
SIGNATURE DETAIL — the thing that makes this design itself
The phosphorescent agent constellation: a high-contrast hub-and-spoke schematic diagram with glowing mint connection lines that bridges technical architectural clarity with radiant AI identity. Misusing it as a generic decorative network without clear input-output node relationships ruins its intentional engineering feel.
MUST
- Anchor the visual hierarchy with a single luminous green (#2CD897) highlight.
- Use tight negative letter-spacing (-0.03em) exclusively on headings 40px and larger.
- Style node connectors with thin 1px dashed or solid strokes in #1E3847.
- Keep footer column link text strictly at 13px or 14px in muted slate #7F93A4.
AVOID
- Never introduce warm colors like orange, yellow, or red into decorative states.
- Do not use heavy drop shadows; rely solely on soft radial neon glows.
- Avoid high-contrast pure white borders; always keep structural outlines muted (#1E3847).
- Never make footer links uppercase or fully white by default.
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 中尝试 
