Design a light-mode web interface screen: deep oceanic midnight anchoring crisp architectural white surfaces for high-trust personal asset tracking.
LAYOUT
The workspace employs a rigid left-to-right hierarchy: a fixed 240px midnight sidebar anchors global control, opening into a spacious flexible container. The main body sequences from high abstraction to granular detail: a top greeting bar, a full-width hero net-worth sparkline card, a four-column KPI metrics row, a two-column balance between performance charts and recent transactions, and a bottom horizontal goals shelf.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Workspace: Background for the entire main dashboard canvas and scrollable grid area.
- #FFFFFF — Surface Card Light: Primary background for analytical modules, metrics, goal blocks, and lists.
- #0B132B — Midnight Sidebar: Structural anchor container background for primary app navigation and system utility links.
- #0F1E36 — Hero Navy: Background for the primary net-worth spotlight card and high-level sparkline chart.
- #3DD9C4 — Electric Aqua: Primary action button fill, active progress indicators, and radiant chart glows.
- #0F172A — Ink Primary: High-emphasis display amounts, section titles, and active state textual content.
- #64748B — Slate Muted: Subheadings, axis intervals, historical date stamps, and secondary transaction metadata.
- #10B981 — Emerald Gain: Positive monetary deltas, income transaction listings, and on-track milestone tags.
- #F43F5E — Coral Deduction: Negative transaction sums, liabilities indicators, and account debit values.
- #2563EB — Allocation Cobalt: Dominant equity segment in asset allocation ring and secondary metric pills.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Manrope), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px heading, 24px heading-lg, 36px display. Tracking -0.03em for display figures, 0 for body text. The typographic tone is architectural, rational, and institutional yet approachable. Plus Jakarta Sans provides clean geometric shapes with open apertures that remain exceptionally legible even at 11px micro-labels. When implementing, fallback gracefully to Inter or system-ui sans-serif fonts while ensuring tabular numerical figures are active via font-variant-numeric.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 10px, buttons 8px. Spacing on a 4px unit, 20px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is created primarily through surface contrast rather than physical drop shadows. The stark juxtaposition of the midnight navy sidebar and hero card against the light canvas establishes immediate spatial grounding. Secondary elevated cards use a crisp 1px perimeter outline (#E2E8F0) alongside an imperceptible low-opacity blur (0 1px 3px rgba(0,0,0,0.04)).
IMAGERY
Iconography consists of minimal, monoline vector pictograms enclosed within soft rounded-square background badges. Brand logos for vendors (like Apple, Amazon, Starbucks) are rendered authentically within crisp neutral containers. Photographic imagery is strictly avoided in favor of clean financial vector visualizations.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone canvas strategy—placing a dramatic obsidian-navy net-worth card with an electric cyan neon sparkline directly atop a serene, architectural white card grid. It instantly signals executive power at the top while maintaining clinical, glare-free readability for day-to-day transaction records.
MUST
- Retain the dark navy card exclusively for the high-level hero net-worth module.
- Render all financial amounts in tabular figures to avoid character shifting on update.
- Keep card inner padding strictly between 20px and 24px across the workspace.
- Use the vivid cyan (#3DD9C4) sparingly as an intentional navigational beacon.
AVOID
- Do not invert analytical white cards into dark theme unless toggling entire workspace.
- Never use pure black (#000000); always tint dark tones with deep oceanic slate.
- Avoid harsh multi-stop drop shadows; use clean 1px border lines (#E2E8F0) instead.
- Do not use saturated red/green indicators for non-financial or purely decorative states.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1456:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
