Design a light-mode website section: crisp synthetic whites anchored by luminous cobalt connectors and undulating halftone dot fields.
LAYOUT
Asymmetric two-column composition structured within a 1240px container. Left column contains value messaging: live badge, 58px display headline, supporting description, dual CTA buttons, and a social proof card. Right column is dominated by the orchestrated agent diagram centered on a primary controller card routing out to four satellite destination cards. The background is pinned with organic blue wave ribbons anchored at the bottom edges.
PALETTE (use these exact hex values)
- #FAFAFD — Canvas Background: Global viewport surface backing all hero graphics and typographic clusters.
- #FFFFFF — Card Surface: Floating elevated containers for nodes, metrics, and interactive modules.
- #0B0F19 — Primary Text: Hero headline text, prominent node titles, and high-emphasis labels.
- #525866 — Secondary Text: Supporting subheads, navigation links, and descriptive sub-labels.
- #2555F6 — Electric Cobalt: Primary action button backgrounds, active icons, and headline gradient start.
- linear-gradient(90deg, #2555F6 0%, #9333EA 100%) — Headline Gradient: Applied across the 'own the work.' display text highlight.
- #10B981 — Live Indicator Green: Status pill dot and execution completion indicators.
- #E5E7EB — Structural Border: Borders on cards, secondary buttons, and divider tracks.
- #F3E8FF — Lightning Accent Purple: Background container for the metric lightning badge.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px subheading, 58px display. Tracking -0.03em at display, -0.01em at body. The typeface embodies precision engineering with neutral, approachable geometric letterforms. High x-heights and open apertures ensure effortless readability in dense technical node cards at 12px, while tight tracking at 58px produces an authoritative, modern enterprise voice. Plus Jakarta Sans or Inter serves as the ideal drop-in open-source engine.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through ambient light and layered translucency rather than heavy borders. Cards utilize high-radius, low-opacity drop shadows (0 10px 30px rgba(15, 23, 42, 0.06)) against the white background. Structural differentiation relies on layered 1px borders (#E5E7EB) and subtle offset positioning.
IMAGERY
Vector-based technical iconography, third-party dev tool logos (Slack, GitHub, AWS, Notion), and algorithmic halftone wave fields. Imagery is strictly programmatic and diagrammatic, avoiding lifestyle or stock photography. Any non-vector graphic must be replaced by a clean UI card or system node.
SIGNATURE DETAIL — the thing that makes this design itself
The dynamic multi-branch connector diagram where curved pastel wires originate from a central 'Tasklet Agent' checklist card into floating service modules, backdropped by a stippled vector wave field. Commonly misused by making lines too harsh, omitting the stipple dot texture, or using hard right angles instead of fluid horizontal curves.
MUST
- Retain ample white space around typographic blocks to maintain an airy, technical feel.
- Apply the gradient (#2555F6 to #9333EA) only to key headline phrases, never entire paragraphs.
- Use smooth Bézier connector lines with minimal, clean terminal dots for system diagrams.
- Keep all card borders at exactly 1px solid #E5E7EB with zero harsh outlines.
AVOID
- Never introduce heavy dark backgrounds or black containers in this hero canvas.
- Avoid harsh, high-contrast drop shadows; use diffuse multi-layered blurs below 10% opacity.
- Do not color entire headings in the violet-cobalt gradient; restrict it to the punchline.
- Never square off button corners; enforce an 8px radius for buttons and 12-16px for cards.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
