Design a light-mode web interface screen: clinical energy grid telemetry balanced by gentle pastel status indicators and rounded enterprise scaffolding.
LAYOUT
The workspace employs a classic SaaS two-column architecture with a 240px fixed left sidebar and a fluid right-side content pane. The top bar houses global search and system utilities aligned horizontally. The dashboard body flows vertically from page heading into a hero onboarding banner, followed by a 4-column metric card deck, and terminates in an expandable tabular data container.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ground: Global application backdrop behind cards and main workspace viewports
- #FFFFFF — Card Surface: Foreground containment for dashboard panels, tables, metrics, and sidebar
- #E2E8F0 — Border Subtle: Outlines for cards, search bars, dividers, and secondary button borders
- #1D4ED8 — Electric Cobalt: Primary action triggers, logo mark fill, and selected menu highlight state
- #EFF6FF — Soft Indigo Tint: Selected sidebar item background and promotional card accent base
- #0F172A — Text Heading: Primary dashboard headings, card titles, and key operational numeric metrics
- #64748B — Text Muted: Secondary instructions, table column headers, and empty-state descriptions
- #F97316 — Alert Amber: Attention-needed badges, counter pills, and warning indicator halos
- #10B981 — Live Mint: Online status node indicator and active connection telemetry signals
- #8B5CF6 — Health Violet: Battery health status circle iconography and analytics categorization
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 30px display. Tracking -0.01em at headers, 0 at body. Plus Jakarta Sans conveys sharp, European modernist precision with slightly open counters that ensure readability in dense industrial tables. The voice is measured, trustworthy, and technical without turning rigid or cold. Inter is a direct drop-in replacement that preserves this balanced operational feel.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is rendered flat with zero prominent blur shadows. Surfaces are separated almost entirely through optical contrast: pure white card shapes sit upon a #F8FAFC ground with 1px hairline #E2E8F0 borders. Floating modals or popovers, if present, use an ultra-diffused 0 4px 12px rgba(15, 23, 42, 0.05) edge.
IMAGERY
Empty states and feature promotions utilize flat, vector character illustrations with smooth pastel palettes (indigo, cornflower blue, and soft marigold). The illustration style is corporate-editorial, depicting stylized figures interacting with oversized technical artifacts (batteries, plugs). Heavy photography, photorealism, or aggressive 3D renders would drastically clash with the precise layout.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the horizontal 4-column KPI strip featuring pastel circular icon nodes positioned above large, confident 30px numerals. Each card cleanly unifies status category, magnitude, and historical delta in a remarkably compact, distraction-free unit. It is commonly misused by cluttering the bottom area with miniature sparkline charts before any data is actually recorded.
MUST
- Keep card backgrounds pure #FFFFFF against the cool #F8FAFC canvas to maintain structural clarity.
- Use 14px border radius uniformly across all primary metric cards, banners, and table wrappers.
- Reserve Cobalt Blue (#1D4ED8) strictly for active interactive states and primary conversion buttons.
- Pair metric icons with light-tinted circular backdrops matching their semantic status colors.
AVOID
- Do not use dark gray or black backgrounds; the interface depends on crisp light mode neutrality.
- Never apply harsh drop shadows; rely on 1px #E2E8F0 borders for visual containment.
- Avoid multi-colored text; keep all descriptive copy constrained to #64748B slate.
- Do not shrink primary buttons below 36px in height or use pill shapes for main CTAs.
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 中尝试 
