Design a dark-mode web interface screen: deep-sea dark mode precision where glowing mint telemetry guides high-net-worth decisions with effortless institutional calm.
LAYOUT
A rigid two-column layout pairs a fixed ~240px dark sidebar navigation on the left with a fluid, multi-row dashboard canvas on the right. The canvas opens with a utility top-bar followed by a personalized welcome row, leading into a 4-column metric card deck. Below sits a 50/50 split panel housing asset allocation and growth analytics, followed by a full-width accounts ledger and a final two-column split between transactions and market tickers.
PALETTE (use these exact hex values)
- #0B101B — Abyssal Navy: Root application background canvas behind all modular panels and global navigation chrome
- #131C2E — Elevated Midnight: Primary surface fill for KPI containers, data tables, and chart grouping frames
- #1E2A42 — Deep Slate Stroke: Hairline perimeter stroke separating card boundaries and table row dividers
- #2DD4BF — Signal Mint: Primary action button fill, positive delta text, and active chart telemetry paths
- #F43F5E — Vivid Coral: Explicit downward percentage shifts and negative outflow transaction indicators
- #6366F1 — Royal Iris: Allocation chart segment denoting fixed-income assets and secondary chart categories
- #F59E0B — Amber Gold: Commodity ticker badge and cash reserve visual identifier in donut distributions
- #F8FAFC — Pure Crisp: Highest-contrast text for critical financial balances, titles, and section headers
- #94A3B8 — Muted Slate: Labels, meta timestamps, table column headers, and inactive navigational states
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text, Geist), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px heading, 28px display. Tracking -0.02em at display, 0.01em at caption. The typography is disciplined, institutional, and technical, perfectly aligned with executive wealth monitoring. Using Inter or comparable geometric-grotesque typefaces ensures numbers remain legible at microscopic resolutions (11px captions) while carrying commanding authority at display sizes ($842,680.54 at 28px). Plus Jakarta Sans or Geist can serve as exact drop-in replacements.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is achieved through surface tone stacking rather than blurred drop shadows. The bottom layer (#0B101B) serves as the floor, while primary content cards lift one level upward into #131C2E bounded by 1px stroke (#1E2A42). Inner controls like inputs, badges, and active state chips introduce a third elevation (#1A253C) with zero shadow blur.
IMAGERY
This interface avoids photographic imagery entirely, relying instead on clean vector brand glyphs (Apple, Starbucks, Tesla) encased in minimal circular or rounded-square asset badges. Charts and sparklines serve as the visual centerpieces, emphasizing mathematical exactness through smooth Bézier lines and gradient fills. Any realistic photography or decorative 3D illustrations would feel profoundly out of place.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-engine Portfolio Overview module combining a multi-color segmented donut chart with a glowing seafoam-mint spline graph against a deep slate container. It instantly telegraphs both balance distribution and historical yield in a single glance. Misusing it means separating these two data points into disconnected, full-width cards or replacing the glowing mint vector line with a flat monochrome curve.
MUST
- Keep card backgrounds strictly in #131C2E with subtle 1px borders (#1E2A42) rather than high-contrast drop shadows.
- Restrict pure white (#F8FAFC) to primary financial values and titles to maintain reading hierarchy.
- Use signal mint (#2DD4BF) exclusively for positive performance trends, key actions, and active telemetry paths.
- Format tabular numbers with tabular figures (tnum) or mono styling to guarantee financial column alignment.
AVOID
- Never apply saturated background fills to cards; surfaces must remain deep dark navy (#131C2E).
- Do not use generic blue hyperlinks; all navigation relies on muted gray rows transitioning to crisp white.
- Avoid thick borders greater than 1px; panel separation should feel precision-milled, not blocky.
- Never mix bright neon greens for positive deltas; adhere strictly to balanced mint (#2DD4BF).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1536:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
