Design a dark-mode website section: deep navy twilight pierced by cyan particle auroras and crisp clinical white surfaces.
LAYOUT
Two-zone structure beginning with a floating rounded hero container (approx 1360px max width) housing a split 50/50 layout: left column dedicated to bold copy, CTA buttons, and trust badges; right column cradling an elevated white product mockup against an ambient particle aura. Below the container sits a five-column grid footer, organized as brand metadata on the far left, four structured navigation columns in the center, and a newsletter input on the far right, terminating in a single-line copyright bar.
PALETTE (use these exact hex values)
- #030B1A — Deep Midnight Canvas: Root background color for the page and lower footer boundary
- linear-gradient(135deg, #071530 0%, #0c2048 50%, #161e4a 100%) — Hero Card Gradient: Background fill for the primary rounded callout container
- #3B82F6 — Electric Royal Blue: Primary CTA button background and prominent brand accent highlights
- #00D2FF — Cyan Aurora Accent: Badge icons, highlight gradients, particle dust, and secondary text emphasis
- #D946EF — Magenta Flare Accent: Ambient glow backdrop blending cyan into purple along the horizon
- #FFFFFF — Clean White Surface: High-contrast clinical dashboard card background in the preview mockup
- #F8FAFC — Card Muted Fill: Internal stat card tiles inside the dashboard mockup
- #FFFFFF — Primary Light Text: Hero headers, primary CTA text, and high-visibility labels
- #94A3B8 — Muted Slate Text: Hero body copy, footer navigation links, and copyright text
- #1E293B — Border Subtle: Subtle hairline boundaries for pills, newsletter inputs, and dark cards
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 40px display. Tracking -0.02em at display, 0.01em at body. Authoritative, clinical, and high-tech. The geometric sans-serif communicates enterprise readiness, regulatory rigor, and medical-grade precision without appearing dry or bureaucratic. Inter or Plus Jakarta Sans are optimal matches.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth relies on stark luminance contrast rather than heavy dropshadows. The base canvas (#030B1A) recedes entirely, while the hero container sits slightly forward. The preview mockup card utilizes a floating effect with a soft 30px diffused shadow (rgba(0, 0, 0, 0.35)) that pops forcefully off the glowing cyan aurora behind it.
IMAGERY
Abstract data wave composed of glowing cyan and magenta volumetric particle points sweeping diagonally across the canvas. Avoid photographic human imagery; all representation is grounded in high-precision algorithmic graphs, clean UI tables, and glowing constellation-like particle fields.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-dark navy container with a luminous cyan-purple particle mesh directly backlighting a pristine, clinical white dashboard card.
MUST
- Wrap high-density clinical mockups in pure white (#FFFFFF) to starkly contrast against dark navy canvases.
- Use flowing cyan-to-magenta particle waves strictly as mid-ground atmospheric depth behind interfaces.
- Style trust markers and verification checkmarks with vibrant cyan (#00D2FF).
- Keep footer column headers in pure white and links in muted slate (#94A3B8).
AVOID
- Do not use dark-themed mockups inside the preview container; the contrast switch is fundamental.
- Do not apply heavy particle waves directly over readable text blocks.
- Never use sharp, 0px border radii on buttons or primary containers.
- Avoid high-contrast saturated reds or yellows; stick to calm cyan, emerald, and electric blue for status indicators.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
