Design a dark-mode web interface screen: deep navy twilight illuminated by crisp teal telemetry and neon financial instrumentation.
LAYOUT
The workspace uses a persistent 240px vertical sidebar docked to the left, anchored by an upgrade banner at the lower corner. The main area leads with a global search and profile header, followed by an overview heading block with global period dropdowns. Content is organized in a four-column KPI metric deck across the top, shifting down to a two-column 60/40 split for primary analytical charts and financial transaction tables.
PALETTE (use these exact hex values)
- #0B131F — Canvas Background: Deepest foundational surface behind all views, sidebar, and topbar navigation
- #111A29 — Card Surface: Elevated container background for KPI metrics, graphs, tables, and lists
- #1B273A — Card Stroke: Single-pixel perimeter outline defining borders between containers and modules
- #44B8AC — Teal Neon: Primary action buttons, active navigation indicator backgrounds, and positive inflow data visualization
- #8B5CF6 — Metric Purple: Secondary telemetry series, net profit charts, and category segment markers
- #F87171 — Expense Red: Negative variances, spending alerts, and transactional cash outflow amounts
- #FFFFFF — Primary Text: Display headings, monetary balances, primary category titles, and active inputs
- #8C9DAE — Muted Text: Timestamps, axis markers, account numbers, and comparison baseline descriptions
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 28px display. Tracking -0.02em for large numerals, 0 for body text. The typographic tone is ultra-objective, technical, and serene, matching the expectations of institutional capital operators. Using a clean sans-serif like Inter ensures microscopic 11px captions remain razor-sharp on high-DPI displays. Tabular numeral spacing is essential to keep stacked financial accounts and ledgers legible without visual jitter.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is achieved purely through value steps and luminous contrast rather than traditional blurred shadows. The canvas begins at deep navy #0B131F, stepping forward to #111A29 for containers via a crisp 1px border in #1B273A. Floating elements such as chart hover tooltips utilize a solid #162235 layer with a faint 12px black ambient glow.
IMAGERY
The interface avoids photographic elements entirely, relying strictly on clean vector iconography and abstract geometry. Vendor logos inside transaction lists are represented as solid colored rounded squares holding minimal monochrome glyphs. Any decorative photography or realistic lifestyle art would sharply violate the high-precision analytical mood.
SIGNATURE DETAIL — the thing that makes this design itself
Luminescent micro-sparklines featuring subtle vertical gradient drop-offs nested directly within compact 16px-radius dark card cells.
MUST
- Always format financial figures with tabular lining numbers to ensure vertical column alignment.
- Restrict card background colors strictly to #111A29 with 1px border strokes in #1B273A.
- Use saturated teal #44B8AC and purple #8B5CF6 sparingly to highlight critical chart data series.
- Maintain uniform 16px corner radii across all top-level widget containers.
AVOID
- Do not introduce light-colored or white card backgrounds into this interface.
- Never use heavy drop shadows; depth must rely on 1px stroke outlines and surface value steps.
- Do not make negative currency amounts neutral; always flag reductions using #F87171.
- Avoid pill-shaped buttons for standard utility actions; restrict fully rounded pills to tags.
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. Try in DraPub 
