Design a dark-mode mobile app interface screen: tactile dark-mode wealth management crafted with luminous neon green telemetry and soft slate tilework.
LAYOUT
Strict vertical mobile stack with fixed top status/greeting zone, leading into a dominant Net Worth hero card. Followed immediately by an equidistant 4-column quick action toolbar, then stacked multi-item account aggregations. The rhythm maintains consistent 16px vertical margins between independent card groups with 20px internal padding.
PALETTE (use these exact hex values)
- #0C1017 — Obsidian Ground: Deepest canvas background behind cards and primary screens.
- #141923 — Slate Card: Base fill color for all aggregated section containers and macro cards.
- #1A2230 — Tile Action Fill: Fill for utility action squares and icon badge containers.
- #1F2839 — Card Border: One-pixel structural outlines defining card boundaries and dividers.
- #32D77A — Neon Emerald: Primary positive indicator used for charts, percentage deltas, and progress rings.
- #183D2D — Deep Forest Accent: Button background for secondary action states and subtle tint washes.
- #2F80ED — Electric Cyan: Icon glyph accent for transfer and liquidity-related metrics.
- #8B5CF6 — Amethyst Violet: Icon glyph accent for retirement and long-term security accounts.
- #FFFFFF — Text Pure White: Key metric values, headers, and active high-priority text.
- #768396 — Text Muted Slate: Account details, subtitles, unselected toggles, and metadata.
TYPOGRAPHY
Typeface SF Pro Display (or Inter, Plus Jakarta Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 18px subheading, 22px heading, 30px display. Tracking -0.03em on display numbers, +0.06em on uppercase labels. Sleek, modern, and mathematically precise, communicating security, high-end private banking, and effortless intelligence. The neo-grotesque sans allows numeric amounts to feel grounded and legible at a glance. SF Pro or Inter handles both heavy tabular display numerals and dense sub-labels without loss of clarity.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 10px, buttons 12px. Spacing on a 4px unit, 12px gaps, 20px between sections, 390px container, comfortable density.
DEPTH
Depth is created entirely through surface tint stepping and subtle 1px structural outlines rather than diffuse drop shadows. The background sits at deepest black-blue (#0C1017), primary content sections elevate via dark slate (#141923), and clickable action items rise further using (#1A2230). A faint specular top-border sheen separates cards cleanly against the void.
IMAGERY
Vector-based telemetry, minimalist line iconography, and a subtle organic topographic wave pattern faintly watermarked in card backgrounds. No photography or illustrative character art is used. Any graphical additions must be limited to glowing line charts or mathematical telemetry.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the glowing neon emerald sparkline paired with the circular telemetry gauge resting against deep, near-black slate tiles with 24px rounded corners. It delivers immediate clarity of positive wealth accumulation without visual noise. It is ruined if low-contrast or warm colors replace the surgical emerald hue.
MUST
- Wrap all primary card containers in consistent 24px rounded corners.
- Use uppercase tracking (+0.08em) for micro category headers like 'PORTFOLIO' or 'ACCOUNTS'.
- Limit vivid neon emerald (#32D77A) solely to positive financial deltas, charts, and progress completion.
- Maintain high contrast between pure white text for active values and slate gray for descriptive metadata.
AVOID
- Do not use sharp 0px or small 4px corners on main grouping surfaces.
- Never introduce saturated, high-key backgrounds; the canvas must remain near-black obsidian.
- Avoid using neon green as a text color for neutral informational headers.
- Do not use loud, multi-colored drop shadows; depth is strictly border and fill delineation.
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 中尝试 
