Design a dark-mode web interface screen: deep navy twilight canvas supporting high-precision financial metrics with vivid neon indigo and emerald telemetry.
LAYOUT
Structured around a persistent 220px dark left sidebar, followed by a flexible 3-column dashboard grid. The main area leads with a 4-card metric strip, mid-body donut and action panels, a wide holdings table, and right-rail monitoring lists (watchlist, activity, upcoming events).
PALETTE (use these exact hex values)
- #070b14 — Deep Midnight Void: Root background canvas behind sidebar, header, and card layouts
- #0d1527 — Navy Surface: Card and container backgrounds across all modular dashboard panels
- #18223c — Surface Border Stroke: 1px hairline separator lines and container bounding outlines
- #1e293b — Active Surface Highlight: Quick action square buttons, pill filters, and active tab highlights
- #6366f1 — Electric Indigo: Primary buttons, active states, donut segments, and callout icons
- #06b6d4 — Teal Cyan: Secondary donut chart slice and asset allocation horizontal bars
- #10b981 — Gain Emerald: Positive monetary gains, delta percentages, and sparkline charts
- #f43f5e — Loss Crimson: Negative delta indicators and downward market index paths
- #f59e0b — Warning Amber: Cash allocation indicator and minor category donut slices
- #ffffff — Pure White: Headings, core financial values, stock tickers, and active controls
TYPOGRAPHY
Typeface Inter match (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 24px heading-lg, 28px display. Tracking -0.02em on headers, normal on tabular data. Clean, highly objective, and Swiss-inspired geometric sans-serif that treats numbers with editorial authority. Replicate using Inter with tabular figures enabled (tnum) to prevent numeral shifting during market volatility.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, tight density.
DEPTH
Depth is rendered flat-architectural without diffused shadows. Hairline 1px borders in #18223c define boundaries against the #070b14 backdrop, with elevated interactive controls utilizing a lighter #151f38 fill.
IMAGERY
Photography is restricted to small 44x44px rounded thumbnails within the market news feed at the footer. Icons are monochrome minimal stroke SVGs; illustrations are absent except for a stylized 3D isometric box in the pro-tier upsell card.
SIGNATURE DETAIL — the thing that makes this design itself
The hairline-stroked deep navy panel (#0d1527) paired with radiant multi-color donut graphs and vivid status sparklines against an almost-black canvas. It feels like an executive trading terminal rebuilt as high-end consumer SaaS.
MUST
- Use 1px border (#18223c) on all card surfaces to establish crisp visual separation.
- Keep typography tabular and right-aligned for numeric data to maintain vertical scanning.
- Limit vivid neon colors (emerald, cyan, indigo) strictly to telemetry, charts, and key active states.
- Use subtle circular icon badges (#151f38) to soften dense monetary figures.
AVOID
- Do not use white or bright grey backgrounds for any surface level.
- Do not apply heavy drop shadows; depth is strictly created via stroke outlines and subtle background level shifts.
- Do not use red or green for non-financial or non-directional contextual meanings.
- Do not exceed 14px border radius on dashboard metric cards.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2512:3296. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
