Design a light-mode web interface screen: crystalline analytics against deep midnight navy with soft teal sparks and pillowy cards.
LAYOUT
The page follows a classic fixed-sidebar left navigation (240px width) combined with a fluid, multi-column dashboard grid. Top bar contains greeting and global actions ('New Transaction' button and date picker). Below, four equal-width stat cards form an introductory KPI ribbon, transitioning to an asymmetric two-column split: a wide chart (60% width) paired with account summaries (40%), followed by a three-column breakdown section (Expense Breakdown donut, Recent Transactions list, and Budget vs Actual progress bars), finished with a full-width Smart Insight banner.
PALETTE (use these exact hex values)
- #0a1128 — Midnight Sidebar: Full height navigation bar container background anchor
- #f8fafc — Canvas Ice: Main dashboard background behind all metric cards
- #ffffff — Card Surface: Primary metric card and container fill
- #f1f5f9 — Border Grey: Hairline card outlines, dividers, and input borders
- #0d9488 — Teal Emerald: Primary positive balance, income badges, and primary action button
- #5b5fc7 — Periwinkle Indigo: Expense metrics, interactive CTA buttons, and secondary charts
- #38bdf8 — Electric Sky: Net profit chart series and progress fills
- #f43f5e — Coral Rose: Expense debits and negative transaction amounts
- #0f172a — Text Primary: High-contrast headings, KPI values, and primary row titles
- #64748b — Text Muted: Sublabels, dates, timestamps, table metadata, and inactive nav items
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 18px heading, 22px heading-lg, 26px display. Tracking -0.02em on headings, -0.01em on body. The typographic identity is clean, tech-forward, and authoritative without feeling sterile. Plus Jakarta Sans or a close neo-grotesque alternative gives numerical data crisp tabular rhythm, while boldweights add weight to key currency values. It avoids decorative quirks in favor of high scannability and crisp contrast on both light canvas and dark navy sidebar contexts.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is communicated through flat plane separation rather than heavy skeuomorphic drop shadows. Cards sit slightly elevated above the canvas using ultra-soft shadows (0 1px 3px rgba(0,0,0,0.03), 0 6px 16px rgba(0,0,0,0.02)) and hairline borders (#f1f5f9). The dark sidebar creates a prominent vertical anchor, establishing an architectural base layer on the left.
IMAGERY
Iconography is geometric, dual-tone or single-stroke line art (1.5px stroke width) enclosed inside circular tinted pill badges (36px). The only decorative graphic is a soft isometric 3D illustration of stationery inside the 'Smart Insight' card, rendered in clean blues, purples, and whites. Unrendered photography or busy textures are strictly absent.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive balance between a deep midnight navy rail (#0a1128) and bright pillowy cards with soft multi-color spline charts. What distinguishes this interface is the harmonious triad of teal (#0d9488), periwinkle purple (#5b5fc7), and sky blue (#38bdf8) consistently applied across charts, icons, and progress bars. Common misuse would be replacing the rich navy sidebar with generic white, collapsing the visual hierarchy into a flat, indistinct SaaS interface.
MUST
- Use solid 16px border-radius on all parent cards to maintain the friendly, contemporary aesthetic.
- Pair emerald teal (#0d9488) exclusively with positive metrics and primary transactional buttons.
- Keep card outlines subtle at 1px solid #f1f5f9 or omit entirely in favor of an ultra-diffuse shadow.
- Display financial numbers in Plus Jakarta Sans bold with slightly negative letter spacing (-0.02em).
AVOID
- Do not use harsh pure black (#000000) for text; always use deep slate navy (#0f172a).
- Never mix sharp 0px corners or pill radiuses on major card boundaries.
- Avoid high-contrast heavy borders; border lines must never exceed #e2e8f0 in visual weight.
- Do not use red for expenses unless it represents a negative delta or alert; use purple (#5b5fc7) for standard expense categorisation.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2784:2960. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
