Design a dark-mode web interface screen: dark ambient cockpit for personal wealth illuminated by glowing neon data threads and frosted midnight surfaces.
LAYOUT
The workspace employs a rigid two-column layout: a 240px persistent vertical navigation sidebar on the left and a responsive multi-row dashboard canvas on the right. The main canvas starts with a welcoming header, followed by a 4-column KPI metric row. Below sits a 2-column grid holding wide timeline graphs alongside account lists, terminating in a tripartite bottom row for breakdown charts, transactions, and insights.
PALETTE (use these exact hex values)
- #0b0f19 — Canvas Background: Root application background behind sidebar and dashboard cards
- #121828 — Surface Card: Primary background for dashboard metric panels, lists, and charts
- #1e273d — Border Subtle: 1px hairline borders delineating containers and dividers
- #4f46e5 — Primary Indigo: Primary action button, active states, and focal gradient washes
- #06b6d4 — Teal Neon: Income metrics, primary spline chart curves, and positive indicator fills
- #f97316 — Amber Coral: Expense traces, warning alerts, and secondary chart segments
- #8b5cf6 — Electric Violet: Net savings indicators, tertiary telemetry curves, and insights badges
- #f8fafc — Text Primary: Main monetary values, headings, and active navigation labels
- #94a3b8 — Text Secondary: Secondary labels, inactive navigation, timestamps, and axis values
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Manrope), 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 for large values, 0 at caption. The typographic tone is objective, precise, and sophisticatedly technical. Plus Jakarta Sans or Inter balances tall x-heights with clean geometric terminals, lending mathematical legitimacy to financial balances. Figures are set with tabular properties and tight tracking at larger display scales to feel engineered rather than expressive.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is achieved through luminance layering rather than aggressive dropshadows. Surfaces step from base dark navy (#0b0f19) to card level (#121828) delineated by crisp 1px borders (#1e273d). Interactive pills and badge containers (#1a2238) float within cards, while charts utilize soft luminous glows behind SVG path strokes.
IMAGERY
Iconography is clean, linear, and dual-tone, contained within soft 36px rounded square chips. Narrative cards feature minimalist 3D renders (like the isometric rocket and floating credit cards) that incorporate purple and cyan atmospheric highlights matching the data palette. Photographic imagery is strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable hallmark is the dark-mode ambient sparkline card: a compact navy module crowned with large tabular metrics, accompanied by a glowing, semi-transparent gradient-filled area curve that terminates flush with the card's lower boundaries.
MUST
- Use 1px border (#1e273d) on all dark cards to ensure contrast against the #0b0f19 canvas.
- Restrict bright saturated colors exclusively to data visualization points, active curves, and primary triggers.
- Keep card border radii strictly at 16px to maintain architectural consistency across differing grid heights.
- Render all financial sums in tabular font figures to prevent layout shifting during numeric updates.
AVOID
- Do not use pure black (#000000) for card surfaces; use rich dark navy (#121828).
- Never fill card backgrounds with bright primary colors; keep the canvas predominantly dark and serene.
- Avoid sharp 0px or 4px corners; the system requires softer 16px card curvature.
- Do not use multiple contrasting typeface families; rely solely on Plus Jakarta Sans or Inter.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
