Design a light-mode web interface screen: deep navy navigation anchoring crisp cloud-white data canvases illuminated by electric teal, violet, and amber analytical accents.
LAYOUT
The screen uses a fixed 240px left-hand sidebar navigation bar paired with a fluid, comfortable-density right dashboard area. The top utility row holds search, date-range picker, filter toggles, and notification icons. Directly underneath, five uniform KPI stat cards span the viewport horizontally, leading into a two-column middle tier (8-col line chart, 4-col category donut) and mirroring bottom tier (8-col performance table, 4-col activity stream).
PALETTE (use these exact hex values)
- #0c172c — Sidebar Obsidian: structural backdrop for the persistent left navigation rail and workspace branding
- #f6f8fb — Canvas Ice: primary viewport background providing low-glare contrast beneath data cards
- #ffffff — Card Pure White: foreground container background for all KPI blocks, charts, and table lists
- #14b8a6 — Primary Teal: hero brand hue for revenue trendline, active navigation accents, and primary CTAs
- #6366f1 — Electric Violet: categorical indicator for transaction order counts and recruitment metrics
- #f59e0b — Vibrant Amber: categorical identifier for profit margins and project planning schedules
- #0284c7 — Azure Blue: categorical marker for teamwork units, cash balances, and client growth
- #0f172a — Metric Slate: highest contrast value for major financial totals, headers, and active state text
- #64748b — Muted Slate: supporting metadata, timestamps, comparison baselines, and inactive nav labels
- #10b981 — Positive Green: delta indicators denoting positive growth percentages across all performance periods
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 24px heading-lg. Tracking -0.02em for headings, 0 for body. Plus Jakarta Sans delivers an engineered, highly legible clarity tailored for data-dense financial analysis. The tall x-height and circular terminals give numerals immediate legibility without feeling mechanical or sterile. Inter or DM Sans serve as effortless replacements without altering tracking or metric alignment.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is communicated almost entirely through flat tonal stratification rather than multi-layered shadows. The dark navy sidebar establishes an absolute anchor level, over which the canvas rests as a neutral foundation plane. Cards sit on this canvas with a crisp 1px light border (#eef2f6) and an almost imperceptible 0 1px 3px rgba(0,0,0,0.02) drop shadow, reserving true elevated floating shadow (0 4px 12px rgba(0,0,0,0.15)) only for hover tooltips.
IMAGERY
Imagery is entirely non-photographic and vector-native. Graphical assets are limited to clean line-art pictograms housed in rounded square icon badges, smoothed Bezier curve data lines, and multi-segment vector donut rings. Abstract or lifestyle photographic banners are strictly avoided to preserve serious enterprise focus.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the vibrant 36px squircle categorical icon badge system paired directly with matching sparklines and donut segments. By assigning consistent distinct colors (teal, violet, blue, amber) to individual business units across every widget—from KPI tiles to table rows and donut legends—the interface creates instant cross-dashboard cognitive recognition without reading text labels.
MUST
- Retain the sharp visual boundary between the navy sidebar (#0c172c) and light workspace (#f6f8fb).
- Encase all metric icons in 36px rounded squircles colored in soft tints of their categorical parent.
- Present all primary metrics in bold Plus Jakarta Sans numerals (#0f172a) at minimum 20px size.
- Use green (#10b981) exclusively for positive delta growth figures with accompanying directional arrows.
AVOID
- Do not apply dark mode backgrounds to data cards while maintaining the navy sidebar.
- Never use primary teal for destructive alerts, negative variance, or inactive menu states.
- Do not omit the squircle badge treatment from list items in the activity or performance tables.
- Avoid thick, high-contrast chart gridlines; keep them at 1px using faint slate (#f1f5f9).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3520:2336. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
