Design a dark-mode web interface screen: luminescent cyan and lavender telemetry glowing softly against deep oceanic obsidian surfaces.
LAYOUT
The dashboard employs an asymmetric multi-column layout fixed to a left-anchored 220px vertical sidebar. The main content starts with a compact header containing greeting and primary actions, followed immediately by a four-card KPI telemetry row. The middle tier features an expansive 12-column split between a 7-column multi-series wave chart and a 5-column secondary module, followed by balanced two-column financial breakdown grids, concluding with a full-width transaction table.
PALETTE (use these exact hex values)
- #080E18 — Canvas Obsidian: Deepest background layer across main workspace and sidebar
- #0F1A2A — Card Surface: Background fill for all analytic modules, data cards, and tables
- #1A293E — Card Border: Subtle 1px perimeter stroke framing panels and dividers
- #2DD4BF — Electric Cyan: Primary metric indicator, positive trends, sparklines, and active sidebar highlight
- #4F46E5 — Royal Iris: Primary action button fill for top-level interactions like new transfers
- #818CF8 — Violet Neon: Secondary chart line for expenses, badge fills, and category icons
- #F59E0B — Amber Sunrise: Tertiary chart lines for savings, alerts, and category indicators
- #FB7185 — Coral Rose: Negative balances, debt indicators, and spending segments
- #F8FAFC — Text Primary: Primary headings, prominent dollar amounts, and core metric labels
- #64748B — Text Muted: Auxiliary metadata, microcopy, axis markings, and secondary table headings
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 28px display. Tracking -0.02em at display, 0 at body. The typography communicates hyper-rational, modern algorithmic precision. Using a high-clarity neutral sans-serif like Inter, it balances dense numerical figures with clean, readable metadata. Numerical strings benefit from neutral geometry and uniform tabular tracking, projecting institutional reliability and technological sophistication.
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
Depth is strictly non-skeuomorphic and achieved without diffused drop shadows. Elevation relies on a two-tier surface hierarchy: the obsidian base (#080E18) and raised container panels (#0F1A2A). Structural containment is articulated exclusively via crisp 1px strokes (#1A293E) and localized ambient luminescent glows originating from chart lines.
IMAGERY
This interface avoids photographic assets almost entirely, maintaining a rigorous data-first fintech atmosphere. Imagery is limited to crisp, dual-tone vector icons (20px) enclosed in translucent colored discs, alongside a circular 32px user avatar in the lower navigation rail. Decorative illustrations or realistic textures would violate the precise technical aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive luminescent neon wave chart rendered in cyan, lavender, and amber against deep oceanic obsidian. It transforms ordinary balance tracking into an engaging, glowing telemetry readout. Misuse typically occurs when applying this neon intensity to large background fills or using mismatched, jagged spline smoothing.
MUST
- Use 1px border (#1A293E) on all cards to preserve boundary separation against dark canvas.
- Rely strictly on semantic neon accents (cyan, purple, amber, coral) for data visualizations.
- Format major currency amounts in bold font sizes between 20px and 28px.
- Enclose transaction category tags in low-opacity pills with matching colored label text.
AVOID
- Never introduce pure black (#000000) or pure white (#FFFFFF) backgrounds.
- Do not use heavy, blurred drop shadows; depth is strictly managed via 1px borders.
- Never use non-tabular numbers for dollar amounts, which disrupts vertical column alignment.
- Avoid thick dividing lines; keep table and section dividers to exactly 1px at 10-15% opacity.
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 中尝试 
