Design a dark-mode web interface screen: luminescent data cartography carved out of a midnight deep-sea console.
LAYOUT
Rigid multi-column dashboard anchored by a 220px persistent left navigation rail. The primary canvas begins with a top utility bar containing search and study actions, followed by a hero header and a four-card horizontal KPI grid. Below, the layout splits into a 2:1 ratio: complex analytical panels on the left (demographic donut and study data table) paired with vertical stream feeds on the right.
PALETTE (use these exact hex values)
- #060b13 — Canvas Background: Overall screen background behind panels and dashboard viewports.
- #0c1424 — Card Surface: Background fill for analytical cards, feed panels, and modal containers.
- #162238 — Surface Border: Faint structural borders separating cards, tables, and header partitions.
- #00b5d8 — Primary Cyan: Primary action buttons, active navigation indicator, and key data segment.
- #20c978 — Vibrant Teal: Success metrics, positive delta indicators, and secondary segment in donut charts.
- #d63384 — Radiant Magenta: Third demographic wedge, gender distribution bar, and alert badges.
- #d9822b — Warm Ochre: Secondary categorical segment within charts and warning badges.
- #5054ea — Cobalt Indigo: Fourth cohort demographic wedge and sparkline trend paths.
- #ffffff — Text Primary: Main headings, large KPIs, active state typography.
- #6b829e — Text Muted: Metadata, secondary descriptions, table headers, and dormant icons.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta 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 heading-lg, 36px display. Tracking -0.02em at headings, 0.01em at body, 0.08em at uppercase captions. The typographic tone is ultra-precise, scientific, and analytical. Using a geometric neo-grotesque like Inter provides absolute clarity at 11px data scales while maintaining authoritative weight in display metrics. Avoid expressive serifs or decorative scripts entirely.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is rendered flat-planar rather than layered via physical drop shadows. Dark surface separation relies solely on subtle background tone progression from #060b13 to #0c1424, reinforced by delicate 1px boundary strokes (#162238). Selected interactive components produce faint colored glows echoing their accent color rather than black shadows.
IMAGERY
Vector-only data visualizations, smooth sparklines, and delicate line iconography. Background features a faint generative particle wave graphic in midnight cyan/indigo at the upper right. Photographic imagery is strictly confined to small circular user avatars.
SIGNATURE DETAIL — the thing that makes this design itself
Luminescent neon sparklines and segmented chart arcs emerging directly from pitch-black recessed surfaces, balanced by structured 1px border cards. It represents a radar/sonar command console for social metrics. Misusing it means blowing out accents across text and background areas instead of confining them to data tracks.
MUST
- Use a subtle 1px border (#162238) on all dark cards to maintain containment without heavy shadows.
- Pair dense numerical figures (28px) with muted uppercase descriptive headers (11px).
- Restrain neon accent colors strictly to categorical data points, active toggles, and status markers.
- Maintain high contrast by keeping primary values pure white (#ffffff) against dark navy panels.
AVOID
- Do not introduce stark white or light grey card surfaces; all containers must remain within navy tones.
- Do not use high-opacity drop shadows; rely on 1px stroke borders and tonal depth.
- Do not mix multiple font families; stick strictly to a single neo-grotesque sans across all data.
- Do not use saturated primary cyan for static text; reserve it strictly for actionable or active items.
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 中尝试 
