Design a light-mode web interface screen: deep navy telemetry meets tailored porcelain SaaS workspace with razor-thin line charts and electric sapphire accents.
LAYOUT
The screen uses a two-column macro layout: a persistent 240px dark left rail for application routing and an expansive fluid right canvas. The canvas organizes top-down: utility bar with search and primary action, user greeting, dark executive hero banner, a four-column KPI metric row, followed by a responsive two-column grid balancing project rosters, activity feeds, task lists, and calendar schedules.
PALETTE (use these exact hex values)
- #070E1A — Sidebar Void: Deep midnight blue background dedicated strictly to the persistent left navigation rail
- #F7F9FC — Canvas Porcelain: Subtle cool off-white for the main dashboard content area background
- #FFFFFF — Card Surface: Pure white background for individual analytical cards, tables, and widget containers
- #1D68F2 — Electric Cobalt: Primary action buttons, active navigation indicator tabs, and primary metric progress highlights
- #0C1322 — Hero Dark Glass: Deep charcoal-navy container fill for the welcome banner and targets dashboard widget
- #0F172A — Slate Text Primary: Highest emphasis text including primary numbers, card titles, and user greeting
- #64748B — Muted Slate: Secondary labels, timestamps, metadata counts, and inactive tab typography
- #E2E8F0 — Subtle Border: Hairline 1px borders framing cards, input elements, calendar grids, and divider lines
- #10B981 — Success Mint: Positive delta trends, completed status indicators, and secondary metric progress bars
- #EF4444 — Alert Rose: Revenue metrics, high priority badges, and critical trend line alerts
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,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, 28px display. Tracking -0.02em on headings, 0 on body. The typographic tone is architectural, rational, and modern executive. Using a crisp neo-grotesque like Inter with neutral letterforms and tight negative tracking in display weights ensures high scannability across dense numbers. For production, Inter or Plus Jakarta Sans are direct drop-in matches.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is rendered primarily through surface color shifts rather than heavy drop shadows. White cards (#FFFFFF) sit flat over the cool gray canvas (#F7F9FC) separated by a crisp 1px border (#E2E8F0). Subtle translucent dark layers (#141E33) are nested within the dark hero card to create recessed target telemetry.
IMAGERY
Visual media is strictly restricted to compact project thumbnails (36x36px with 8px radius) and round circular team portrait avatars (24-32px). Graphic decoration is limited to mathematical, ethereal vector line art inside dark hero cards. Stock photography or illustrative cartoons are entirely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the 'Executive Telemetry Hero'—a dark obsidian card (#0C1322) embedded directly at the top of an otherwise pristine light-mode canvas, integrating fine parametric wave art and nested glass progress meters. It centers visual gravity immediately. It is commonly misused by turning the entire canvas dark or cluttering the banner with generic marketing illustrations.
MUST
- Maintain the strict two-tone architectural split between deep navy sidebar (#070E1A) and cool off-white canvas (#F7F9FC).
- Enforce a uniform 16px border radius on all primary card containers.
- Use 1px borders (#E2E8F0) rather than heavy drop shadows to isolate white cards from the canvas.
- Ensure metric sparklines utilize crisp 2px line strokes without gradient fills underneath.
AVOID
- Do not introduce pure black (#000000) for backgrounds; use midnight navy (#070E1A).
- Do not apply blurred or colored drop shadows; elevation must remain minimal and flat.
- Avoid multi-colored primary CTAs; keep the main operational buttons cobalt blue (#1D68F2).
- Do not mix rounded corner values randomly; keep cards at 16px and interactive chips at 6-8px.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1584:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
