Design a dark-mode web interface screen: a deep-sea command console where luminous aquamarine telemetry charts private wealth against midnight velvet.
LAYOUT
The viewport is organized into a docked 240px left-hand navigation column and a fluid, 12-column analytical grid. The main canvas stacks a top utility bar, followed by a personalized greeting header with quick actions, four compact KPI stat cards, and an asymmetric two-column core: heavy chart telemetry and transactional ledgers on the 8-column left, with asset allocation donuts, alerts, and market movers populating the 4-column right rail.
PALETTE (use these exact hex values)
- #090d16 — Midnight Abyss: Deepest canvas background providing absolute contrast for glowing data visualizations.
- #0f172a — Deep Slate Surface: Primary fill for all modular cards, tables, and widget containers.
- #1e293b — Subtle Slate Border: 1px perimeter strokes defining card containers, table rows, and input enclosures.
- #2dd4bf — Telemetry Cyan: Vector stroke and glow for positive charts, sparklines, and metric gains.
- #6366f1 — Royal Transfer Indigo: High-priority action buttons like Transfer and the Insights featured module background.
- #34d399 — Alpha Green: Positive asset deltas, percentage gains, and completed transaction chips.
- #f59e0b — Amber Asset: Secondary donut segment representing cash holdings and warm notification pings.
- #f8fafc — Frost White: High-emphasis numbers, portfolio balances, active tabs, and primary titles.
- #94a3b8 — Muted Slate Text: Table content, navigation link labels, and secondary descriptive details.
- #64748b — Ghost Slate Text: Micro table headers, timestamps, inactive icons, and chart axis labels.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 24px heading-lg, 32px display. Tracking -0.02em at large numbers, 0 at body, +0.04em at captions. The typography is cold, precise, and authoritative, echoing professional financial terminals like Bloomberg or modern high-net-worth platforms. Rendered in Inter with tight letter-spacing (-0.02em) on big monetary figures, it communicates exactitude and high signal-to-noise ratio. Free open-source alternatives like Plus Jakarta Sans or Geist Sans maintain this exact institutional composure.
GEOMETRY & SPACING
Corner radii — cards 12px, links 6px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, tight density.
DEPTH
Depth is rendered entirely through subtle surface luminance shifts and razor-thin 1px borders rather than fuzzy drop shadows. The background sits at absolute pitch navy (#090d16), while interactive cards float precisely one tier higher at #0f172a with #1e293b outlines. The solitary decorative glow belongs to the Insights card, which uses a dark violet ambient gradient to imply algorithmic intelligence.
IMAGERY
Imagery is strictly non-photographic and vector-native. It is built entirely from geometric financial line graphs, smooth area gradients, and simplified monoline icons housed in rounded dark chips. Photographic portraiture or stock illustrations would shatter the clinical, proprietary trading-terminal aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing cyan vector telemetry curve (#2dd4bf) traversing faint horizontal gridlines on an ink-dark container is the core signature. It anchors the user's perception of wealth velocity, turning mundane portfolio tracking into an institutional cockpit experience. Misusing it involves making the chart stroke too thick or applying heavy neon blurs that bleed into the surrounding numerical metrics.
MUST
- Use tabular numerals (font-variant-numeric: tabular-nums) for all currency and percentage values.
- Restrict card background fills to dark slate #0f172a with crisp 1px borders in #1e293b.
- Reserve vibrant cyan (#2dd4bf) strictly for active telemetry charts, positive sparklines, and progress indicators.
- Keep typography scale anchored at body 13px to achieve institutional-level information density.
AVOID
- Never use pure black (#000000) for card backgrounds; depth relies on midnight blues.
- Do not apply heavy drop shadows or diffuse blur glows behind standard cards.
- Never set tabular header text larger than 12px; keep table labels muted in #64748b.
- Do not mix rounded card corner radii; maintain a uniform 12px across the board.
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. 在 DraPub 中尝试 
