Design a dark-mode web interface screen: precision dark glass analytics illuminated by focused neon telemetry vectors.
LAYOUT
The screen uses an asymmetrical fixed sidebar and flexible multi-column grid architecture. The left navigation rail (approx 240px) anchors the application vertically, leaving the main content area structured into three flexible vertical tracks. The top tier features a 4-card horizontal KPI band, followed by split analytical sections (2:1 ratio for revenue charts vs activity feed), cascading into modular project tables and client breakdown charts.
PALETTE (use these exact hex values)
- #050B14 — Abyssal Canvas: Deepest canvas background behind the main dashboard grid and viewport
- #040810 — Sidebar Surface: Fixed navigation bar backdrop providing subtle separation from the primary viewport
- #0A1124 — Card Surface: Primary metric and widget panels with muted dark blue tint
- #162035 — Hairline Border: Discrete 1px boundaries defining cards, tables, inputs, and dividers
- #1E40AF — Active Glow Blue: Active navigation indicator, primary chart splines, and button fills
- #10B981 — Positive Delta: Positive growth metrics, completed badge pills, and sparklines
- #06B6D4 — Telemetry Cyan: Client metric series and secondary ring chart distribution
- #8B5CF6 — Violet Trend: Project metric sparkline and secondary category highlight
- #F59E0B — Warning Amber: Pending status pills and moderate urgency tags
- #F8FAFC — Primary Text: Headings, primary quantitative figures, and active navigation labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Text,Geist), 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 at display, 0 at body. The typography is strictly rational, executive, and engineered, achieved through a clean neo-grotesque sans-serif (Inter). Generous negative space between numerals combined with compact body tracking reinforces high data legibility. For production, Inter or Plus Jakarta Sans should be licensed/imported with standard OpenType tabular numeral features enabled.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, tight density.
DEPTH
Depth is strictly non-skeuomorphic and relies entirely on surface tint steps and hairline borders. Cards float against the canvas (#050B14) via a slightly elevated deep navy base (#0A1124) enclosed in a 1px border (#162035). Drop shadows are replaced by localized, soft luminescent glows emitting directly from chart lines and active indicator states.
IMAGERY
This interface avoids raster photographic content entirely, with the sole exception of tiny 20px user avatar circles. Imagery is substituted with vector glyphs, glowing SVG telemetry curves, and geometric charts. Any photographic asset or complex textured background would disrupt the technical instrument aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated card sparkline: a dense KPI metric sitting directly atop a zero-margin, softly glowing vector spline that bleeds seamlessly to the bottom border of the card. To execute correctly, clamp the SVG line chart to the card's inner width and apply a 10% opacity vertical linear gradient down to transparent. Misusing this by adding standard card padding beneath the sparkline breaks the unified instrument console effect.
MUST
- Keep card surfaces at #0A1124 with thin 1px borders (#162035) for crisp structural delineation.
- Use semantic neon accents (#10B981, #06B6D4, #8B5CF6) strictly for data graphics and positive trends.
- Maintain strict tabular figure alignment on all currency, percentage, and date values.
- Reserve solid white (#F8FAFC) strictly for large metrics, active items, and primary titles.
AVOID
- Do not introduce pure white or light grey card surfaces; all elevation relies on deep navy tones.
- Never use heavy drop shadows; depth is created solely via 1px border strokes and soft chart glows.
- Avoid multi-colored text; keep hierarchy strictly within white, slate (#94A3B8), and dark slate (#475569).
- Do not exceed 12px gap between compact list items and inner table cells.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1840:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
