Design a light-mode website section: clinical fintech precision softened with pastel verification tints and high-density agent logs.
LAYOUT
Structured as an asymmetric two-column split section: the left 36% handles product positioning, value proposition bullets, and CTA actions; the right 64% hosts the monolithic interactive application card. Inside the application mockup, a persistent slim navigation bar flanks a breadcrumb-capped three-column operational board. The entire mock is grounded by a horizontal four-cell metric performance footer.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ice: ambient background surface behind the narrative column and elevated mock dashboard
- #FFFFFF — Elevated Paper: primary container fill for the interactive demo mock and isolated panel groups
- #2454FF — Cobalt Engine: brand keyword highlight, primary buttons, active stepper states, and headline metrics
- #0F172A — Midnight Ink: high-contrast title typography, primary labels, and active navigation items
- #64748B — Slate Muted: supporting body descriptions, inactive nav labels, breadcrumb details, and console meta
- #E2E8F0 — Hairline Border: subtle inner panel dividers, metric separators, and external card boundaries
- #10B981 — Audit Emerald: successful verification icons, pass indicators, and active live connection dot
- #ECFDF5 — Emerald Tint: soft background for completed status badges and pass indicators
- #FEF3C7 — Amber Tint: soft background for pending tasks and open conditions pills
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, system-ui), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading-lg, 44px display. Tracking -0.02em display, 0 body, 0.06em uppercase tags. The typographic tone is authoritative, automated, and hyper-competent. Built upon a crisp neo-grotesque sans (Inter) paired with a technical monospace (JetBrains Mono), it evokes high-throughput financial infrastructure and compliance-level accuracy. Free open-source pairings like Plus Jakarta Sans or system UI stacks can substitute flawlessly without losing structural fidelity.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 6px, buttons 8px. Spacing on a 4px unit, 32px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is handled with clinical subtlety rather than theatrical layers. The background canvas sits at flat ground, while the main dashboard card is elevated via an expansive, low-opacity shadow (0 24px 48px -12px rgba(15, 23, 42, 0.08)) with a crisp 1px solid border (#E2E8F0). Internal panels sit completely flat, separated solely by hairlines.
IMAGERY
The design eschews photographic imagery and lifestyle assets entirely in favor of an authentic, hyper-detailed software interface. The mock interface serves as the primary visual proof, displaying live stepper trees, agent execution consoles, and regulatory approval tables. Any abstract graphical flourishes or 3D mascots would directly break this system.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated multi-pane agent audit interface acting as marketing visual: showing the exact timeline, live agent log console, and compliance scorecard within a single floating card. It transforms complex backend AI logic into legible, deterministic SaaS UI that builds immediate trust.
MUST
- Keep narrative feature icons inside softly tinted pastel rounded squircles (40x40px, 10px radius).
- Preserve dense, realistic metadata inside the application mock rather than placeholder lines or lorem ipsum.
- Use 1px borders (#E2E8F0) to compartmentalize sub-panels inside the product interface.
- Emphasize the product brand name in the main heading using primary cobalt blue (#2454FF).
AVOID
- Do not tilt or use aggressive 3D skewing on the dashboard mock; keep it strictly planar.
- Avoid harsh high-contrast borders; keep internal dividers light (#E2E8F0 or #F1F5F9).
- Never replace status badges with raw text; wrap all states in pill tags with muted background fills.
- Do not use generic abstract vector illustrations; rely solely on functional product UI components.
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 
