Design a dark-mode website section: deep space canvas ignited by glowing particle swirls, crisp technical type, and an unexpected high-contrast serif italic punchline.
LAYOUT
The layout uses an asymmetrical two-column hero arrangement bounded within a 1280px container. The left column (roughly 55% width) holds the text hierarchy: eyebrow badge, three-line display heading, description copy, feature checklist, CTA group, and SOC-2 trust note in tight top-to-bottom order. The right column holds the visual hero: a centered vertical card stack enveloped by an orbital particle vortex, with the next page section peeking in at the bottom with a 28px rounded tray.
PALETTE (use these exact hex values)
- #06080d — Deep Void Canvas: Root background canvas color providing maximum contrast for particle glow and typography.
- #0b0f17 — Pipeline Card Fill: Interior fill for inactive workflow step items and secondary panels.
- #316ff6 — Electric Brand Blue: Primary conversion button fill, active step selection borders, and focused state glow rings.
- #1e2638 — Border Slate: Hairline 1px borders delineating inactive steps, button outlines, and section boundary lines.
- #ffffff — Text Crisp White: Display headlines, primary button text, active step label titles, and brand logotype.
- #8e96a4 — Text Muted Slate: Subheadlines, secondary navigation links, step descriptions, and metadata microcopy.
- #38bdf8 — Nebula Cyan: Particle system dots and gradient highlights along the upper orbit edge.
- #d946ef — Nebula Magenta: Particle accent sparks, eyebrow spark glyph, and counter-orbit dust field glow.
TYPOGRAPHY
Typeface Geist Sans (or Inter,SF Pro Display,system-ui), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 36px heading, 60px display. Tracking -0.03em at display, +0.18em on overline caps. The typographic voice blends rigorous developer-tool precision with premium literary sophistication. Geist Sans provides the neutral, low-friction framework necessary for reading status logs, code context, and UI chrome, while the sudden intrusion of Instrument Serif Italic injects humanity and authorial confidence. For open-source parity, Google Fonts' Instrument Serif paired with Geist or Inter flawlessly maintains this contrast.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through luminous chromatic bloom rather than classical grey drop shadows. Surfaces stay close to the void canvas (#06080d to #0b0f17), while focused states like the active 'Execute' step card emit an atmospheric blue glow (box-shadow: 0 0 24px rgba(49, 111, 246, 0.25)) that cuts forward in 3D space.
IMAGERY
The imagery consists of a generative mathematical particle cloud resembling an astronomical accretion disc rendered in cyan (#38bdf8), violet, and magenta (#d946ef). Points vary in scale from 1px to 3px across sweeping orbital bezier splines. Photorealistic 3D assets, human photography, and flat vector cartoon illustrations are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the contrast collision in the hero headline: two lines of razor-sharp, tight-tracked neutral sans abruptly punctuated by a warm, humanistic italic serif phrase ('On your terms.'). Losing this move turns the page into a generic developer SaaS site. It fails when applied indiscriminately to mid-sentence words instead of acting strictly as the conclusive cadence of the statement.
MUST
- Reserve the italic serif strictly for the last sentence or concluding phrase of display titles.
- Maintain the pure void background (#06080d) to ensure particle dust glows read cleanly.
- Use 1px borders with low contrast (#1e2638) on all dark container surfaces.
- Style the active step card with a full #316ff6 stroke and matching ambient outer glow.
AVOID
- Do not set full body paragraphs or workflow titles in the serif typeface.
- Avoid using flat white borders; always use slate tones like #1e2638 to preserve depth.
- Never replace the organic particle nebula with standard blurred gradient circles.
- Do not use sharp 0px corners on workflow cards; keep a gentle 14px radius.
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 中尝试 
