Design a dark-mode web interface screen: deep-navy executive telemetry anchored by luminous teal and coral metrics with subtle atmospheric depth.
LAYOUT
The page follows a classic fixed-sidebar, fluid-body layout divided into three vertical zones. The top zone features header search alongside a widescreen welcome banner. The middle band establishes a four-column KPI metric row, followed by an analytical data visualizer split (2/3 cash flow line-bar chart, 1/3 spending donut). The lower tier resolves into two equal-width modules for goals and transactions above a persistent bottom banner.
PALETTE (use these exact hex values)
- #0b111e — Canvas Dark: Global application backdrop behind all modular panels and persistent sidebar navigation.
- #131c2e — Surface Navy: Standard container background for widgets, metric cards, charts, and table lists.
- #1e2c42 — Surface Border: One-pixel structural outlines around cards, interactive search inputs, and dividing lines.
- #14b8a6 — Teal Positive: Positive performance percentages, revenue bars, growth sparklines, and primary actionable buttons.
- #f43f5e — Coral Expense: Negative delta indicators, outgoing cash flow bars, expense figures, and categorical charts.
- #6366f1 — Periwinkle Net: Net balance line chart trends, premium banner CTA, and lifestyle categorical slices.
- #ffffff — Text Primary: Main numerical readouts, primary headers, and active state navigation typography.
- #8899a6 — Text Secondary: Secondary labels, dates, subtitle descriptions, inactive icons, and chart axes.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 20px heading, 28px heading-lg, 36px display. Tracking -0.02em at display, 0.01em at caption. Plus Jakarta Sans delivers a sophisticated, geometric, yet humanized tone suited for contemporary fintech. Its wide circular bowls give numbers excellent legibility at both 11px micro-scales and 28px metric highlights. Inter or SF Pro can be cleanly substituted without modifying spatial margins or line heights.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is rendered flat-subtle rather than layered with pronounced drop shadows. Surfaces elevate via background tonal shifts from the dark #0b111e void to #131c2e card faces, enclosed with a crisp 1px stroke (#1e2c42). Translucency is restricted to floating contextual cards, using backdrop-filter blur over photographic backgrounds.
IMAGERY
Imagery is used selectively and functionally, represented by a cut-out executive business portrait smoothly vignetted into the dark hero backdrop. Realism is favored over abstract 3D cartoons or stock flat vector drawings. Merchant logos are enclosed inside uniform 36px rounded square chips.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated executive greeting banner: a dark navy card hosting a seamless, unbordered photographic portrait blended via radial mask, anchored by a floating glassmorphic 'Financial Health' telemetry widget.
MUST
- Use exact semantic colors: #14b8a6 exclusively for gains/revenue and #f43f5e for spend/losses.
- Enforce consistent 16px radius on all main content dashboard cards.
- Outline all primary surfaces with a delicate 1px border (#1e2c42) to maintain distinct card silhouettes.
- Maintain strict hierarchy in KPI cards: muted label above, large 28px number in middle, micro trend at base.
AVOID
- Do not use sharp 0px or boxy square borders anywhere on interactive elements.
- Never swap the semantic roles of teal and coral, which would distort financial status.
- Do not render card borders thicker than 1px or with high-contrast white strokes.
- Avoid floating drop shadows on dark mode cards; use border contrast and surface elevation instead.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2336:3520. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
