Design a dark-mode mobile app interface screen: deep obsidian fintech dashboard illuminated by bioluminescent green metrics and refined tactile surfaces.
LAYOUT
The mobile view follows a linear vertical stack optimized for one-handed thumb navigation. Navigation and personalized greeting ('Good morning, Alex') command the top 100px. The hero balance card anchors the fold, immediately followed by the four primary circular transactional actions. Below, discrete card stacks organize 'Accounts' with clear right-aligned 'View all' access, followed by an analytics slice for 'Spending Insights'.
PALETTE (use these exact hex values)
- #070C11 — Canvas Midnight: Deepest background layer for the entire application frame.
- #0F1822 — Card Surface: Background fill for total balance card and account list modules.
- #1B2735 — Card Border: Delicate stroke separating containers from dark canvas.
- #162330 — Icon Bed Surface: Squircle background behind account category icons.
- #34C759 — Growth Green: Primary brand accent, positive delta indicator, sparklines, and add-money trigger.
- #3B82F6 — Action Blue: Directional transaction iconography and categorical breakdown segments.
- #F59E0B — Category Orange: Secondary spending category in visual donut chart.
- #FFFFFF — Text Primary: Highest emphasis typography for balances, names, and titles.
- #7E8B9B — Text Secondary: Metadata labels, account numbers, and supporting balance descriptions.
TYPOGRAPHY
Typeface SF Pro Display (or Inter, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 19px subheading, 22px heading, 34px display. Tracking -0.03em on displays, -0.01em on body. The typography is utilitarian, technical, and serene, matching high-end private banking applications. It relies on tight tracking on larger numeric totals to prevent sprawling numbers, while maintaining open tracking on small grey labels for immediate legibility in poor lighting conditions. SF Pro Display or Inter is the exact match for this native iOS/mobile aesthetic.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Elevation is achieved through tone stepping and delicate hairlines rather than heavy box shadows. The canvas sits at deep black-cyan (#070C11), while active cards rise to charcoal teal (#0F1822) framed by a 1px boundary (#1B2735). Internal icon containers push further forward with lighter fill (#162330) creating a sculpted, inset-then-raised tactile effect.
IMAGERY
The interface avoids photographic imagery in favor of clean vector-rendered geometry, vector chart curves, and financial iconography. Charts employ subtle glow effects, like the soft gradient fill beneath the sparkline terminating in a bright anchor point. Any realistic or decorative photography would degrade the utilitarian, high-security dashboard aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive signature is the Total Balance card combining a luminous green stroke sparkline directly beside an oversized display balance, paired immediately with a horizontal array of 48px circular tactile action chips (green, blue, and slate). Misuse typically occurs when sparklines are isolated without terminal glow anchors or when all action buttons share identical accent coloring.
MUST
- Use 1px borders (#1B2735) around cards to separate dark card layers from dark canvas.
- Reserve #34C759 strictly for financial growth, positive yield, and the primary 'Add Money' action.
- Maintain a 20px card corner radius across main dashboard blocks for tactile consistency.
- Align all currency symbols ($) immediately adjacent to figures without intervening spaces.
AVOID
- Never apply high-contrast pure white borders or drop shadows with harsh black opacity.
- Avoid using flat red or harsh warning tones for minor neutral fluctuations.
- Do not compress horizontal card padding below 16px on standard 390px viewports.
- Never mix serif or whimsical decorative fonts into financial data rows.
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 中尝试 
