Design a dark-mode website section: precision-tooled industrial procurement illuminated by bioluminescent cyan and emerald particle clouds across deep obsidian space.
LAYOUT
The hero operates as an asymmetric split layout within a 1280px container over a dark canvas. The left column (spanning ~45% width) stacks a pill-shaped trust indicator, a massive two-line display headline, explanatory paragraph text, dual CTAs, and a floating turnaround metric card. The right column is organized into a modular bento cluster: a dominant square showcase card anchoring the turbine visual, flanked by two vertically stacked feature tiles on the right and anchored by a horizontal launch alert banner below.
PALETTE (use these exact hex values)
- #05080c — Obsidian Deep: Root background canvas providing maximum contrast for particle atmosphere
- #38bdf8 — Industrial Cyan: Primary action background, active icons, and focal atmospheric particle energy
- #34d399 — Signal Mint: Verification badge states, live sparkline indicators, and pulse dots
- #ffffff — Pristine Snow: Display headlines, prominent numerals, and primary navigation links
- #94a3b8 — Muted Slate: Body copy, supporting metadata, inactive links, and metric labels
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,Geist Sans,SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 24px heading, 56px display. Tracking -0.03em at display, 0.01em at caption. The typography conveys engineering precision, corporate sophistication, and high-velocity digital capability. A clean, geometric grotesque typeface (Inter or Geist) delivers objective clarity with zero ornamental distraction. Tight tracking on headlines gives an engineered, compact authority, while smaller labels remain legible thanks to disciplined hierarchy and ample whitespace.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is constructed almost entirely through ambient luminosity, glowing particle backdrops, and translucent card fills rather than box shadows. Glassmorphism is restrained: panels sit at low opacity (10-18%) with backdrop-filter blur (12px to 24px) allowing the cyan and emerald nebulas behind them to bleed through. Subtle 1px borders with low-opacity white (rgba(255,255,255,0.08)) create razor-sharp edges that separate panels from the background.
IMAGERY
Imagery features high-precision 3D computer-generated industrial machinery—specifically dark blasted-metal or titanium components like turbine rotors and machined housings. The machinery is embedded within organic, bioluminescent cyan and green particle fields simulating digital flow, CAD telemetry, and intelligent scanning. Lifestyle imagery, stock office photography, or flat cartoon illustrations are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the juxtaposition of cold, hyper-detailed mechanical 3D hardware engulfed in an ethereal cyan particle vortex, framed by ultra-sharp translucent glassmorphic wire-boxes. It creates the sensation of peering into an advanced industrial diagnostic scanner. It is misused when panels become fully opaque or when particle effects lack volumetric blending and look like flat dotted wallpaper.
MUST
- Ground the canvas in near-black (#05080c) and let soft cyan and emerald radial atmospheric blurs generate visual depth.
- Use solid cyan (#38bdf8) strictly for the highest priority transactional action buttons.
- Use hairline 1px borders in rgba(255, 255, 255, 0.08) to delineate glassmorphic panels against the dark background.
- Ensure all stat cards combine a large primary metric (24px) with tiny, highly-readable supporting copy (11px).
AVOID
- Do not introduce opaque light backgrounds, white cards, or stark drop-shadows that destroy the cosmic dark mood.
- Do not use multiple competing vibrant colors; limit accents exclusively to cyan and emerald green.
- Never make secondary buttons fully opaque; they must remain ghosted or translucent glass outlines.
- Do not use flat vector clip-art; all physical representations must look like high-end machined metal or CAD renders.
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 中尝试 
