Design a dark-mode web interface screen: deep void studio management lit by neon telemetry, ambient glow lines, and laser-crisp dark-mode precision.
LAYOUT
Structured around a persistent 240px dark sidebar on the left and a scrollable multi-tier workspace on the right. The workspace opens with a welcoming greeting and date filter, cascading into a 4-column KPI overview. Below sits a 2-column analytics split (area chart and donut chart), followed by full-width activity and split schedule/task modules.
PALETTE (use these exact hex values)
- #070c14 — Canvas Void: Deepest foundation background layer behind all panels and navigation
- #0d1522 — Panel Surface: Primary surface for dashboard cards, tables, and secondary containers
- #162436 — Panel Border: Subtle 1px boundary stroke separating cards, rows, and input surfaces
- #00d2d3 — Cyan Luminescence: Primary brand accent for active states, key sparklines, and iconography
- #f43f5e — Vibrant Magenta: Accent indicator for leads sparkline, donut charts, and sent statuses
- #8b5cf6 — Spectral Violet: Secondary categorical accent used in distribution charts and segment tags
- #10b981 — Positive Mint: Percentage gains, positive delta pills, and paid status badges
- #ffffff — Text Pure: High-emphasis titles, numerical values, and active menu labels
- #62758d — Text Muted: Field labels, inactive icons, timestamps, and contextual micro-copy
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 20px heading, 28px display. Tracking -0.02em at display, 0 at body. The typographic tone is ultra-precise, modern, and clinical yet luxurious. Plus Jakarta Sans (or Inter) provides clean geometric numerals that read effortlessly against dark surfaces, with tracking tightened slightly on headings to project authority without visual noise.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is created entirely through surface brightness stratification and delicate borders rather than traditional drop shadows. Panels in #0d1522 sit directly on the #070c14 void, separated by a crisp 1px stroke (#162436). Luminous chart elements cast subtle ambient radial glows directly on the dark canvas beneath them.
IMAGERY
Photography is strictly confined to small circular user avatars (e.g., 32px profile photo with 999px radius in the header) and optional media asset thumbnails. All other graphic language relies on delicate geometric line icons and luminous vector graphs; decorative lifestyle photography or photorealistic banners would violate the dashboard's utilitarian aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing neon sparkline telemetry running across ink-dark panels—specifically the contrast between the muted #0d1522 surface and the high-energy #00d2d3 cyan/hot pink vector lines that terminate in illuminated glowing data points.
MUST
- Use 1px borders in #162436 instead of heavy drop shadows for card separation.
- Restrict vibrant neon hex codes strictly to charts, active icons, and status badges.
- Maintain high typographic contrast with pure #ffffff for numerical values and primary titles.
- Round main card surfaces to exactly 16px to preserve the unified interface geometry.
AVOID
- Never introduce stark white backgrounds or light theme panels into this canvas.
- Do not use high-saturation backgrounds on cards; keep fills strictly near #0d1522.
- Avoid fuzzy, high-spread shadows that muddy the crisp boundaries between dark surfaces.
- Never display unrounded or jagged corners on data cards and container surfaces.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1456:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
