Design a light-mode website section: engineered clarity for automated finance through structured micro-interfaces and tactile glowing nodes.
LAYOUT
The section starts with a left-aligned vertical stack: blue uppercase eyebrow, 36px heading, and slate descriptive paragraph. Below this, a two-column bento structure spans the viewport width: the left column houses a wide spotlight hero card (approx. 58% width), while the right column contains a 2x3 grid of smaller secondary feature cards (approx. 42% width) separated by consistent 20px to 24px gaps.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Pure: Primary surface for base viewport and elevated card backdrops
- #F8FAFC — Subtle Wash: Background fill for nested micro-tables, code blocks, and inset preview panes
- #E2E8F0 — Border Slate: Hairline 1px structural borders dividing cards, rows, and embedded UI components
- #0F172A — Deep Slate: Dominant text color for main headings, subheadings, and bold metric labels
- #64748B — Muted Slate: Descriptive copy, table column headers, and inactive metadata tags
- #2563EB — Cobalt Action: Primary buttons, category eyebrow headers, and active link indicators
- #7C3AED — Agent Violet: Central node icon gradient, AI feature title, and automated orchestration highlights
- #10B981 — Metric Emerald: Confidence bars, matched checkmarks, and 201 Created status pills
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 36px display. Tracking -0.02em at display, -0.01em at body, 0.05em at uppercase eyebrows. The typography is clinical, authoritative, and frictionless. Rendered in Inter (or Plus Jakarta Sans), its clean geometric proportions and neutral letterforms evoke institutional banking security combined with modern developer tooling. Neutral tracking at text sizes and tight tracking at display sizes reinforce a no-nonsense engineering posture.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered flat-to-tactile using crisp 1px neutral borders (#E2E8F0) paired with an extremely soft ambient shadow: 0 1px 3px rgba(15, 23, 42, 0.03) and 0 10px 20px -5px rgba(15, 23, 42, 0.04). The only pronounced elevation belongs to the central purple agent node, which emits a soft, directional violet glow (0 12px 24px -4px rgba(124, 58, 237, 0.35)) to imply active intelligence.
IMAGERY
Photography is entirely absent. Imagery consists exclusively of vector micro-interfaces: simulated JSON responses, exception callouts, connector trees with light grey path lines (#CBD5E1), and transaction grids. Any photographic asset or generic 3D shape would violate the precision-engineered software aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The elevated purple Agent Node interconnected by thin grey circuit traces into realistic financial tables. To use it correctly, position the glowing node as the central hub bridging abstract integration points to concrete UI outcomes. It is commonly misused by turning all icons purple, which destroys the unique signifier of autonomous AI mediation.
MUST
- Use exact 1px solid #E2E8F0 borders on all white card modules.
- Reserve the violet/purple gradient exclusively for AI agent orchestration nodes.
- Pair every high-level feature claim with a micro-UI illustration beneath it.
- Keep typography strictly sans-serif with negative tracking on headings above 20px.
AVOID
- Do not use dark backgrounds or moody dark mode containers in this pattern.
- Never replace structural hairline borders with heavy drop shadows.
- Avoid abstract illustrations; use realistic mock tables, code blocks, or node graphs.
- Do not use saturated purple for general brand buttons; keep CTA buttons royal blue #2563EB.
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 中尝试 
