Design a dark-mode web interface screen: deep abyssal slate illuminated by phosphorescent telemetry, rendering personal balance sheets into surgical financial instrumentation.
LAYOUT
The screen uses a fixed left sidebar (approx. 220px) featuring vertical navigation links, flanking a fluid main viewport structured on a 16px grid. The primary view opens with a warm contextual greeting and temporal controls, followed immediately by a four-column KPI metrics row. Below, the layout splits into balanced 50/50 two-column analytical cards (Balance Breakdown vs Cash Flow, followed by Recent Activity vs Spending by Category), culminating in a four-column grid of budget progress tiles at the bottom.
PALETTE (use these exact hex values)
- #0b131e — Abyssal Navy Canvas: Global application page background behind cards and primary workspace grid
- #14202e — Midnight Marine Card: Surface layer for all modular widgets, metric containers, and panel enclosures
- #1f3044 — Subtle Border Slate: Hairline structural border on containers, inputs, and internal divider strokes
- #2dd4bf — Telemetry Mint: Positive cashflow indicators, deposit tags, income bars, and primary active states
- #38bdf8 — Electric Sky: Secondary donut segment representing checking assets and line plot trajectory
- #818cf8 — Lavender Iris: Expense bar graphs, transport categorization badges, and secondary data arcs
- #f59e0b — Amber Honey: Food and dining budget category segments, icons, and warning data points
- #fb7185 — Vibrant Rose: Shopping categorizations, negative delta indicators, and outflow notifications
- #ffffff — Primary White: High-emphasis numeric balances, card headlines, and active interactive titles
- #8497aa — Muted Slate Gray: Secondary metric labels, timestamps, table column headers, and axis legends
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 24px heading-lg, 28px display. Tracking -0.02em at headings, 0 at body. Plus Jakarta Sans conveys architectural modernism and mathematical discipline through its tall x-height and pristine circular bowls. At large headline sizes (-0.04em tracking), numbers feel authoritative, technical, and executive. When substituted, Inter or DM Sans should be configured with tabular lining numerals to ensure monetary decimals align precisely across ledger columns.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is created strictly through tonal stepping and crisp stroke delineation rather than ambient drop shadows. The lowest plane is the abyssal black-navy background (#0b131e), upon which content cards sit as luminous raised islands (#14202e) framed by a razor-thin 1px border (#1f3044). Internal interactive controls and icon vessels sit at Level 2 (#1b2a3d), achieving clean hierarchy purely through contrast.
IMAGERY
No photographic imagery is present anywhere on the interface. Visual interest is driven solely by geometric telemetry: vector brand glyphs in transaction rows, phosphorescent SVG chart arcs, and smooth anti-aliased sparkline paths. Editorial photography or decorative lifestyle illustrations would severely compromise the clinical precision of this design.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-weight donut chart centered by dynamic aggregated totals, paired directly with an itemized four-column ledger that lists color-keyed dot, title, currency amount, and percentage share. It must always use soft rounded segment caps and high-contrast phosphorescent pastels against the abyssal card surface; misusing it by adding complex gradients or dropping the percentage column destroys the instant telemetry read.
MUST
- Keep all chart lines and data bars strictly capped with rounded radii.
- Use pure white (#ffffff) exclusively for high-priority numbers and active page headers.
- Maintain uniform 16px corner radius across all visual dashboard containers.
- Accompany every donut breakdown with a rigorous 4-column legend (dot, label, value, percent).
AVOID
- Do not introduce light-colored or white card backgrounds under any circumstances.
- Never use drop shadows; rely exclusively on 1px stroke boundaries and surface luminescence.
- Avoid using saturated red for expense charts; use soft iris (#818cf8) or muted rose (#fb7185).
- Do not allow chart sparklines in top metric cards to display grid lines or numeric axes.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1456:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
