Design a dark-mode web interface screen: deep midnight financial telemetry with neon violet and cyan phosphor signals.
LAYOUT
Rigid multi-column grid composed of a slim vertical navigation drawer (approx 220px) on the far left, followed by a wide primary canvas. The top features a global header with date-range picker and primary action button, stacked over a 4-card metric summary row. Below, the layout splits into a 2:1 ratio for deep analytics (performance graph, asset donut) transitioning into a balanced 3-column middle band and two wide tabular panels at the base.
PALETTE (use these exact hex values)
- #0b101b — Void Canvas: Primary application background behind sidebar and dashboard cards.
- #121927 — Slate Card Surface: Background for telemetry cards, data grids, and sidebar container.
- #1e293b — Border Stroke: Subtle boundary strokes for cards, separators, and table rows.
- #25d4be — Teal Brand: Primary action button fill, positive delta badges, cash flow inflows, and brand logo mark.
- #9d62f2 — Electric Purple: Hero asset allocation slice, performance line chart stroke, and achievement card gradient.
- #ef5366 — Alert Crimson: Negative delta indicators, outgoing transaction values, and cash outflow bar graph.
- #e59a38 — Amber Gold: ETF slice in donut chart and warning indicators.
- #f1f5f9 — Text Primary: Headers, primary financial totals, and active navigation labels.
- #7e8fa6 — Text Secondary: Table column headings, timestamps, secondary balances, and inactive sidebar links.
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 22px heading, 26px heading-lg. Tracking -0.02em at display, 0 at body. Clean, authoritative, and frictionless neo-grotesk typography that evokes Bloomberg-grade financial intelligence tempered for consumer fintech. It speaks in numbers and precise deltas rather than long-form prose. Free alternatives like Inter or Geist Sans perfectly replicate the high x-height and monospaced number support required.
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 purely through luminous color contrast rather than structural elevation shadows. Flat container panels (#121927) sit directly on top of the deep base (#0b101b) with a hairline 1px border (#1e293b). Only glowing chart accents and the gamified violet gem card imply subtle atmospheric luminosity.
IMAGERY
Imagery is virtually non-existent aside from a faceted 3D low-poly violet gem in the insight widget and flat vector categorical icons (shopping bags, houses, cards). Any real photography would completely disrupt the ultra-clean, data-dense cockpit aesthetic. Graphics must remain stylized, geometric, and vector-based.
SIGNATURE DETAIL — the thing that makes this design itself
The multi-color segmented donut chart paired with high-contrast pill badges and wireframe sparklines against a deep midnight void. It gives immediate visual clarity to complex multi-asset portfolios. Misusing it means adding heavy gradients or thick borders that clutter the pure data signal.
MUST
- Use strict tabular figures (tnum) for all monetary and stock figures to maintain vertical alignment.
- Pair neon green/cyan strictly with positive gains and muted red with negative changes.
- Maintain uniform 14px border radius across all major dashboard panels.
- Ensure 20px to 24px gutters between dashboard grid columns.
AVOID
- Do not use stark white (#ffffff) cards or drop shadows; depth is strictly border-delineated.
- Do not allow chart lines to exceed 2.5px thickness.
- Do not mix rounded pill buttons with sharp rectangular cards.
- Do not omit the currency symbol or delta arrow in summary counters.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1616:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
