Design a dark-mode web interface screen: precision dark-canvas financial cockpit balancing luminous cyan telemetry against disciplined slate-navy surfaces.
LAYOUT
The workspace uses a persistent 240px sidebar on the left and a fluid dashboard canvas on the right. The main canvas begins with a top utility bar housing greeting headers, search, and alerts, followed by a 4-column KPI row. Below sits a balanced 2-column grid splitting spending distributions and account ledgers, continuing into chart analytics and finishing with a 4-column horizontal savings goal tray.
PALETTE (use these exact hex values)
- #070D17 — Canvas Midnight: Root application background surrounding all primary grid modules and fixed sidebar navigation.
- #0D1625 — Card Surface: Standard container background for metric tiles, charts, transaction tables, and goal cards.
- #162235 — Surface Highlight: Hover states, active time-filter pills, and search field background elements.
- #1B2A41 — Container Border: Subtle 1px perimeter border on cards, dividers, and ghost button states.
- #2DD4BF — Teal Telemetry: Primary trend indicators, sparkline curves, investment performance line, and active donut chart segment.
- #10B981 — Positive Green: Gains, positive cash inflows, credit score highlight, and upward delta indicators.
- #EF4444 — Deficit Red: Negative delta markers, debt liabilities, credit balances, and over-budget capacity bars.
- #F97316 — Vibrant Coral: Food, dining, and shopping category indicators across charts and allocation breakdowns.
- #A855F7 — Violet Accent: Transport category marker in spending donut chart and categorical breakdown legends.
- #F8FAFC — Primary Text: High-emphasis numeric balances, greeting header, account labels, and active navigation items.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,Geist), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 24px heading-lg, 32px display. Tracking -0.02em at headlines, 0em at body. The typography is ultra-crisp, technical, and unobtrusive, evoking the instrumentation of an aerospace flight deck or institutional trading desk. Inter or Plus Jakarta Sans provides precise tabular figure alignment and balanced capital heights. Its disciplined neutrality allows complex, dense numbers to remain instantly legible without decorative distraction.
GEOMETRY & SPACING
Corner radii — cards 12px, links 6px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 20px between sections, 1440px container, comfortable density.
DEPTH
Depth is rendered entirely through tonal layering rather than cast shadows. Level 0 canvas (#070D17) steps up to Level 1 cards (#0D1625) using fine 1px strokes (#1B2A41), while Level 2 controls (#162235) pop softly against their parent cards. Chart points and active highlights use slight cyan glow halos to simulate backlit instrument panel glass.
IMAGERY
No photographic imagery or lifestyle pictures exist anywhere in the interface. Visuals are strictly restricted to crisp, 1.5px stroke monoline outline icons (home, wallet, arrows, shield, car) and programmatic vector data charts. Introducing photographic banners or 3D illustrations would break the tactical terminal aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the tight pairing of an oversized bold numeric total with an immediate bottom-aligned micro cyan sparkline or segmented indicator inside an architectural slate-navy module. This gives each tile the feel of an isolated, self-contained telemetry sensor. Misusing it involves separating the sparkline from the number or increasing chart opacity so much that it overwhelms the card balance.
MUST
- Use 1px subtle borders at rgba(255, 255, 255, 0.07) around every #0D1625 card module.
- Render positive financial values and delta arrows exclusively in emerald green #10B981.
- Reserve vibrant cyan #2DD4BF for primary telemetry, active data curves, and key progress meters.
- Display financial numbers in bold, tabular-capable sans-serif weights for rapid visual scanning.
AVOID
- Do not use true pure black (#000000); maintain deep navy-slate #070D17 as base canvas.
- Never apply high-blur drop shadows; depth must rely on surface contrast and thin borders.
- Do not mix serif or decorative typefaces into numeric data tables or headers.
- Never allow secondary labels to exceed 13px or compete with white metric numbers.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2272:3632. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
