Design a dark-mode web interface screen: instrument-grade financial telemetry cast in bioluminescent seafoam against an abyssal maritime navy.
LAYOUT
The workspace uses a fixed 240px dark navy sidebar on the left containing hierarchical category trees and account status, matched with a flexible multi-tier dashboard on the right. Content progresses vertically from a top utility bar with global search, down to an executive headline with primary actions, followed by a 4-card metric row. Below sits a dominant 16:9 trend graph, transitioning into a balanced two-column analytics section and a full-width transaction table.
PALETTE (use these exact hex values)
- #090e17 — Abyssal Void: Global application backdrop behind all cards and outer navigation
- #111c2e — Midnight Panel: Card containers, sidebar panels, input shells, and modal backgrounds
- #1c2b44 — Deep Harbor Border: Hairline 1px structural dividing lines and card boundaries
- #34d399 — Seafoam Mint: Primary interactive buttons, positive delta arrows, and primary sparkline plots
- #38bdf8 — Cyan Highlight: Secondary chart segments, investment metrics, and active segment indicators
- #f87171 — Crimson Delta: Negative transaction figures, downward trends, and expense indicators
- #fbbf24 — Amber Net: Net worth icon container, premium badges, and alert markers
- #ffffff — Pristine Snow: Key header labels, monetary quantities, and high-emphasis data
- #94a3b8 — Slate Fog: Table content rows, subheadings, and secondary metadata
- #64748b — Muted Steel: Category supertitles, column table headings, and axis timestamps
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General 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 on large figures, +0.02em on tiny caps. The typography speaks with authoritative, clinical precision, resembling high-end quantitative trading tools and modern fintech infrastructure. Plus Jakarta Sans or Inter provides round, open apertures with heavy geometric numerals that ensure balance figures read instantly at glance. Neutral tracking and medium-weight body labels preserve readability against deep blue-black backdrops.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Elevation is achieved entirely through chromatic contrast and precise hairline boundaries rather than blurry shadows. The level 0 canvas (#090e17) provides infinite depth, over which level 1 panels (#111c2e) float with crisp 1px borders (#1c2b44). Dropdown menus and floating tooltips use an intensified level 2 background (#16233b) with a delicate 12px blur shadow for localized separation.
IMAGERY
No photographic imagery is present anywhere on the interface. Visuals are exclusively analytical: vector sparklines, SVG donut graphs, minimalist mono-line system icons (16px to 20px), and circular user initial avatars. Any photographic lifestyle imagery or textured banners would violate the precision engineering aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing seafoam chart trendline accented by a terminal value tooltip pill (#34d399 fill with dark digits), floating over deep maritime navy cards. This specific convergence of bioluminescent green and deep navy defines the entire high-net-worth operational feel.
MUST
- Use strictly 1px borders in #1c2b44 to define surfaces without relying on heavy box shadows.
- Pair tabular numbers with monospace styling or Inter tabular figures for clean column alignment.
- Reserve bright seafoam (#34d399) strictly for positive metrics, primary buttons, and active focal points.
- Keep card corner radii consistently at 14px across all grid modules.
AVOID
- Never introduce stark pure white backgrounds or harsh drop shadows.
- Do not use saturated primary red or green for background fills; keep color confined to lines and chips.
- Avoid mixed card border radii; do not mix 4px, 14px, and 24px cards on the same page.
- Do not remove the subtle 1px border from cards; the dark-on-dark surfaces require edge definition.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1424:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
