Design a light-mode web interface screen: deep navy anchor framing high-clarity data canvases illuminated with targeted chromatic sparks.
LAYOUT
Structured around a persistent left rail (approx 240px wide) and a primary responsive dashboard grid. The main content flows from an overarching title and utility bar into a 4-column KPI metric tier. Below sit a 2:1 split section for temporal trends and donut breakdowns, followed by a 3-column split for tables, geography, and real-time streams, concluding with a full-width tabular reports log.
PALETTE (use these exact hex values)
- #0A0F1E — Midnight Rail: structural backdrop for the persistent vertical sidebar navigation
- #F8FAFC — Canvas Background: dominant light background supporting all primary dashboard cards and headers
- #FFFFFF — Surface Card: container background for analytical modules, tables, and metric summaries
- #3B82F6 — Electric Cobalt: primary interactive fill for key CTAs, active navigation pill, and lead line plots
- #0F172A — Slate Text Primary: high-contrast body text, metric numerals, and major card titles
- #64748B — Muted Slate: secondary metadata, table headers, inactive navigation links, and axis lines
- #06B6D4 — Cyan Spark: visual category identifier for session indicators and secondary trendlines
- #F43F5E — Coral Glow: categorical marker for conversion events and negative delta anomalies
- #10B981 — Emerald Trend: positive percentage delta indicators and real-time status pulses
- #E2E8F0 — Subtle Border: card perimeter divider rules and interior table row delimiters
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 18px heading, 24px display. Tracking -0.02em at large numbers, 0 at captions. The type system communicates objective competence and executive clarity. Inter or an equivalent modern neo-grotesque ensures numbers remain tabular and balanced alongside compact, utilitarian UI labels. Text weights are distributed carefully: bold 600-700 weights are reserved for core quantities, while medium 500 anchors navigation links.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is created almost entirely without blurred drop shadows. The design relies on flat planar layering: dark navy creates the background floor for navigation, while cards sit on an off-white plane (#F8FAFC) enclosed by crisp 1px borders (#E2E8F0). In rare interactive states, an imperceptible 0 1px 3px rgba(0,0,0,0.05) shadow is permitted.
IMAGERY
Visual media is strictly abstract, mathematical, and data-centric. Vector maps use soft periwinkle fills, chart segments feature solid saturated fills, and tiny 16px geometric line icons represent data categories. No photographic imagery, textured backgrounds, or skeuomorphic elements are permitted.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone structural architecture: an uncompromising midnight-navy operational rail seamlessly tethered to an expansive, airy porcelain workspace punctuated by multi-hued micro-sparklines. Misusing this pattern by turning the entire canvas dark or cluttering cards with decorative background gradients destroys its corporate balance.
MUST
- Anchor metric cards with soft, categorical-tinted sparklines directly matching the corresponding icon badge tint.
- Maintain high contrast between the midnight navy sidebar (#0A0F1E) and the bright alabaster workspace (#F8FAFC).
- Use 16px border-radius consistently across all analytical dashboard cards.
- Restrict vibrant primary cobalt (#3B82F6) strictly to active selection states, call-to-action buttons, and dominant chart paths.
AVOID
- Do not introduce heavy drop shadows; depth must rely on precise border lines and subtle tonal contrast.
- Avoid using multiple high-saturation colors inside a single metric card tile.
- Do not mix rounded pill buttons with sharp, square-cornered action elements.
- Never render table cell dividers in dark tones; maintain subtle #E2E8F0 hairpins.
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 中尝试 
