Design a light-mode web interface screen: deep midnight navigation anchoring crisp porcelain cards charged with luminous teal and royal indigo telemetry.
LAYOUT
The layout is an asymmetrical two-column desktop cockpit: a fixed 240px dark sidebar flanks the left, while a flexible main workspace expands to the right. The top header combines title and global actions (+ New Withdrawal, date range picker). The content zone splits into a 2/3 primary column (KPI grid, main area chart, transaction history table) and a 1/3 right utility column (quick withdrawal form, donut breakdown, security pledge banner).
PALETTE (use these exact hex values)
- #0F1B36 — Sidebar Deep Navy: Permanent structural anchor for navigation, brand header, and user profile.
- #F5F7FB — Canvas Ice Tint: Main dashboard background framing all modular content cards.
- #FFFFFF — Card Surface Pure: Elevated card surface for KPI blocks, data tables, and input forms.
- #0EA5A8 — Oceanic Cyan: Primary trendline stroke, donut majority slice, and quick withdrawal action button.
- #5252E6 — Royal Indigo: Header trigger button, active navigation indicator glow, and secondary donut segment.
- #0F172A — Midnight Ink: Primary headings, large stat numbers, and crucial balance amounts.
- #64748B — Muted Slate: Card category labels, table headers, subtitles, and inactive nav icons.
- #10B981 — Growth Emerald: Positive delta percentages and completed status badges in data tables.
- #F59E0B — Amber Gold: Pro tier badge crown, bank transfer icon, and tertiary donut segment.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 28px heading-lg. Tracking -0.02em at headlines, 0 at body. Plus Jakarta Sans delivers an impeccably modern, clean fintech tone that merges geometric clarity with friendly corporate polish. Tight letter-spacing on bold display figures keeps large sums like $248,540.00 balanced and compact without crowding. If substituting, choose Inter or DM Sans to preserve tabular legibility and clean stroke weights across small data labels.
GEOMETRY & SPACING
Corner radii — cards 18px, links 8px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is achieved through high-contrast boundary juxtaposition between the midnight sidebar and canvas rather than heavy dropshadows. Individual white cards cast an ultra-soft, diffused shadow (0 4px 20px rgba(15, 27, 54, 0.04)) onto the pale blue-tinted background. Interactive elements like the active nav pill and chart hover tooltip use subtle ambient glows to signal focus.
IMAGERY
No photographic imagery is present in the interface. Visual communication relies exclusively on clean geometric line icons (feather or lucide style), crisp vector line charts, segmented donut geometries, and minimal squircle avatar initials. Any illustrative or photographic content would disrupt the precise, banking-grade utility.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone structural duality: a rich midnight navy navigation shell framing a pristine pale workspace accented with vivid ocean cyan data visualization. This pairing makes the interface instantly recognisable as high-end institutional fintech. It is commonly misused by applying cyan too broadly across all buttons, diluting its role as the dominant visual marker for real-time liquidity and active trends.
MUST
- Keep metric card icon containers inside 36-40px soft tinted squircles matching slice colors.
- Maintain high contrast between the deep midnight #0F1B36 sidebar and the light workspace.
- Use Oceanic Cyan (#0EA5A8) strictly for primary flow actions and dominant data curves.
- Pad all internal white surface cards by at least 20px with corner radius 18px.
AVOID
- Do not introduce sharp 0px corners; all surfaces, badges, and buttons must be radiused.
- Do not use dark backgrounds for workspace cards; the canvas remains crisp and light.
- Never use raw pure black (#000000) for text; rely on Midnight Slate (#0F172A).
- Avoid high-saturation red fills; errors or warnings should match the refined palette.
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 中尝试 
