Design a dark-mode website section: deep obsidian canvas illuminated by an electric cyan stream guiding structured enterprise workflow stages with surgical clarity.
LAYOUT
The layout follows a stacked three-tier structure within a 1240px container. Tier 1 balances an asymmetrical editorial headline on the left against a three-column metric cluster under the luminous plasma stream on the right. Tier 2 delivers a linear four-column workflow grid interconnected by intermediate directional nodes. Tier 3 concludes with a unified full-width horizontal banner integrating the brand glyph, positioning copy, and primary action button.
PALETTE (use these exact hex values)
- #030712 — Abyssal Canvas: Deepest background base creating infinite contrast behind luminous elements.
- #070d18 — Midnight Card Surface: Subtle elevated dark blue-black fill for step cards and the bottom banner.
- #132238 — Border Slate: Delicate 1px stroke framing cards and circular node dividers.
- #38bdf8 — Electric Plasma: Luminous ethereal streak at top right and selected iconography glow.
- #0062eb — Action Cobalt: High-visibility primary CTA fill and glowing brand glyph mark.
- #60a5fa — Signal Cyan: Uppercase tracker labels, step badges, and checkmark icons.
- #ffffff — Pure White: Primary headings, step titles, metric values, and button label.
- #94a3b8 — Muted Slate: Paragraph copy, feature checklists, and metric descriptions.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 44px display. Tracking -0.02em at display, 0.08em at uppercase captions. The typographical tone is crisp, authoritative, and deeply technical, driven by a modern grotesque sans-serif like Inter or Plus Jakarta Sans. Large titles benefit from negative tracking (-0.02em) to look compact and intentional, while uppercase utility labels use wide tracking (1.2px) to convey instrumentation-like precision. System font substitutes must avoid humanist flourishes in order to preserve the crisp enterprise-grade aesthetic.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through luminous atmosphere against absolute darkness, rather than drop shadows. Translucent dark card surfaces (#070d18) stand out from the base void (#030712) via delicate 1px border strokes (#132238) and the background glow of an electric cyan plasma stream. Interactive elements acquire presence from vivid cobalt fills paired with subtle internal radial luminescence.
IMAGERY
Visual imagery is anchored by a single organic, flowing 3D plasma streak rendered in cyan and cerulean tones that sweeps diagonally across the top right. Iconography is strictly vector-based, clean, and rendered with 1.5px stroke weight inside circular dark pods. Photorealistic human imagery or decorative product mockups are avoided in favor of architectural, schematic purity.
SIGNATURE DETAIL — the thing that makes this design itself
The singular defining gesture is the organic electric-cyan wave that threads behind the header and stats, instantly elevating an otherwise rigid 4-step card grid into a high-tier tech canvas. It conveys speed, intelligence, and continuous kinetic flow without obscuring legibility. Misusing it by multiplying the waves or making them animate distractingly across cards would ruin the architectural restraint.
MUST
- Keep card surfaces near-black (#070d18) with thin, low-contrast 1px border outlines (#132238).
- Use 44px bold display headings with tight tracking (-1.2px) for high editorial impact.
- Restrict bright electric cyan solely to light streams, badge accents, and glyphs.
- Ensure all workflow step cards share identical 24px internal padding and equal height.
AVOID
- Do not introduce multi-color gradients across card backgrounds; keep them uniform and dark.
- Avoid loud solid backgrounds on step indicator chips; use subtle borders or gentle tints.
- Do not drop the dark theme for lighter grey card fills; elevation relies on dark luminescence.
- Avoid heavy drop shadows; depth is conveyed strictly via glowing ambient light and borders.
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 中尝试 
