Design a dark-mode web interface screen: quiet luxury private banking for ultra-high-net-worth portfolios engineered through luminous cyan telemetry on abyssal slate surfaces.
LAYOUT
The workspace employs a rigid two-zone layout: a 240px left-hand vertical control rail anchored against a dense, scrollable analytical dashboard. The main canvas stacks horizontally in clear thematic strata: top greeting and KPI summary row, mid-tier allocation donut and performance chart, full-width holdings tabular ledger, followed by a three-column news, AI, and calendar footer.
PALETTE (use these exact hex values)
- #070C14 — Abyssal Canvas: Deepest background layer across entire dashboard viewport and sidebar foundation.
- #0D1724 — Slate Module: Primary surface for cards, analytical containers, and data table backdrops.
- #162436 — Subtle Meridian Border: 1px containment line framing cards, table rows, and structural dividers.
- #14B8A6 — Active Mint: Primary active indicators, navigation selection states, and positive performance trendlines.
- #06B6D4 — Electric Cyan: Secondary chart accents, upgrade badge highlights, and positive return labels.
- #6366F1 — Royal Iris: Fixed income segment within asset allocation charts and neural insights glow.
- #F59E0B — Warm Amber: Alternative asset allocation slice, deposit indicators, and notification pips.
- #F43F5E — Risk Rose: Negative delta indicators, loss percentages, and sell transaction markers.
- #FFFFFF — Pure Crisp: High-emphasis asset valuations, currency headings, and active state labels.
- #64748B — Muted Slate: Table column headers, secondary timestamps, tickers, and inactive nav items.
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, 30px display. Tracking -0.02em at display, 0.01em at captions. The typography speaks with the quiet confidence of elite private banking: razor-sharp, objective, and mathematically disciplined. Set in a contemporary neutral sans-serif like Inter, it relies on tight negative tracking at display scales and generous proportional spacing on tabular figures to guarantee effortless legibility under high cognitive load.
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 created purely through luminous layering rather than physical skeuomorphic shadows. Surfaces advance toward the user through darkening backdrops and delicate 1px border highlights (#162436), while localized neon glow accents (such as chart curves and the AI orb) cast soft radial atmospheric illumination.
IMAGERY
Visual imagery is restricted to miniature security brand badges, small editorial thumbnails for financial news, and an ethereal iridescent gradient sphere representing the algorithmic core. Photography is strictly documentary-financial, heavily desaturated and moody to blend into the dark architecture.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-contrast telemetry system: razor-thin 1px border cages (#162436) wrapping glowing bioluminescent mint-cyan sparklines that sit peacefully inside an abyssal slate container (#0D1724). Misusing it involves making the charts thick, opaque, or brightly flooded instead of delicate glowing line paths.
MUST
- Use solid 1px borders (#162436) to define card boundaries rather than heavy drop shadows.
- Pair emerald-cyan (#14B8A6) strictly with positive performance and active system states.
- Maintain monospace-like visual precision across all numeric currency displays.
- Keep card backgrounds uniform at #0D1724 to ensure cohesion across diverse data views.
AVOID
- Do not introduce light gray or white container surfaces anywhere on the canvas.
- Never use saturated warm primary buttons; retain the dark institutional palette with mint accents.
- Avoid thick borders (>1px) which destroy the delicate precision of the telemetry aesthetic.
- Do not omit ticker symbols beneath security names in dense financial tables.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2080:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试