Design a light-mode web interface screen: deep navy authority anchoring crisp daylight surfaces illuminated by electric teal and violet financial telemetry.
LAYOUT
The viewport is framed by a persistent ~220px fixed navy sidebar on the far left. The top header hosts global search, notification alerts, and user profiles across a 64px vertical plane. The main canvas is divided into a 68/32 two-column split: the wider left column stacks the 4-card metric row, the large cash flow chart, recent transactions, and invoices; the right column forms a continuous telemetry rail housing the profit gauge, category list, budget bars, and cash balance trend.
PALETTE (use these exact hex values)
- #0d1527 — Sidebar Obsidian: Anchors primary app-level navigation and identity spine.
- #f8fafc — Canvas Light: Background workspace behind all analytic cards and headers.
- #ffffff — Card Pure White: Modular content containers, table backdrops, and active metric surfaces.
- #00bba7 — Electric Teal: Primary metric highlights, positive trends, primary action buttons, and chart fills.
- #8b5cf6 — Orchid Violet: Expense traces, secondary progress indicators, and upgrade promotional banners.
- #0f172a — Ink Slate: Primary headers, numeric stat totals, table record names, and active tabs.
- #64748b — Muted Slate: Secondary labels, column metadata, table dates, and inactive navigation links.
- #f1f5f9 — Hairline Border: Dividing table rows, search field boundaries, and card perimeter strokes.
- #e6f8f5 — Soft Mint: Pill backgrounds for completed status chips and revenue trend icons.
- #d97706 — Amber Alert: Pending status text and warning indicator glyphs.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 26px display. Tracking -0.02em at display, 0 at body. The typographic tone is architectural, rational, and institutional without feeling cold, driven by the clean geometric apertures of Plus Jakarta Sans. Tabular figures prevent layout jitter across fluctuating financial totals. The strict adherence to a muted gray (#64748b) for metadata allows the high-contrast slate (#0f172a) values to speak with unambiguous authority.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 10px, buttons 8px. Spacing on a 4px unit, 20px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is achieved through lateral surface juxtaposition rather than intense Z-axis shadows. The dark navy sidebar provides deep grounding, while white cards rest on the #f8fafc canvas with a featherweight 1px border (#f1f5f9) and an imperceptible blur shadow (0 1px 3px rgba(0,0,0,0.03)). Popovers and floating chart tooltips utilize clean white cards with a slightly elevated shadow (0 4px 12px rgba(15,23,42,0.08)).
IMAGERY
Photography is absent, replaced entirely by precision vector UI icons and clean scalar data visualizations. Avatars are restricted to tiny circular initials badges (e.g. 'JS' in muted teal) or minimalist company glyphs in table rows. Decorative illustrations are forbidden; all graphical presence comes from analytical charts, progress tracks, and functional glyphs.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-rail layout architecture: a solitary deep obsidian-navy sidebar (#0d1527) holding structural navigation, abutting a multi-column light gray canvas where every card is pure white with 16px radii and luminous teal highlights. Misusing this system typically involves lightening the sidebar to gray or oversaturating the card backgrounds, which instantly destroys the executive cockpit feel.
MUST
- Anchor financial metrics with 26px semibold typography using tabular figure spacing.
- Maintain uniform 16px border-radius across all interior white content cards.
- Use pastel tinted pills (#e6f8f5, #fef3c7, #fee2e2) exclusively for operational status tags.
- Enclose secondary chart metrics and trend arrows within lightweight 11px caption units.
AVOID
- Never apply high-saturation background fills to metric cards or table rows.
- Do not use sharp 0px or 4px corners on modular dashboard panels.
- Avoid colored drop shadows underneath cards; keep elevation crisp and near-flat.
- Never swap the deep navy sidebar for a light gray or white navigation bar.
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 中尝试 
