Design a light-mode website section: clinical enterprise banking precision softened by luminous pastel accents and surgical typographic hierarchy.
LAYOUT
The layout features a deliberate top-down informational hierarchy across three tiers. Tier 1 balances a 7-column headline narrative against a 5-column metric trio. Tier 2 delivers a uniform 5-column card grid where each vertical slice represents an automated banking function. Tier 3 closes with a unified integration bar anchoring external enterprise data sources.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global backdrop providing cool, clinical separation for pure white card containers.
- #FFFFFF — Pure Card Surface: Fill for all capability cards, stats clusters, and the bottom integration dock.
- #E2E8F0 — Hairline Border: Defines card perimeters, input badges, and subtle dividers without creating visual noise.
- #0F172A — Midnight Slate: Primary display headlines, component titles, and high-emphasis metric copy.
- #64748B — Subdued Slate: Explanatory body copy, stat labels, and check-list feature specifications.
- #2563EB — Electric Cobalt: Hero text emphasis highlight, first card icon tint, and initial stat callout.
- #6366F1 — Sovereign Indigo: Second stat callout ('2–6x') and workflow orchestration icon tinting.
- #10B981 — Verdant Mint: Accuracy/compliance indicator on '100%' stat and decisioning check icon.
- #EFF6FF — Cobalt Tint Fill: Background wash for the top pill badge and document icon frame.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px subheading, 20px heading, 36px heading-lg, 42px display. Tracking -0.03em display, -0.01em body. The typographic tone is algorithmic, institutional, and highly structured. Set in a contemporary geometric sans like Plus Jakarta Sans or Inter, the tight letter tracking (-0.03em on headlines) generates punchy authority, while the tabular-ready metrics communicate operational precision and auditability.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is strictly planar and tactile rather than atmospheric. Cards rely on an immaculate 1px border (#E2E8F0) paired with an imperceptible shadow (0 1px 3px rgba(15, 23, 42, 0.03)) to separate from the #F8FAFC canvas. No heavy blurs or ambient color glow exist, mimicking ultra-sharp editorial printing.
IMAGERY
No photographic imagery is present. Visual rhythm relies entirely on technical mono-line vector glyphs enclosed in 40x40px rounded-corner badges, accompanied by precise numeric typography. Any inclusion of human photography or 3D abstract shapes would shatter the institutional, document-grade aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The standout move is the chromatic triad hierarchy: primary metrics (90%+, 2–6x, 100%) and their corresponding card categories echo blue, violet, and mint while floating cleanly in razor-sharp 16px white modules. Misuse occurs when these accents are applied as heavy saturated fills rather than delicate 1.5px line strokes and muted text tints.
MUST
- Retain the chromatic progression across the 5 cards: blue, purple, green, cobalt, violet.
- Keep typography tight with negative letter-spacing on display headlines (-0.03em).
- Constrain metric labels strictly to two lines of 12px muted text.
- Use 1px borders (#E2E8F0) instead of blurry drop shadows for depth.
AVOID
- Never fill capability cards with saturated gradient backgrounds.
- Do not use dark, heavy borders; line weights must remain at 1px hairline scale.
- Avoid mixed alignment; all capability card content must strictly left-align.
- Do not increase the capability card border radius beyond 16px.
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 中尝试 
