Design a dark-mode web interface screen: deep-space midnight canvas illuminated by bioluminescent emerald and violet telemetry strokes.
LAYOUT
The screen uses a two-column desktop frame with a fixed left sidebar (approx. 220px) housing the brand logo, primary navigation stack, and auxiliary utilities. The main fluid dashboard column begins with an omni-search header and greeting headline. Below, a 4-column metric sparkline grid precedes two large analytical modules (Cash Flow overview and Spending/Transactions split), concluding with equal-width actionable operational widgets.
PALETTE (use these exact hex values)
- #0a0e17 — Obsidian Void: Primary screen background canvas behind all panels and navigation
- #101726 — Deep Midnight Panel: Background fill for all dashboard tiles, charts, and metric cards
- #1e293b — Subtle Surface Border: Delicate 1px perimeter outline defining card boundaries and dividers
- #14b8a6 — Bioluminescent Teal: Positive trends, primary metrics, income charts, and success indicators
- #6366f1 — Electric Indigo: Expense metrics, secondary data bars, and outgoing flow visualization
- #f59e0b — Solar Amber: Net worth icon glyph, goal milestones, and AI insight badges
- #f43f5e — Signal Coral: Discrete categorization slices such as transportation spending
- #f8fafc — Starlight White: Primary headings, headline account balances, and key values
- #64748b — Muted Slate: Axis labels, category subtitles, chart keys, and auxiliary timestamps
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Manrope), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 20px heading, 24px heading-lg. Tracking -0.02em at display, 0 at body. The typography conveys institutional financial rigor hybridized with futuristic aerospace precision. The crisp geometry of Plus Jakarta Sans delivers neutral legibility across dense figures without distracting glyph idiosyncrasies. Inter or SF Pro Display serve as zero-friction system drop-in replacements with matching tracking.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 10px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is created purely through luminous layering rather than casting diffused shadows. A dark canvas (#0a0e17) sets the floor, while elevated surfaces (#101726) are outlined by crisp 1px strokes (#1e293b). Interactive hover states and active indicators rely on subtle neon glows and semi-transparent alpha fills (#162032).
IMAGERY
This interface strictly abstains from photographic imagery and decorative illustrations. Visual weight is carried entirely by data graphics: vector sparklines, clean geometric donut rings, and stylized 16px line icons. Any iconography introduced must follow consistent 1.5px stroke weight inside rounded geometric bounds.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-tone bioluminescent metric sparkline anchored flush inside dark bordered tiles. Rendered as a vivid 2px teal or indigo spline with an ethereal vertical gradient fade, it transforms standard fintech KPIs into glowing instrumentation. It is misused if drawn with flat opacity, heavy solid fills, or jagged non-interpolated vertices.
MUST
- Use deep obsidian (#0a0e17) as the single global page canvas background.
- Enclose all data modules in #101726 tiles with 1px #1e293b hairline borders.
- Reserve vibrant cyan/teal (#14b8a6) specifically for inflows, positive trends, and active telemetry.
- Maintain uniform 14px border radius on all external card surfaces.
AVOID
- Do not introduce light-colored or white card backgrounds anywhere on the canvas.
- Avoid heavy drop shadows; rely solely on hairline borders and luminescence for separation.
- Do not use saturated red for negative figures when muted coral or purple fits the palette.
- Never make chart line strokes thicker than 2.5px to preserve precision aesthetic.
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 中尝试 
