Design a dark-mode website section: luminescent pipeline nodes suspended over deep obsidian glass, translating voice into instant enterprise infrastructure.
LAYOUT
The header pairs an electric blue eyebrow with a 36px title on the left and a dense explanatory paragraph on the right. Below sits an asymmetrical 3-column bento grid: left column stacks Steps 1 and 2, center column houses the dominant Step 3 pipeline with embedded telemetry metrics, and right column stacks Steps 4 and 5. A full-width enterprise compliance strip spans the bottom to close the section.
PALETTE (use these exact hex values)
- #07090e — Obsidian Ground: Deepest canvas background behind all cards and atmospheric radial glows
- #0b0f19 — Card Surface: Background fill for all bento modular containers and structural blocks
- #1a2236 — Subtle Border: 1px structural outline defining card perimeters and internal stat dividers
- #4f46e5 — Electric Indigo: Step counter badge fills and active status highlights
- linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%) — ASR Royal Blue: Vertical capsule gradient for speech recognition stage
- linear-gradient(180deg, #9333ea 0%, #581c87 100%) — NLP Violet: Vertical capsule gradient for intent and sentiment processing stage
- linear-gradient(180deg, #0d9488 0%, #134e4a 100%) — Translation Teal: Vertical capsule gradient for language translation stage
- linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) — Insights Cobalt: Vertical capsule gradient for structured analytics stage
- #10b981 — Success Emerald: Status indicator pills, active checkmark icons, and HTTP 200 badge text
- #ffffff — Text Primary: Top-level display headlines, step titles, and metric values
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Segoe UI), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 36px display. Tracking -0.02em at display, 0.08em at eyebrow. Inter conveys a disciplined, engineering-first precision that reflects infrastructure reliability and low latency. The tight negative tracking at display scale (-0.025em) gives headlines authority, while tabular figures in monospace bring terminal-grade realism to the code preview.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is strictly non-skeuomorphic and achieved through subtle luminosity layering. Cards sit on an obsidian ground (#07090e) with 1px translucent borders (#1a2236), while localized radial backlights in cyan and violet create an underglow behind outer edges.
IMAGERY
Iconography is purely vector-based, line-drawn at 1.5px stroke weight, and enclosed within rounded badges or floating alongside text items. No photography or illustrative mascots are permitted; graphical emphasis is reserved for the pipeline stage capsules and terminal code windows.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal pipeline flow composed of four luminous colored glass capsules (blue, purple, teal, cobalt) connected by connector trace lines inside a dark bento card. Misusing it involves making every card in the grid equally colorful, which destroys the focal narrative of data moving through stages.
MUST
- Use 1px border (#1a2236) on all cards to maintain clear separation against the deep canvas.
- Restrict vibrant color saturation strictly to pipeline step capsules and active status indicators.
- Maintain high contrast white (#ffffff) for display titles, stepping down to #94a3b8 for descriptions.
- Keep code snippets inside dedicated inset containers (#070a12) with tabular monospace font.
AVOID
- Do not use solid bright fills for entire card backgrounds; keep them deep obsidian (#0b0f19).
- Do not omit the 1px border on cards, which results in muddy black-on-black blending.
- Never use pure black (#000000); preserve slight deep-blue tint (#07090e) for optical depth.
- Avoid warm accent colors like orange or red unless specifically communicating a destructive error state.
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 中尝试 
