Design a light-mode web interface screen: an airy executive cockpit engineered through soft porcelain surfaces, crystalline data visualization, and crisp slate typography.
LAYOUT
The workspace uses a persistent 240px left sidebar and a fluid main dashboard divided vertically into distinct operational horizons. The top header hosts global search and utility actions above a personal greeting and date-range filter. Below, four compact KPI summary cards establish the primary pulse, followed by stacked two-column analytical visualizations, paired tabular grids, and a full-width bottom financial chart.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Dominant outer viewport surface framing sidebar and floating dashboard widgets.
- #FFFFFF — Card Surface: Background for all elevated widgets, panels, tables, and top search inputs.
- #F1F5F9 — Card Border: Hairline 1px perimeter border defining cards and subtle table dividing rows.
- #2563EB — Primary Blue: Primary action button background, active sidebar state, and focal trendlines.
- #EFF6FF — Brand Tint: Light blue wash used behind active sidebar links and selected pills.
- #0F172A — Charcoal Slate: Primary headings, KPI headline values, table items, and high-emphasis labels.
- #64748B — Muted Slate: Secondary descriptors, chart axis labels, timestamps, and column headers.
- #10B981 — Emerald Success: Positive delta trends, 'On Track' pill badges, and growth progress fills.
- #F59E0B — Amber Warning: Attention callouts, 'At Risk' status indicators, and intermediate progress bars.
- #EF4444 — Rose Critical: Notification badge, 'Off Track' alert chips, and negative financial variances.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 24px heading-lg, 28px display. Tracking -0.02em at display, 0 at body. The typography exudes disciplined efficiency, technological precision, and executive calm. Inter or Plus Jakarta Sans provides clean humanist geometries with highly readable tabular numbers, essential for fast metric comparison. It strips decorative flair in favor of rapid legibility at 11px and 12px micro-scales.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is rendered flat-subtle rather than layered. Containers float on the #F8FAFC canvas with almost imperceptible ambient shadows (0 1px 2px 0 rgba(0, 0, 0, 0.03)) paired with crisp 1px borders (#F1F5F9). Modals and tooltips utilize mild elevation (0 4px 12px rgba(0, 0, 0, 0.06)).
IMAGERY
Photography is strictly reserved for circular team avatars (24px to 32px diameter) displaying real portrait crops. All other visual elements are vector-based: line icons (stroke 1.75px), smooth vector sparklines, and geometric progress tracks. Marketing clip art or illustrative 3D figures would violate this executive tone.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious coexistence of soft 16px pillowed white panels floating over a #F8FAFC canvas, punctuated by ultra-minimalist colored vector sparklines and 22px pastel status lozenges. The system collapses if heavy dark drop shadows or bright full-saturation button badges are introduced.
MUST
- Maintain uniform 16px card border radii across every dashboard widget.
- Use 20px internal padding on all white card modules to preserve airy readability.
- Rely on tabular lining numbers for all financial values and data tables.
- Keep chart stroke widths consistent at 2px to maintain visual lightness.
AVOID
- Never use dark high-contrast container drop shadows; depth must come from borders.
- Do not allow chart lines to exceed 2.5px thickness.
- Avoid solid, harsh black (#000000) for text; always employ deep slate (#0F172A).
- Do not mix rounded and square corners; enforce 16px on containers and 8px on buttons.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2080:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
