Design a dark-mode web interface screen: quiet luxury for high-net-worth liquidity with crisp luminescence that guides without glowing like neon.
LAYOUT
The workspace employs a fixed left navigation sidebar (approx. 220px) next to an expansive, fluid data panel. The main canvas begins with a top utility row (search, shortcuts, notifications, primary action) followed by a personalized greeting. Vertical flow descends hierarchically: primary net worth hero chart, 4-column liquidity accounts, a 2-column midsection (spending breakdown vs cashflow), and a 2-column lower split (budgets vs goals) concluding with investment performance.
PALETTE (use these exact hex values)
- #0b0f19 — Canvas Midnight: Deepest background layer across all root viewports and sidebar base.
- #111726 — Card Navy: Base fill for modular panels, chart containers, and analytical groupings.
- #1e293b — Stroke Subtle: Single-pixel hairline separation along card outlines, input fields, and dividers.
- #00d29d — Electric Mint: Primary metric highlights, positive delta figures, net worth area curves, and cashflow bars.
- #7c3aed — Royal Violet: Primary CTA button fill, investment visualizer curves, and investment icon surfaces.
- #f59e0b — Amber Wealth: Credit balance icons, transportation allocation, and vacation milestone trackers.
- #f43f5e — Crimson Coral: Negative indicators, debt metric flags, and secondary donut chart categories.
- #ffffff — Text Crisp: High-emphasis numerals, primary headings, active tabs, and primary action labels.
- #94a3b8 — Text Muted: Field labels, inactive navigational items, table headers, and timestamp axis ticks.
- #475569 — Text Dim: Gridlines, disabled indicators, watermark iconography, and secondary metadata.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Work Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 32px display. Tracking -0.02em at display, 0 at body. The typographic tone is institutional, precise, and reserved, leaning on Inter or an equivalent modern geometric neo-grotesque. High x-heights and tight display letter spacing lend authority to large numeric balances without feeling clinical. Its functional elegance relies heavily on deliberate tabular font-feature settings to ensure monetary digits remain legible at a glance.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 28px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through atmospheric layering of dark tones rather than diffuse drop shadows. The lowest plane is a dark navy canvas (#0b0f19), elevated content sits on #111726, and interactive elements rest on #182032. Hairline borders (#1e293b) provide critical optical separation without casting blur.
IMAGERY
This design strictly eschews photography, 3D renderings, and illustrative fluff in favor of pure financial data visualization. Visual interest is generated entirely through geometry: donut arcs, linear progress indicators, and vector spline graphs. Any non-functional imagery would dilute its sovereign, institutional credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-tone luminous line chart pairing a razor-sharp stroked spline (#00d29d or #8b5cf6) with an ultra-soft vertical gradient fill that melts directly into the card canvas (#111726). It anchors financial velocity with a single floating pill tooltip showing current valuation at the peak terminal node. Misusing it by adding high-opacity glow halos, grid noise, or multiple intersecting glowing fills destroys its calibrated restrained luxury.
MUST
- Use 1-pixel borders (#1e293b) to delineate card boundaries against the #0b0f19 canvas.
- Format all monetary numbers using tabular figures (tnum) for clean vertical vertical alignment.
- Restrict neon accents (#00d29d, #7c3aed, #f59e0b) strictly to data charts, progress bars, and state tags.
- Keep icon containers inside 32x32px squircle bounding boxes with 15% opacity fills matching their icon color.
AVOID
- Never use pure black (#000000) for base surfaces; preserve the deep midnight tint (#0b0f19).
- Do not apply heavy drop shadows or harsh glow effects to data lines or card perimeters.
- Never display monetary balances without their secondary timeframe context or percentage trajectory.
- Do not use high-saturation red for negative numbers; use refined rose-coral (#f43f5e).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1536:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
