Design a light-mode web interface screen: crisp observatory telemetry anchored by a deep-sky midnight viewport.
LAYOUT
Structured fixed-width left navigation sidebar (240px) pinned to a fluid main content area. The main canvas begins with an utility top-bar and welcome header, immediately followed by the wide panoramic hero card. Beneath, a four-unit metric card row leads into an asymmetric two-column split: a 60% left column for trend charts and tables, and a 40% right column for scheduled events and donut breakdowns.
PALETTE (use these exact hex values)
- #F4F7FB — Canvas Ice: Outer application canvas backdrop behind cards and main viewport
- #FFFFFF — Panel Pure: Card containers, sidebar background, and elevated interactive panels
- #0C1A40 — Deep Space Navy: Illustrated hero announcement card backdrop and celestial illustrations
- #2563EB — Cobalt Stellar: Primary action buttons, active navigation indicator, and primary line graph fill
- #0F172A — Obsidian Slate: Primary metric numerals, table headers, and modal section titles
- #64748B — Muted Steel: Secondary descriptors, unselected navigation labels, and table metadata
- #7C3AED — Nebula Violet: Targets tracked metric badge and donut slice for nebulae classification
- #10B981 — Aura Emerald: Optimal visibility pills, clear nights counter, and upward trend text
- #F59E0B — Solar Amber: Success rating stars, celestial alignment chips, and planet category marker
- #E2E8F0 — Border Subtle: 1px container outline on white cards, weather box, and input search field
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Manrope), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 28px display. Tracking -0.02em at display, 0 at body. Modern, clinical, and reassuringly technical. The typeface feels geometric yet friendly, prioritizing high legibility for alphanumeric catalog codes (NGC, M-series) and tabular data. Clean substitutions like Inter or Plus Jakarta Sans maintain the crisp precision required of an astronomical journal.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 10px, buttons 8px. Spacing on a 8px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is flattened and minimal. Surfaces rely on hairline 1px border strokes (#E2E8F0) against the tinted canvas (#F4F7FB) rather than dramatic drop shadows. The only heavy optical elevation comes from chromatic contrast: the dark navy hero card naturally projects backward into cosmic depth.
IMAGERY
Photography is restricted to miniature square astrophotography previews within the target tables (deep sky objects, planetary discs). The hero card employs flat-vector stylized celestial art: simplified planetary bodies with ring systems, constellation lines, and minimal human silhouettes in night shades.
SIGNATURE DETAIL — the thing that makes this design itself
The deep-indigo midnight hero viewport banner floating inside an ultra-clean, clinical light dashboard canvas, instantly telling the user this software operates under the night sky.
MUST
- Retain crisp 16px corner radii on all card panels for soft modern geometry.
- Pair colored category icons with their exact matching pastel ring backgrounds.
- Keep dashboard body copy slate-toned (#64748B) to preserve maximum metric contrast.
- Use solid 1px border (#E2E8F0) around cards instead of deep blurred box-shadows.
AVOID
- Do not turn the overall dashboard canvas dark; the layout depends on light contrast.
- Never use sharp 0px corners or pill capsules for metric and data cards.
- Avoid saturated primary colors on background surfaces outside the hero card.
- Do not omit catalog identifiers (e.g. M31, M42) beneath named celestial targets.
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 中尝试 
