Design a light-mode web interface screen: scientific marine intelligence rendered through bioluminescent accents, calm frosted surfaces, and deep oceanic cobalt gradients.
LAYOUT
The workspace employs a fixed-width left rail (240px) providing immediate global navigation and user profile status at the bottom. The central canvas is a dense multi-tier dashboard: top search and action bar, followed by the headline greeting, an expansive full-width hero feature banner, a four-column KPI sparkline row, a dual-column chart cluster (thermal map alongside telemetry breakdowns), and a bottom tier pairing a wide expedition status ledger with secondary quick actions and AI prompts.
PALETTE (use these exact hex values)
- #F6F8FC — Abyssal Ground: Global application canvas background beneath cards and navigation panels
- #FFFFFF — Pure Deck: Background for floating analytical cards, sidebar, and isolated interactive components
- #1E3A8A — Deep Pelagic Hero: Primary feature expedition banner background housing vector art and live diver metrics
- #2563EB — Cobalt Marine: Primary action button fill, active sidebar pill backgrounds, and key progress bars
- #0F172A — Trench Ink: Primary display headings, metric values, and high-emphasis data points
- #64748B — Mist Slate: Supporting labels, chart legends, timestamps, and inactive sidebar links
- #06B6D4 — Bioluminescent Cyan: Salinity metric tags, donut chart slice, and thermal gradient mid-tones
- #10B981 — Algae Mint: Positive delta indicators, 'In Progress' status pills, and system online dots
- #F97316 — Thermal Coral: Alert status warnings, oxygen categorical slices, and heat map thermal peaks
- #E2E8F0 — Glacial Border: Card borders, table row dividers, and input search field boundaries
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Outfit), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 32px display. Tracking -0.02em at display, 0 at body. Plus Jakarta Sans delivers a clinical, hyper-modern clarity reminiscent of advanced scientific instrumentation while retaining humanist warmth through generous counter spaces. Display sizes (-0.02em tracking, 700 weight) command focus with calm authority, while compact 11px-13px data labels maintain immaculate legibility in tight data grids. Inter or DM Sans serve as flawless drop-in open-source replacements.
GEOMETRY & SPACING
Corner radii — cards 16px, links 8px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is created almost entirely through tonal surface contrast and delicate 1px borders (#E2E8F0) rather than heavy drop shadows. High-elevation emphasis is reserved for floating tooltips and popovers, which use a diffuse 0 10px 25px -5px rgba(15, 23, 42, 0.08) drop shadow. The hero card utilizes internal depth layering through translucent frosted glass overlays directly atop deep ocean vector art.
IMAGERY
Illustrations use a refined, two-tone marine vector aesthetic featuring silhouettes of marine fauna (hammerhead sharks, manta rays, jellyfish) and scientific divers against atmospheric deep-blue gradients. Real-world imagery is restricted strictly to satellite oceanographic heatmaps and bathymetric thermal scans. Cluttered photographic stock photography or photorealistic diver portraits are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The Deep Pelagic Hero card: an immersive cobalt-to-abyss vector illustration container featuring floating, frosted-glass telemetry pills (temperature, salinity, wind) stacked along its right flank. This single component instantly transitions the interface from an ordinary business dashboard into a dedicated oceanographic marine station.
MUST
- Use exactly 16px border-radius on major analytic cards to maintain soft modern precision.
- Pair dense tabular numbers with Plus Jakarta Sans tabular lining figures for vertical alignment.
- Isolate dark backgrounds strictly to the hero expedition banner and specialized map containers.
- Keep card outlines faint at 1px solid #E2E8F0 without heavy DropShadow elevations.
AVOID
- Never apply saturated dark blue backgrounds to standard analytical or table cards.
- Avoid harsh black drop shadows; keep elevation felt through clean micro-borders (#E2E8F0).
- Do not use sharp 0px or 4px corners on UI cards; it violates the fluid marine geometry.
- Never set secondary table labels larger than 13px or heavier than font-weight 500.
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 中尝试 
