Design a light-mode web interface screen: industrial quality governance rendered in deep midnight navy, clinical porcelain surfaces, and crisp telemetry badges.
LAYOUT
The workspace utilizes a fixed-width left navigation rail (approx. 240px) alongside an adaptive multi-tiered dashboard grid. The main region begins with a global search header, directly followed by an executive title row with primary CTA. Analytical telemetry descends from a 4-card metric row to a 60/40 split chart section, concluding with a full-width dense tabular ledger.
PALETTE (use these exact hex values)
- #0b1a36 — Midnight Sidebar: Structural background for the permanent left-hand navigation column.
- #f5f7fa — Canvas Porcelain: Base workspace surface behind all dashboard cards, tables, and top headers.
- #ffffff — Surface Pure White: Background fill for telemetry cards, data grids, and floating popovers.
- #1e60f5 — Cobalt Action: Primary action triggers, active navigation highlights, and key line-chart data paths.
- #111827 — Ink Primary: Headings, dense stat values, and prominent table cell typography.
- #64748b — Slate Muted: Secondary labels, column titles, sparkline baseline text, and metadata.
- #e8ecf4 — Border Subtle: Hairline structural boundaries dividing cards, table rows, and input fields.
- #10b981 — Emerald Pass: Passed status badges, positive variance trends, and donut chart success segment.
- #ef4444 — Crimson Fail: Failed status badges, incident spikes, and warning sparklines.
- #f59e0b — Amber Pending: Pending operational statuses and secondary monitoring segments.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), 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.01em at display, 0 at body. Clean, analytical, and uncompromisingly authoritative. The typography behaves like an enterprise instrument panel: neutral sans-serif forms (Plus Jakarta Sans or Inter) ensure zero distortion of numerical data. Heavy weights are reserved exclusively for major totals and active states.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is achieved through crisp 1px borders (#e8ecf4) and minimal surface contrast rather than diffused blur shadows. Cards lift off the #f5f7fa porcelain canvas via pure white (#ffffff) fills. The left sidebar creates physical separation through absolute color contrast (navy vs. near-white) rather than drop-shadow layering.
IMAGERY
The design entirely eschews photographic imagery in favor of clean mathematical SVG telemetry, vector data charts, and geometric status pictograms. Avatars are restricted to circular flat initials (#a0b4d6 on navy). Decorative raster imagery is prohibited; only precise iconographic line work is permissible.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-plane architecture: an ultra-dark navy navigation rail framing a clinical white-and-porcelain analytical field populated by four sparkline-backed KPI tiles and muted semantic status pills. Misuse occurs when designers either brighten the sidebar or apply playful, non-standard rounding to the analytical panels.
MUST
- Keep the left navigation sidebar persistently anchored in deep navy #0b1a36.
- Reserve vibrant cobalt #1e60f5 strictly for active navigation, primary buttons, and focal lines.
- Use soft status badge fills (emerald, crimson, amber) at <= 15% opacity with dark text.
- Maintain uniform 14px border radius across all elevated content panels.
AVOID
- Never tint the central workspace canvas dark; it must remain pale porcelain #f5f7fa.
- Do not apply heavy multi-layered drop shadows; rely on crisp 1px borders (#e8ecf4).
- Never use status colors (emerald, amber, red) for non-semantic decorative accents.
- Avoid pill-shaped roundings (999px) on major action buttons; use exact 8px radius.
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 中尝试 
