Design a dark-mode website section: deep space dark mode anchored by iridescent fiber-optic light trails and crisp glassmorphic panels.
LAYOUT
The layout is strictly stacked and centered at the top, shifting to an asymmetric grid below. It opens with the contained 1200px CTA card, which centers a pill badge, massive headline, body description, and dual button cluster. Directly underneath, the interface transitions into a structured footer: company identity and social icons on the far left, four product navigation columns in the center, and an email capture card on the far right.
PALETTE (use these exact hex values)
- #05070e — Void Black: Foundational deep background canvas for the entire page and footer.
- #0b1222 — Glass Navy: Semi-translucent container fill for the floating CTA card with high backdrop blur.
- #3b66f5 — Cobalt Primary: High-intent primary action button background.
- #7952f5 — Iridescent Violet: Upper gradient accent in text highlights, badge sparkles, and light ribbons.
- #38bdf8 — Neon Cyan: Lower gradient accent for headings, border glows, and light particles.
- #ffffff — Pure White: H1 hero typography, logo wordmark, and strong interactive states.
- #94a3b8 — Muted Slate: Secondary description copy, subheadings, and form placeholders.
- #64748b — Dim Slate: Footer link lists, copyright disclaimers, and subtle input hints.
- #1e293b — Border Glow: Stroke borders on secondary buttons, input wrappers, and subtle separators.
TYPOGRAPHY
Typeface Inter Display (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 16px body-lg, 20px subheading, 48px heading, 56px display. Tracking -0.03em for headings, -0.01em for body. The typography is clean, modern, and technical, delivered through a precision neo-grotesque sans like Inter Display. Tight negative tracking (-0.035em) on the display sizes delivers an authoritative, high-density developer tool presence. Body copy retains open tracking for effortless scanability in low-light environments.
GEOMETRY & SPACING
Corner radii — cards 24px, links 9999px, inputs 10px, buttons 12px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous optical layering rather than traditional drop shadows. Glowing cyan and violet plasma streaks pass behind a semi-transparent glass panel (rgba(11, 18, 34, 0.7)) that uses backdrop blur. The card's 1px gradient outline catches edge light, simulating physical glass floating over an energy stream.
IMAGERY
The visual atmosphere relies on abstract, high-velocity light ribbons and particle dust trailing across a deep cosmic void. The ribbons sweep horizontally behind the CTA card, blending electric cyan and violet. Realistic photos or cartoonish iconography would completely break this sleek, high-performance developer aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the floating frosted-glass CTA card illuminated from behind by sweeping fiber-optic light ribbons. Misusing this effect—such as applying the neon glow on top of the text or using an opaque card—destroys the physical illusion of translucent glass suspended over raw velocity.
MUST
- Position the neon violet and cyan light trails directly behind the main CTA card to create spatial depth.
- Maintain strict single-family font usage across the layout with precise weight shifts.
- Use subtle 1px gradient borders to define dark glass containers against pitch-black backgrounds.
- Highlight only the final action-oriented word in the headline with the dual-color gradient.
AVOID
- Do not use solid bright background fills for the primary container; keep it translucent glass.
- Never apply harsh dropshadows; rely on background bloom and translucent backdrops for depth.
- Avoid multi-colored text on long descriptive paragraphs; limit gradients strictly to key hero words.
- Do not use sharp 0px corners on interactive buttons; adhere to 10px-12px radii.
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 中尝试 
