Design a dark-mode mobile app interface screen: luminescent emerald telemetry anchored within atmospheric obsidian glass for elite personal wealth management.
LAYOUT
The mobile viewport follows a strict single-column stacked layout with 20px horizontal margins. The header introduces the user state and profile access, followed immediately by the dominant net-worth hero card containing both chart and categorized metrics. Beneath, a horizontal row of five circular quick-actions bridges into the vertically stacked account card list.
PALETTE (use these exact hex values)
- #070b0e — Void Black: Deepest background layer across the entire mobile screen canvas
- #111720 — Obsidian Surface: Primary surface color for hero card and account module containers
- #161e29 — Card Inset: Secondary recessed container used for mini metric tiles and circular action buttons
- #1e2938 — Subtle Border: Single-pixel perimeter strokes delineating cards, action rings, and dividers
- #34d399 — Mint Luminescence: Hero telemetry line, positive delta indicators, and core banking icon strokes
- #38bdf8 — Electric Cobalt: Accent hue for investment mini-chart lines and cash transaction highlights
- #f59e0b — Amber Warning: Accent hue for debt liabilities, budget allocation charts, and warnings
- #ffffff — Signal White: Primary high-prominence headers, key financial figures, and greeting labels
- #8493a5 — Muted Slate: Secondary labels, timestamps, descriptive metadata, and non-active icons
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Manrope), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 22px heading, 30px display. Tracking -0.02em at display, 0.04em at captions. Plus Jakarta Sans provides a clean, ultra-modern tech-forward demeanor with geometric precision. The heavy display weights convey authority and financial security on balance headers, while generous tracking on small uppercase captions ensures crisp legibility on OLED screens. SF Pro or Inter offer drop-in system parity without losing the clinical fintech aesthetic.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 999px. Spacing on a 4px unit, 14px gaps, 28px between sections, 390px container, comfortable density.
DEPTH
Elevation is achieved entirely through chromatic contrast and 1px borders rather than diffuse drop shadows. The pure void canvas (#070b0e) recedes while container cards (#111720) emerge forward via subtle edge highlights and faint inner gradients. Interactive circular buttons utilize a slightly lighter surface (#161e29) to suggest tactile pressability.
IMAGERY
Visual imagery is restricted to a circular, high-fidelity user profile avatar with crisp edge definition. Data visualization functions as the primary visual art, featuring clean continuous anti-aliased vector splines and thin outlined geometric iconography. Photography, realistic textures, or illustrative skeuomorphism are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the multi-tiered Net Worth Card featuring an emerald spline chart directly conjoined with a four-column sub-metric tray in a single encapsulated rounded frame. It synthesizes aggregate balance, velocity, and allocation into a single glance. Misuse typically occurs when separating the sub-metrics into loose external cards, destroying the cohesive command-center focal point.
MUST
- Use solid #070b0e canvas background punctuated only by faint top-screen radial glows.
- Restrict bright emerald (#34d399) to positive wealth indicators and primary data splines.
- Enclose distinct modular sections within 20px rounded cards with 1px #1e2938 strokes.
- Maintain high typography contrast by setting balance figures in pure #ffffff against dark panels.
AVOID
- Do not introduce sharp 0px corners; all cards must feature 12px to 20px corner radii.
- Never use pure black cards over pure black canvas; always elevate panels to #111720.
- Avoid solid filled bright button surfaces; keep buttons dark with colored stroke iconography.
- Do not clutter the chart area with heavy orthogonal grid lines; use minimal dashed indicators.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
