Design a light-mode web interface screen: cash management wrapped in clinical whites, soft atmospheric gradients, and radiant electric blue precision.
LAYOUT
The screen follows a fixed-width left navigation sidebar (240px) and a main content viewport divided into a 2/3 and 1/3 asymmetrical column layout. The primary column hosts the promotional 3D action card stacked above the recent transactions table. The secondary column nests quick-reference widgets (limits and ATM locator), while three equal-width reassurance badges span the bottom.
PALETTE (use these exact hex values)
- #F5F7FB — Canvas Ice: Global application canvas background behind all cards and side navigation
- #FFFFFF — Surface Pure: High-contrast card containers, modals, and active sidebar item backgrounds
- #1366FF — Electric Azure: Primary interactive buttons, progress indicators, active markers, and brand icons
- #EEF4FF — Azure Tint: Background tint for feature icon badges, active tabs, and secondary surfaces
- #0F172A — Ink Navy: Primary headings, financial metrics, and high-emphasis data table cell values
- #64748B — Muted Slate: Secondary copy, table column headers, breadcrumbs, and inactive nav labels
- #10B981 — Success Emerald: Completed transaction pill text and positive status indicators
- #ECFDF5 — Success Mint: Background surface for completed transaction status badges
- #EF4444 — Alert Crimson: Declined transaction pill text, critical notifications, and badge counts
- #E2E8F0 — Border Subtle: Hairline card outlines, divider lines, and form input strokes
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,SF Pro Text,DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 28px display. Tracking -0.02em at headings, 0em at body. The typography is technical, modern, and trustworthy, powered by a clean neo-grotesque sans-serif with geometric roundness (Plus Jakarta Sans). It communicates institutional stability through tight letter-spacing in numbers and high legibility across small 11px table captions. For drop-in web replacements, Inter or DM Sans match the structural cadence perfectly.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is created primarily through surface contrast rather than intense drop shadows. Pure white cards rest on a pale grey-blue base (#F5F7FB), supported only by an ultra-diffuse, low-opacity shadow (0 4px 20px rgba(15, 23, 42, 0.03)). Inputs and nested map modules use subtle recessed fills to establish tactile interior levels.
IMAGERY
Imagery relies on friendly, semi-gloss 3D claymorphic hardware models (like the stylized blue-and-white ATM kiosk, floating bank cards, and bundled bank notes). Realistic stock photography or raw flat monochrome clip art would disrupt this polished, approachable financial aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature identity is the marriage of ultra-clean corporate fintech data layouts with hyper-tactile, playful 3D clay hardware illustrations set against subtle radial blue glows. It transforms an otherwise mundane banking action into an intuitive, tactile experience. Misuse occurs when standard flat iconography or harsh drop shadows replace the atmospheric 3D render.
MUST
- Use pure white (#FFFFFF) cards strictly over the light cool canvas (#F5F7FB) for crisp separation.
- Reserve solid electric royal blue (#1366FF) for primary calls-to-action and active state indicators.
- Always pair transaction status pill badges with a small matching colored dot indicator.
- Keep card corners consistently rounded between 16px and 20px radius.
AVOID
- Do not use dark, heavy borders around cards; rely on white surfaces and hairline #E2E8F0 edges.
- Do not apply saturated background colors across full dashboard cards or wide page sections.
- Never omit the unit or currency symbol when presenting primary financial totals.
- Do not use sharp 0px or small 4px corners on interactive buttons or cards.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3664:2256. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
