Design a dark-mode website section: cosmic developer console anchored by sweeping particle ribbons, deep space navy, and sunset gradient accents.
LAYOUT
The layout is strictly stacked and centered in the upper CTA, then branches into a multi-column responsive grid below. A hero conversion cluster sits directly along the central axis above an expansive 6-column footer grid (brand bio, 4 link stacks, and 1 newsletter form), concluding with a balanced horizontal sub-footer.
PALETTE (use these exact hex values)
- #060911 — Deep Cosmic Base: Deepest canvas background behind the glowing particle ribbon and CTA section
- #080c16 — Footer Slate Base: Dark grounding surface color for the multi-column footer and bottom legal bar
- linear-gradient(135deg, #7c76f8 0%, #ea7a99 100%) — Aurora Violet Pink: Hero headline accent text and primary call-to-action button fill
- #3d5afe — Particle Glow Cyan: Luminescent wave highlights and subtle technical badge icon tints
- #1e2638 — Interactive Border: Borders for secondary buttons, social icon tiles, and email subscription input
- #ffffff — Text Crisp White: High-contrast headings, column titles, and primary action labels
- #8a94a6 — Text Muted Slate: Navigation links, body descriptions, and auxiliary copyright copy
- #4f5a6e — Text Dim Slate: Form placeholders and subtle trust badge indicator copy
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.025em for headings, 0 for body. The typography is technical, crisp, and authoritative, leveraging clean neo-grotesque proportions with tight display letter tracking (-0.03em). It speaks directly to software engineers with clarity, avoiding decorative flourishes in favor of functional, high-density legibility. Inter or a modern system font stack perfectly replaces the typeface.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved through ambient luminous light rather than drop shadows. Surface layers (Level 0 canvas to Level 1 footer) subtly shift from midnight navy to structured dark slate, while the glowing particle ribbon creates a faux Z-index stage effect behind the primary CTA.
IMAGERY
The imagery features an ethereal, mathematical particle wave ribbon glowing in blues, purples, and magentas over faint ghosted code snippets and IDE panes. Realistic human photography or playful cartoon illustrations would break the precise, high-performance developer aura.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable hallmark is the swooping, luminous dual-particle ribbon that crosses the center horizon behind a dual-tone lavender-pink gradient headline. To execute properly, anchor the ribbon's highest brightness points at the canvas edges, keeping the center low-contrast so white text remains effortlessly readable.
MUST
- Reserve the violet-to-pink gradient strictly for primary conversion buttons and brand title accents.
- Use generous vertical breathing room (80-96px) between the trust row and footer directory.
- Keep footer column headers in crisp pure white (#ffffff) at 14px semibold for fast eye scanning.
- Set the secondary CTA button to a translucent base with a 1px border in #1e2638.
AVOID
- Never use solid vibrant backgrounds for secondary buttons; keep them subdued and outlined.
- Do not let the background wave artwork exceed 40% opacity behind the text area.
- Avoid multi-colored icons in the trust row; keep them strictly monochromatic and low-contrast.
- Do not use sharp 0px or full 999px pill radii on action buttons; standardise at 10px.
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 中尝试 
