Design a dark-mode web interface screen: deep-sea dark canvas paired with luminous mint telemetry for sovereign private wealth tracking.
LAYOUT
The interface is structured on a persistent 220px left navigation sidebar paired with an expansive multi-column dashboard grid. Below the greeting header, four compact KPI metric cards establish high-level balance, followed by an asymmetrical two-column core: an expansive 8-column portfolio line chart beside stacked 4-column allocation and cash flow widgets. The lower half mirrors this cadence with balanced halves for transaction ledgers and targeted savings goals.
PALETTE (use these exact hex values)
- #0B0F17 — Canvas Obsidian: Global application viewport background behind navigation and content cards
- #131926 — Tile Surface: Card containers, modular widgets, and content section panels
- #1E293B — Border Subtle: Single-pixel boundary outlines on cards, buttons, and divider lines
- #2DD4BF — Telemetry Mint: Positive yields, portfolio line graphs, active progress bars, and positive delta text
- #9F7AEA — Liability Lavender: Liabilities data cards, expense tracking bars, and debt sparklines
- #F59E0B — Gold Amber: Asset allocation segments, secondary metric badges, and warning statuses
- #F8FAFC — Text Crisp: Primary headings, financial figures, large monetary values, and active links
- #94A3B8 — Text Dim: Field labels, timeframes, inactive navigation items, and percentages
- #64748B — Text Muted: Axis markings, chart timestamps, and subtle footnote disclaimers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 20px heading, 24px heading-lg, 28px display. Tracking -0.02em at figures, 0 at body. The typographic tone is architectural, calm, and institutional. A neutral neo-grotesque sans-serif (Inter/Plus Jakarta Sans) conveys algorithmic precision, utilizing tight tracking on numeric headers to read as bespoke financial telemetry rather than casual web copy.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is created strictly via two-tier planar contrast: deep #0B0F17 base canvas layered with slightly lighter #131926 card panels. Drop shadows are virtually absent, replaced by crisp 1px borders (#1E293B) and luminous neon glows radiating directly from active SVG chart paths.
IMAGERY
This interface avoids raster photographic imagery entirely. It relies on minimal monochrome merchant logos within 36px circular avatar vessels and razor-sharp geometric SVG data visualizations (sparklines, donuts, and line graphs). Any lifestyle photography would dilute the confidential wealth management aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing mint gradient area sparkline docked seamlessly inside low-contrast dark cards. It transforms raw financial balances into visceral, alive telemetry curves with a signature cyan bloom over obsidian slate.
MUST
- Use 1px borders (#1E293B) instead of drop shadows to define surfaces on pitch dark.
- Keep all chart lines glowing with subtle gradient area fills that taper toward zero opacity.
- Restrain color usage exclusively to telemetry signals: green for gain, purple for debt, amber for alert.
- Enforce uniform 14px corner radius across every card container in the grid.
AVOID
- Never introduce pure white backgrounds or harsh multi-colored card fills.
- Do not use fuzzy, high-radius box shadows; boundaries must remain sharply defined by lines.
- Never use generic primary blue buttons that clash with the deep teal/cyan telemetry hierarchy.
- Avoid crowded card padding less than 16px, which destroys the refined institutional air.
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 中尝试 
