Design a dark-mode web interface screen: cloistered midnight fintech for private wealth governance governed by deep obsidian surfaces and luminous cyan signals.
LAYOUT
The workspace uses a persistent 220px fixed left sidebar anchored by the 'NORTHRIDGE WEALTH' logotype. The main body begins with a utility header featuring a globally focused ⌘K command search input and user profile metadata, followed by a personalized morning greeting. Below, four equidistant KPI metric tiles precede a full-width portfolio performance chart, transitioning downward into a dense account ledger and concluding with a balanced 50/50 two-column split between asset distribution and transaction logs.
PALETTE (use these exact hex values)
- #070C15 — Obsidian Ground: Root page canvas and global backdrop behind cards and persistent navigation
- #0D1726 — Deep Midnight Card: Primary surface fill for KPI metrics, data tables, and chart containers
- #162438 — Subtle Vault Border: Hairline 1px structural dividing lines around cards, inputs, and rows
- #2DD4BF — Cyan Signal: Chart sparklines, active pill indicators, interactive focus rings, and primary badge accents
- #34D399 — Yield Green: Positive monetary deltas, percentage gains, and inbound deposit badges
- #818CF8 — Asset Allocation Violet: Segment fills in asset donut chart representing alternative holdings and equities
- #F8FAFC — High Contrast White: Main greetings, balance figures, table values, and modal titles
- #64748B — Slate Blue Muted: Metadata labels, column headers, unselected navigation icons, and timestamps
TYPOGRAPHY
Typeface Inter (or SF Pro Display, Geist, Plus Jakarta Sans), 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 at 24px+, 0.04em on uppercase micro labels. The typographic tone is cool, algorithmic, and unimpeachable. Inter's neutral neo-grotesque contours convey high-trust institutional finance, utilizing tight negative letter tracking on headings (-0.02em) to eliminate air and loose tracking (+0.06em) on uppercase micro labels to guarantee effortless scannability of dense fiscal ledgers.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is produced through a three-stage luminance step rather than ambient blur shadows. The ground canvas sits at #070C15, functional cards elevate to #0D1726 bounded by a sharp 1px #162438 perimeter stroke, and interactive controls or pills rest at #132135. Ambient lighting is entirely reserved for data-point glows and faint chart gradients.
IMAGERY
No photographic lifestyle or marketing imagery is present; the interface relies completely on data precision and typographic hierarchy. The only photographic element permitted is a small, 32px circular user profile avatar with balanced lighting. Any stock photography, illustrative banners, or skeuomorphic textures would instantly destroy the institutional prestige of this layout.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the glowing cyan area chart (#2DD4BF) resting inside a pitch-black midnight card (#0D1726) without grid clutter. It immediately reads as elite, proprietary Bloomberg-grade software stripped of vintage complexity. It is commonly misused by adding heavy vertical gridlines, exaggerated drop shadows, or overly saturated multi-colored lines that overwhelm the calm canvas.
MUST
- Use strictly 1px borders with #162438 to demarcate surfaces instead of box-shadows.
- Format all major numerical assets using monospace or tabular number figures for visual alignment.
- Reserve the cyan #2DD4BF tone strictly for charts, active pill selections, and primary status indicators.
- Maintain consistent 20px internal padding across all cards regardless of their width.
AVOID
- Do not use pure black (#000000) for backgrounds; it degrades perceived atmospheric depth.
- Never apply high-opacity drop shadows; surface boundaries must remain purely architectural via strokes.
- Avoid bright saturated red warnings unless indicating a catastrophic account error; negative returns remain neutral white or muted slate.
- Do not allow card border radii to deviate from 14px across the viewport.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1392:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
