Design a dark-mode web interface screen: precision research telemetry engineered in deep midnight obsidian with luminous cyan graphs and calibrated semantic accents.
LAYOUT
Structured around a persistent 240px fixed left sidebar and an expansive data dashboard canvas. The primary canvas begins with an unobtrusive top navigation bar, leads into a prominent welcome header with primary CTA triggers, proceeds through a 4-column metric card grid, branches into two data visualization widgets, and anchors into a comprehensive filtered data table.
PALETTE (use these exact hex values)
- #060913 — Canvas Obsidian: Root page background canvas providing maximum contrast for illuminated card panels.
- #0d1527 — Surface Midnight: Standard container background for metrics, charts, table containers, and sidebar modules.
- #1a2744 — Border Slate: Hairline 1px dividers, card boundaries, input strokes, and table row separations.
- #5162ff — Primary Indigo: Key action buttons, active navigation markers, and selected pagination indicators.
- #22d3ee — Neon Cyan: Line chart telemetry, sparklines, and Machine Learning taxonomy indicators.
- #f59e0b — Amber Ochre: Citation icons, Computer Vision tags, and secondary doughnut chart sectors.
- #f8fafc — Text Primary: High-emphasis headings, key metric numbers, and primary document titles.
- #64748b — Text Muted: Subtext, table metadata, axis labels, search placeholders, and inactive icons.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 28px display. Tracking -0.02em for headings, 0 for body. The typographical voice is technical, scholarly, and frictionless. Inter's neutral geometry avoids distracting aesthetic flourishes, ensuring multi-author academic titles, dense metric arrays, and metadata strings remain exceptionally legible in dark mode environments.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 32px between sections, 1440px container, comfortable density.
DEPTH
Depth is communicated through surface tone stratification rather than ambient shadows. Layer 0 (#060913) sits furthest back, supporting Layer 1 (#0d1527) panels bounded by precise 1px strokes (#1a2744). Overlays and tooltips advance to Layer 2 (#14203b) with minimal, soft 8px dark glows.
IMAGERY
No photographic imagery is present aside from the circular 32px user avatar in the sidebar footer. Graphic elements consist solely of refined SVG iconography, minimalist chart vector paths, and micro format badges (e.g., PDF badge).
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dark cyan-glowing spline telemetry paired with high-contrast numerical metrics encased in hairline-bordered navy cards. Misusing it involves flooding the cards with overly bright glow fills or using conflicting saturated neon colors across adjacent graphs.
MUST
- Use 1px borders in #1a2744 to define depth rather than high-contrast drop shadows.
- Maintain strict #060913 canvas with #0d1527 elevated cards for consistent layered hierarchy.
- Color-code research taxonomy chips using semantically distinct hues (cyan, amber, green, periwinkle).
- Pair large display metric counts (28px) with subtle sparkline graphs to anchor dashboard tiles.
AVOID
- Never introduce stark white card backgrounds or light mode panels into the workspace.
- Do not use heavy, blurred drop shadows; depth is strictly achieved via layered surface colors.
- Avoid multi-colored text headlines; preserve white (#f8fafc) for headings and primary labels.
- Never omit arXiv or publication IDs from paper listing rows.
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 中尝试 
