Design a dark-mode web interface screen: deep teal-black financial cockpit illuminated by electric cyan telemetry and jewel-toned analytics.
LAYOUT
The workspace uses a persistent vertical sidebar on the left (approx 240px wide) housing navigation and an upgrade banner. The right area starts with a global utility header (search, notifications, primary CTA, and time filter), followed by an asymmetric grid: a top 4-column KPI strip, a midsection split between a 2/3 trend chart and 1/3 donut chart, and a lower tier split between 2/3 transaction table and 1/3 savings goals.
PALETTE (use these exact hex values)
- #0b121b — Midnight Void: Primary application canvas background behind all navigation and dashboard containers.
- #111c26 — Deep Ocean Card: Surface layer for cards, sidebars, modal popovers, and table rows.
- #1c2a38 — Subtle Rift Border: Hairline structural borders separating cards, inputs, and list row dividers.
- #1de9b6 — Electric Cyan: Primary brand identity, primary buttons, positive delta arrows, and primary sparklines.
- #a855f7 — Neon Amethyst: Expense trajectory lines, donut slices, and category badge indicators.
- #f59e0b — Radiant Amber: Net balance indicators, warning alerts, and secondary chart spline lines.
- #f8fafc — Pure Crisp Text: Primary headlines, balance figures, and high-emphasis table contents.
- #8492a6 — Muted Slate Text: Secondary labels, inactive navigation links, table column headers, and axis legends.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 18px heading, 24px heading-lg, 28px display. Tracking -0.02em for display headlines, 0 for body data. Plus Jakarta Sans delivers a hyper-clean, geometric modernity with technical precision. Its wide apertures and crisp horizontal terminals provide effortless legibility on high-resolution dark screens. It projects institutional stability merged with modern venture-backed fintech agility.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 28px between sections, 1440px container, comfortable density.
DEPTH
Depth is created entirely via luminous contrast and surface tint stepping rather than drop shadows. The background sits at level 0 (#0b121b), cards rise to level 1 (#111c26) framed by a 1px border (#1c2a38), and transient tooltips hover at level 2 (#0d1620) with fine border highlights. Glowing sparklines and neon data paths radiate subtle visual energy without diffuse blur spreads.
IMAGERY
Iconography is purely outline-based with consistent 1.5px to 2px stroke weights rendered in monochrome or muted cyan. Third-party transaction avatars (e.g. Whole Foods, Starbucks, Adobe) are enclosed in 28px-32px rounded circles with neutral containment. No photographic or lifestyle imagery is present, reinforcing an executive command-center aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated flush sparkline at the base of each KPI card, seamlessly undulating directly against the card boundary without gridlines, labels, or axes. Misusing it means adding heavy Cartesian axis lines or bounding it inside an artificial box, which destroys the effortless floating data aesthetic.
MUST
- Use electric cyan (#1de9b6) strictly for interactive highlights, positive deltas, and primary charts.
- Keep card surfaces uniform at #111c26 with hairline 1px borders (#1c2a38) rather than dropshadows.
- Maintain high typographic contrast by pairing 24-28px bold white values with muted slate captions.
- Ensure charts use smooth Bézier splines rather than jagged segmented lines.
AVOID
- Do not introduce pure black (#000000); always retain the deep petrol navy base (#0b121b).
- Never use heavy, blurry drop shadows that muddy the dark surface hierarchy.
- Do not use saturated red for negative figures; use gentle crimson/rose to avoid visual panic.
- Avoid thick, high-contrast grid lines across charts; keep axes and guides barely visible.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
