Design a light-mode website section: structured agentic workflow visualized through ultra-clean canvas modules, vibrant signal tokens, and luminous purple nodes.
LAYOUT
The interface employs an asymmetrical modular dashboard layout spanning a 1360px grid. The upper deck features a left-aligned hero narrative (headline, copy, horizontal step indicator) juxtaposed against Step 1 and Step 2 execution cards on the right. The lower deck anchors the system with an expansive multi-column orchestration diagram on the left (spanning ~65% width) and stacks remaining operational steps (Step 3 Execute, Step 4 Review, Step 5 Done) along the right column.
PALETTE (use these exact hex values)
- #F8F9FD — Canvas Ice: Global background providing high contrast against pure white cards
- #FFFFFF — Pure Card Surface: Background for all content modules, panels, and floating step nodes
- #635BFF — Intelligence Purple: Focal orchestrator node, active step badges, send trigger buttons, and brand icons
- #F3F1FF — Soft Purple Tint: Prompt input container fill, pill tag backgrounds, and subtle node containers
- #0F111A — Obsidian Body: Primary headings, step titles, metric values, and prominent labels
- #667085 — Muted Slate: Secondary step descriptions, metric categories, integration captions, and inactive labels
- #E9EAF0 — Border Subtle: 1px hairline outlines across all cards, nested containers, and diagram boxes
- #2563EB — Execution Blue: Checkmark badges in plan cards and dynamic progress bar fills
- #10B981 — Success Emerald: Live integration dots, final step completion containers, and positive metrics
- #EA580C — Warning Alert Orange: Human-in-the-loop review warning badges, alerts, and callout button fills
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 20px heading, 42px display. Tracking -0.03em on display, 0 on body, +0.06em on overlines. Plus Jakarta Sans delivers a technical yet approachable posture, marrying geometric precision with contemporary fintech crispness. Tight letter spacing (-0.03em) on the bold 42px headline projects authority and engineering rigor, while generous x-heights at 12px and 13px ensure operational clarity within diagram nodes. Inter or SF Pro Display serve as pixel-perfect fallbacks.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 12px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is created almost entirely through planar layering and contrast rather than elevation shadows. The light gray-blue canvas (#F8F9FD) recedes behind solid white (#FFFFFF) panels bounded by 1px borders (#E9EAF0). In rare interactive cases, an imperceptible 0 1px 3px rgba(0, 0, 0, 0.04) shadow stabilizes primary floating cards.
IMAGERY
This interface avoids photography entirely, relying instead on clean vector SaaS brand marks (Stripe, Airtable, Slack, Gmail, Notion) rendered inside crisp 32px rounded containers. System UI state graphics (progress bars, spinners, checkmark rows, and schematic workflow boxes) serve as functional illustrations of agentic capability.
SIGNATURE DETAIL — the thing that makes this design itself
The central gradient AI orchestration box (#635BFF) flanked by branching dotted bezier curves that channel multiple third-party integration cards directly into automated task actions. It visually bridges high-level marketing copy with low-level runtime reality, transforming an abstract concept into a tangible visual engine.
MUST
- Maintain strict 1px #E9EAF0 borders around all white modular cards on the #F8F9FD canvas.
- Use solid #635BFF sparingly for primary AI nodes and active execution anchors only.
- Enforce consistent 16px border-radius on all outer cards and 12px on nested input blocks.
- Align connectors precisely with entry and exit ports on the central architecture diagram.
AVOID
- Do not introduce dark theme panels or heavy black fill buttons into this layout.
- Do not use blurry high-radius drop shadows; card separation relies on border and canvas contrast.
- Do not color connector lines with heavy solid strokes; maintain dotted 1px neutral vectors.
- Do not mix rounded pill buttons with sharp square corners anywhere in the system.
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. Try in DraPub 
