Design a light-mode website section: dual-zone clarity bridging an airy experimental diagram with a grounded, obsidian control footer.
LAYOUT
The composition is split into two distinct macroscopic zones. The upper zone features a 50/50 split desktop layout: left column contains the semantic messaging hierarchy (eyebrow, display header, narrative paragraph, dual buttons, trust triple), while the right column showcases the horizontal flowchart converging on a central hub. The bottom zone snaps directly into an obsidian multi-column footer containing five navigation lists, newsletter capture, and an edge-to-edge legal/status bar separated by a fine border line.
PALETTE (use these exact hex values)
- #ffffff — Canvas Light: Primary surface for the upper CTA canvas and internal node cards
- #0d111a — Canvas Dark: Deep navy base filling the entire lower footer section
- #2563eb — Electric Blue: Primary CTA button fills, central hub glyph, eyebrow text, and category icons
- #10b981 — Success Emerald: Verified output indicators, operational ping light, and status confirmation marks
- #0f172a — Heading Slate: Display headings and primary body copy on light backgrounds
- #64748b — Muted Slate: Light mode subheaders, trust badge labels, and copyright notices
- #f8fafc — Footer Text Light: Footer section column headers and active text on dark surfaces
- #94a3b8 — Footer Text Dim: Footer navigation links, supporting copy, and input placeholders
- #161f2e — Dark Surface Elevated: Footer email input container and social media button backgrounds
- #1e293b — Dark Border: Dividing lines between footer regions and subtle outline for dark inputs
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 40px display. Tracking -0.025em for headings, 0.05em for uppercase microcopy. The typographical voice is objective, clinical, and institutional yet modern, typical of high-end B2B synthetic science and AI tooling. Inter (or its equivalents like Geist and Plus Jakarta Sans) delivers crisp legibility at small metadata scales (11px–13px) in the process diagram, while tight negative tracking at 40px gives the main statement an authoritative, confident poise.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is handled with exceptional restraint. Surfaces rely on hairline borders (#e2e8f0 on white, #1e293b on obsidian) rather than distinct drop shadows. The sole atmospheric elevation technique is a soft, radial electric-blue glow blooming outward from behind the central asterisk node to denote active algorithmic computation.
IMAGERY
There is no photographic imagery; the visual weight is entirely carried by an analytical diagram and clean iconographic glyphs. Diagram nodes use refined 16px vector line icons (folders, calendars, documents) paired with miniature emerald verification badges. Photographic stock or illustrated characters would fundamentally undermine the clinical, scientific rigor.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the 'Synaptic Funnel' diagram: four discrete raw inputs on the left routing through dotted cubic beziers into a glowing 64px asterisk node, which fans out into four verified, check-marked outputs on the right. It transforms abstract orchestration software into a tangible, reassuring machine. It is misused when overcrowded with more than five nodes per side or rendered with saturated, competing color palettes.
MUST
- Retain the sharp visual polarity between the light CTA stage and the dark footer baseline.
- Use dotted curved connector paths with subtle termination dots to imply data routing.
- Limit electric blue (#2563eb) strictly to focal elements, active controls, and category marks.
- Maintain high typography contrast: pure slate (#0f172a) on light and crisp white (#f8fafc) on dark.
AVOID
- Never merge the light CTA section and dark footer into a single continuous mid-tone grey canvas.
- Do not use multi-color gradients inside the node diagram; stick to blue inputs and green outputs.
- Avoid heavy drop shadows; depth is implied by micro-borders and soft ambient halos.
- Do not remove the system status badge from the footer sub-bar; it anchors the technical tone.
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 中尝试 
