Design a light-mode website section: crisp institutional fintech clarity wrapped in luminous agentic workflows and glowing serif accents.
LAYOUT
The section adopts an asymmetric two-column hero architecture with a 45/55 split across a 1240px container. The left column stacks category tag, hybrid headline, narrative body, dual CTAs, and an enterprise proof-point ribbon. The right column displays an expansive diagrammatic workspace with a primary agent window surrounded by four floating integration cards tethered with orthogonal and curved vector traces.
PALETTE (use these exact hex values)
- #FAFAFD — Canvas Ground: dominant page background providing high-key contrast with faint micro-grid and glowing flow lines
- #FFFFFF — Card Surface: primary container surface for the central orchestrator and satellite integration nodes
- #0F172A — Ink Primary: primary headline copy, high-emphasis card headers, and dominant metric values
- #64748B — Ink Muted: body description, step labels, and secondary audit metadata
- #635BFF — Brand Indigo: primary CTA button background, badge dots, and workflow node connection pathing
- linear-gradient(90deg, #5B4BF2 0%, #A855F7 50%, #FB7185 100%) — Editorial Accent Gradient: applied exclusively to the italic display serif punchline in the main hero header
- #10B981 — Verification Green: success badges, compliance check indicators, and high confidence ratings
- #E2E8F0 — Border Subtle: crisp structural outlines around cards, search inputs, pills, and vertical dividers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 56px display. Tracking -0.03em on display, -0.01em on body. The voice is institutional yet distinctly next-generation: Inter provides crisp, no-nonsense utility for technical mechanics, while Newsreader italic injects warmth, governance, and bespoke authority into the headline. The serif gradient signals human oversight over automated agent workflows.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 12px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through ambient, multi-layered diffuse shadows (0 8px 30px rgba(15, 23, 42, 0.05)) beneath stark white cards suspended over a faintly tinted canvas (#FAFAFD). There are no harsh elevation steps; elements feel as though they hover millimeters above an interactive drafting plane. Floating connector nodes overlap cleanly without occluding key status indicators.
IMAGERY
There is no photographic imagery. Visual engagement is carried exclusively through vector UI artifacts, rounded app icon glyphs (Slack, Snowflake, Word), and schematic node-and-wire flow diagrams. Abstract background curves rendered in low-opacity lavender suggest fluid data pipelines without visual clutter.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-personality display header combining a bold structural sans-serif with a warm, multi-stop gradient italic serif, visually reinforced by the connected satellite-card architecture on the right. This directly translates the metaphor of technical automation being guided by human governance.
MUST
- Pair rigorous geometric sans typography with a solitary, expressive italic serif statement for emotional contrast.
- Use 1px borders in #E2E8F0 alongside diffuse, faint shadows (alpha 0.04 to 0.06) to layer floating cards.
- Restrict bright saturated purple (#635BFF) strictly to the primary CTA and active orchestrator routing lines.
- Maintain high internal breathing room within diagram cards using consistent 16px to 24px padding scales.
AVOID
- Do not apply the gradient fill to non-serif or non-display typography.
- Do not use harsh black borders or heavy dark drop shadows that destroy the airy high-key atmosphere.
- Do not crowd satellite cards; ensure at least 24px of clear canvas between connected modules.
- Never omit the subtle dot grid background—it provides essential spatial depth and technical pedigree.
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 中尝试 
