Design a light-mode web interface screen: a cloud-tinted enterprise ledger balancing high-clarity tabular finance with friendly isometric apparatus and crisp cobalt actions.
LAYOUT
The workspace uses a three-column dashboard layout anchored by an 80px-to-240px collapsable left sidebar containing primary navigation and security status. The center core houses an expansive hero balance card, a 4-column metric sparkline grid, and a 6-row ledger data table. The right rail (approx 320px wide) organizes vertical utility sections: Quick Actions, Recent Transactions, and an Account Summary breakdown.
PALETTE (use these exact hex values)
- #F5F8FD — Canvas Ice: dominant app background providing subtle cool tint beneath white container cards
- #FFFFFF — Card Surface: elevated content container surface across all widgets, tables, and popovers
- #1E60F6 — Cobalt Primary: primary interactive buttons, active rail indicators, and brand focal points
- #EEF4FE — Cobalt Tint: background fill for active navigation items and secondary iconography containers
- #131B2E — Ink Navy: high-contrast primary headings, numeric balance amounts, and table cell leaders
- #738096 — Slate Muted: table column headers, metadata subtexts, inactive nav items, and timestamps
- #E8EEF7 — Dividing Border: hairline dividers between table rows and subtle card outer boundaries
- #16A34A — Success Mint: positive delta percentages and completed transaction label typography
- #E8F8EE — Success Wash: background badge fill for completed status chips
- #E53E3E — Alert Rose: failed status chip typography and negative transaction indicators
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,Public Sans,SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 36px display. Tracking -0.03em at large sizes, 0em at body. The typographic tone is authoritative, clean, and engineered, achieved through a modern geometric sans-serif (Plus Jakarta Sans). Large, tabular financial amounts exude corporate solidity, while generous line heights and muted slate secondary styling ensure frictionless operational scanning. Web-safe substitutions like Inter or SF Pro preserve the precision.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is rendered virtually flat with minimal reliance on heavy drop shadows. Elevation is primarily articulated via surface contrast (pure white cards sitting on an ice-blue #F5F8FD canvas) accented by microscopic border strokes (#E8EEF7) and subtle 0 4px 12px rgba(19, 27, 46, 0.03) ambient diffusion.
IMAGERY
Features stylized, friendly 3D isometric digital vignettes—specifically an ATM dispenser with blue volumetric shading, a floating plastic card, and stacked bank notes. Imagery is clean, vector-rendered or 3D pastel without noisy textures, grit, or stock photography.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an expansive, crisp banking ledger alongside an isometric 3D ATM vignette, framed in soft 16px white islands with electric cobalt accents.
MUST
- Keep card backgrounds pure #FFFFFF against the pale ice-blue canvas #F5F8FD.
- Use 16px border-radii uniformly on all metric and content cards.
- Pair every metric card with a minimalist, monochromatic smooth vector sparkline.
- Format status badges as fully rounded 999px pills using pastel background washes.
AVOID
- Do not introduce dark theme card surfaces or high-contrast drop shadows.
- Never use sharp 0px or 4px square corners on container surfaces.
- Do not tint the primary page canvas dark gray; it must remain airy ice-blue.
- Avoid multi-colored gradient strokes on charts; stick to clean monochrome line trends.
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 中尝试 
