Design a dark-mode web interface screen: deep maritime intelligence engineered through luminescent cyan wireframes and precision industrial dark telemetry.
LAYOUT
The workspace utilizes a fixed-width left rail sidebar (220px) housing vertical navigation, user profile, and theme switches. The primary content follows a dense multi-column dashboard grid. A full-width hero blueprint banner leads the viewport, followed directly by a 4-column KPI strip, feeding into a two-column balance: project tables and activity logs on the left (60%), and circular gauges, timelines, and alert cards on the right (40%).
PALETTE (use these exact hex values)
- #060B11 — Deep Ocean Canvas: Global application viewport background behind sidebars and primary grid
- #0B131E — Surface Navy Panel: Container background for dashboard cards, lists, tables, and nav drawer
- #162536 — Subtle Border Line: Structural card outlines, inner table rows, and horizontal rule dividers
- #00A3FF — Electric Cyan: Hero schematics, primary buttons, active links, and prominent data badges
- #14B8A6 — Teal Glow: Secondary progress indicators, multi-stage donut slices, and active status pips
- #10B981 — Success Mint: Completed pipeline steps, positive delta percentages, and operational tags
- #F59E0B — Warning Amber: Material shortage risks, medium-severity notifications, and cautionary badges
- #EF4444 — Critical Rose: High-priority alerts, negative variances, and urgent timeline disruptions
- #FFFFFF — Pure White Text: Top-level KPI values, active project headings, and card title labels
- #8497B0 — Muted Slate Text: Metadata labels, inactive navigation links, table column headers, and timestamps
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 24px heading-lg, 32px display. Tracking -0.02em at display, 0.01em at caption. The typography is utilitarian, technical, and hyper-legible. Inter or a comparable geometric neo-grotesque delivers crisp horizontal optical alignment across tabular data and multi-tiered statuses. It reflects aerospace precision and maritime command protocols without ornamental stylization.
GEOMETRY & SPACING
Corner radii — cards 12px, links 6px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, tight density.
DEPTH
Depth is created entirely through color luminance layering rather than blurred shadows. Surface level 0 is an ultra-deep charcoal navy (#060B11), rising to level 1 card panels (#0B131E) outlined in a crisp 1px border (#162536). Level 2 elements like input boxes and status tags drop into darker insets or float as slightly lighter badges (#0F1A28).
IMAGERY
Imagery strictly favors illuminated 3D wireframes, holographic CAD schematics, and clean technical blueprints in monochromatic electric cyan. Realistic photography is minimized to small micro-thumbnails of vessels. Photographic textures, warm lifestyle imagery, or glossy gradients are entirely out of place.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature move is the glowing cyan CAD wireframe schematic integrated directly into the hero card, paired with an inline vessel lifecycle milestone pipeline. This instantly transforms a corporate dashboard into an operational naval command center.
MUST
- Use luminous cyan (#00A3FF) exclusively for active schematics, focus states, and primary action affordances.
- Maintain high contrast tabular numbers using clean sans-serif figures for rapid operational scanning.
- Pad every card module consistently with 16px or 20px of internal breathing room.
- Encase data cards in subtle 1px border strokes (#162536) instead of heavy dropped shadows.
AVOID
- Do not introduce warm canvas colors like creams, beiges, or light grays into the background hierarchy.
- Avoid thick, high-opacity box shadows that compete with technical blueprint precision.
- Do not render industrial schematics with saturated photo-realistic imagery; stick to glowing wireframes.
- Never use pure black (#000000) for cards; rely on layered deep navy tones (#0B131E).
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 中尝试 
