Design a dark-mode website section: deep midnight cybernetics flowing into sharp clinical workflow micro-cards.
LAYOUT
The layout features a full-width header pinned top with brand left and actions right. The hero content sits left-aligned occupying a 60% column width over an ethereal particle backdrop, followed by uptime badges. Below sits an aligned four-column operational pipeline containing discrete micro-UIs, finalized by a centered floating pill banner.
PALETTE (use these exact hex values)
- #030712 — Canvas Deep Void: Primary background tone across the entire viewport
- #080E1A — Surface Tile: Background fill for telemetry workflow cards
- #1E293B — Card Border: Subtle 1px border stroke on workflow panels and secondary buttons
- #38BDF8 — Vibrant Cyan: Primary button fill, hero emphasis text, and particle bridge highlights
- #34D399 — Phosphor Emerald: Status indicators, positive growth metrics, and particle stream tail
- #F8FAFC — Text Primary: Hero heading, active navigation links, and primary card labels
- #94A3B8 — Text Muted: Paragraph description, secondary metrics, and sub-labels
- #475569 — Text Dim: Inactive step numbers, pipeline connector lines, and subtle hints
TYPOGRAPHY
Typeface Inter Display (or Geist Sans,SF Pro Display,Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 64px display. Tracking -0.03em on display, 0em on body. The typographic tone is authoritative, highly technical, and meticulously clean. Clean geometric sans-serif shapes evoke clinical reliability, while monospaced snippets establish high developer credibility. If Inter Display is unavailable, Geist Sans or SF Pro Display preserve the tight, clinical enterprise feel.
GEOMETRY & SPACING
Corner radii — cards 12px, links 9999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely via opacity and border contrast against the pitch-black void. Cards possess no cast drop-shadows; separation relies on 1px strokes (#1E293B) and deep #080E1A fills layered above the faint background particle field.
IMAGERY
A point-cloud particle stream flowing dynamically across a wireframe suspension bridge structure, transitioning seamlessly from electric cyan to emerald green. Photography and rendered 3D objects are completely absent, replaced by abstract generative data points and clinical-technical schematics.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone pointcloud particle stream tracing a civil infrastructure icon (Golden Gate Bridge) behind clean, dark SaaS pipeline cards. Recreate it with a sparse pixel-grid point cloud curving across the dark canvas, fading from cyan to emerald. Misusing it as a generic rainbow gradient or solid vector line destroys the precise data-infrastructure motif.
MUST
- Use solid electric cyan (#38BDF8) strictly for key interactive CTAs and terminal gradient emphasis.
- Render code and technical keys strictly in a monospaced font with subtle syntax coloring.
- Connect horizontal workflow steps using delicate 1px dotted lines and dim chevrons (#475569).
- Maintain high contrast by keeping cards near pitch black (#080E1A) rather than medium gray.
AVOID
- Do not introduce warm hues like orange, yellow, or red into the primary visual palette.
- Do not apply heavy drop shadows or colored outer glows beneath rectangular cards.
- Do not set body paragraphs in pure white; reserve #F8FAFC strictly for display headers.
- Do not make pipeline cards solid or fully opaque against the graphic particle backdrop.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
