Design a light-mode website section: calm, audit-grade institutional fintech framed by soft lavender whispers and crisp data telemetry.
LAYOUT
Structured around a 12-column responsive bento framework with a 20px uniform gutter. The section opens with a centered or left-aligned master headline block, followed by an asymmetric 2-row layout. Row 1 features a dominant double-wide hero card on the left paired with two vertical single-unit cards on the right; Row 2 mirrors this balance with a wide data card on the left and two compact verification cards on the right.
PALETTE (use these exact hex values)
- #F8F9FC — Canvas Background: Overall viewport background underpinning the modular grid layout
- #FFFFFF — Surface Card: Container background for all bento cards and nested telemetry blocks
- #E2E8F0 — Card Border: Hairline structural outline framing each card and micro-widget
- #4F46E5 — Primary Indigo: Primary interactive button fill, active indicators, and checkmark accents
- #EEF2FF — Lavender Tint: Subtle pill fills, category tag backgrounds, and step badge wrappers
- #0F172A — Text Primary: High-contrast headings, card titles, and prominent data labels
- #64748B — Text Secondary: Descriptions, subtext, audit metadata, and card footer disclaimers
- #10B981 — Success Mint: Confidence metric scores and positive verification indicators
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, General Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 38px display. Tracking -0.025em at display, 0.05em at badge caps. Plus Jakarta Sans delivers an authoritative yet forward-leaning technological cadence. Its tall x-height and rounded geometry lend crisp legibility to dense audit logs and telemetry data, while tight letter spacing (-0.025em) on display sizes projects institutional rigor. Inter or SF Pro Display can serve as exact drop-in structural substitutes.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Elevation is purely flat and stroke-defined. There are zero blurred box-shadows; separation from the #F8F9FC canvas is achieved solely via #FFFFFF fills bound by hairline 1px #E2E8F0 borders. Nested sub-cards use a slightly cooler #F8FAFC tint or matching hairline borders to communicate hierarchy.
IMAGERY
Abstract 3D digital artifacts featuring soft lavender, lilac, and translucent white smoke or silk waves. Visuals must be non-figurative, ethereal, and mathematically smooth to evoke fluid AI computation. Photorealistic people, stock imagery, or literal hardware illustrations are strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone step eyebrow—a compact rounded capsule holding a bold purple index numeral paired with a tracked uppercase category name, anchored at the top of pure white, hairline-bordered bento modules.
MUST
- Use 16px border-radius consistently across all top-level bento cards.
- Pair numeric indices ('01', '02') with uppercase lavender subheads on every card.
- Enforce 1px solid #E2E8F0 borders on cards instead of drop shadows.
- Maintain strict left-aligned typography within all informational content blocks.
AVOID
- Never apply harsh or high-contrast drop shadows; rely entirely on 1px borders for depth.
- Do not use saturated background fills on bento cards; cards must stay pure white.
- Avoid centering headers or bullet lists inside the feature cards.
- Never omit the numerical step badges—they create the narrative logic of 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. 在 DraPub 中尝试 
