Design a light-mode web interface screen: precision enterprise analytics grounded in deep midnight contrast and luminescent blue data rivers.
LAYOUT
The viewport is organized via a rigid two-column layout: a fixed 240px dark sidebar on the left and a scrollable content area on the right. Content descends rhythmically: top utility bar with date range and actions, a 4-column KPI grid, a split 65/35 section pairing the primary bar/line chart with the channel donut, a parallel split featuring the data table alongside the live activity feed, and a full-width AI insight module closing the view.
PALETTE (use these exact hex values)
- #0b132b — Sidebar Obsidian: structural backdrop for the persistent navigation rail and account status
- #f8fafd — Canvas Ice: main application background supporting high-contrast card separation
- #ffffff — Card Pure White: primary container surface for metrics, data tables, and interactive charts
- #2563eb — Cobalt Primary: primary interactive buttons, active navigation indicator, and primary chart series
- #38bdf8 — Cyan Velocity: secondary chart spline, metric sparkline accent, and secondary trend indicator
- #10b981 — Emerald Positive: positive delta percentages and live pulsing status beacons
- #f43f5e — Rose Pulse: conversion trend charts and goal accomplishment badges
- #0f172a — Slate Text Primary: dominant heading text, numeric totals, and high-emphasis data labels
- #64748b — Muted Text Secondary: subtitles, comparative timeframes, table headers, and dormant icons
- #f1f5f9 — Border Hairline: subtle boundaries defining cards, divider lines, and button outlines
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 24px heading-lg, 28px display. Tracking -0.02em for headings, 0 for body. The type choice is crisp, technical, and approachable—exemplified by Plus Jakarta Sans. Its wide apertures and modern geometric curves lend authority to dense numbers without feeling clinical. Inter or Manrope serve as exact drop-in substitutes; avoid serif or condensed display faces as they compromise glanceable legibility.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is minimal and clean. Primary canvas cards rely on a nearly invisible 1px hairline border (#f1f5f9) paired with an ambient drop shadow (0 4px 20px -2px rgba(15, 23, 42, 0.04)). The only stark elevation jump occurs on interactive flyouts and the dark hover tooltip, which projects a sharper 0 10px 25px -5px rgba(0, 0, 0, 0.25).
IMAGERY
Iconography is uniform, dual-tone stroke based, with 1.75px line weights inside light-tinted circular badges. The sole decorative visual asset is a glossy 3D claymorphic illustration in the AI Insights card, styled with soft lighting, pastel screens, and round pill shapes. Photorealistic human photography would violently disrupt this abstract data-first aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The split-identity canvas: an imposing dark midnight sidebar (#0b132b) acting as an architectural spine, juxtaposed against an ultra-clean, luminous light-mode data plane illuminated by vivid cobalt and electric cyan vectors. Misusing it means either flattening the entire canvas to pure light mode or applying dark mode inconsistently across main dashboard cards.
MUST
- Retain the strict 16px corner radius across all data cards for visual harmony.
- Pair emerald green (+10b981) strictly with positive indicators or real-time status pulses.
- Use generous 20px to 24px internal card padding to keep dense dashboards legible.
- Render the main canvas in pale cool-tinted white (#f8fafd) to soften eye strain.
AVOID
- Do not use dark backgrounds inside individual metric cards on the main canvas.
- Avoid harsh black borders; use hairline tints (#f1f5f9) instead.
- Do not display more than two metric series at once on the combo chart.
- Never drop below 11px for secondary metadata or timeframe comparisons.
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 中尝试 
