Design a dark-mode website section: deep void canvases accented with bioluminescent electric blue, code mint, and particle-wave wireframe graphics.
LAYOUT
The layout is divided into two major stacked regions: a top Bento section and a bottom architectural footer. The Bento grid splits roughly 58/42 into a dominant hero card on the left and two vertically stacked feature cards on the right. Below a 64px structural gap and faint divider line, the footer organizes horizontally into brand identity/newsletter on the left and four neatly spaced link columns on the right, terminating in a legal sub-footer.
PALETTE (use these exact hex values)
- #05070d — Void Canvas: Root background color for the entire interface and footer base.
- #0d111a — Deep Slate Surface: Background fill for Bento feature cards and elevated containers.
- #080c14 — Code Inset Surface: Recessed container surface for code preview panels and input fields.
- #2363eb — Electric Cobalt: Primary action button backgrounds, arrow indicators, and active focal glows.
- #e11d74 — Cosmic Magenta: Community metric highlight text and ambient nebula background gradient.
- #5eead4 — Bioluminescent Mint: Micro-pill badge borders, badge typography, and code comment syntax accents.
- #f8fafc — Text Pure White: Primary headlines, card titles, and high-emphasis labels.
- #848d9c — Text Slate Muted: Body paragraphs, unselected navigation links, and code syntax secondary tokens.
- #1a2130 — Subtle Card Border: Hairline structural borders defining card boundaries and footer separators.
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 38px display. Tracking -0.02em at display, 0.05em at caps metadata. The typographic tone is technical, polished, and developer-first. Inter provides neutral, highly legible foundational copy with tight tracking at large sizes, while JetBrains Mono injects engineering authority via code syntax and comments. Substitutions should stick to premium sans-serifs with geometric or neo-grotesque roots like Geist or SF Pro.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered entirely through subtle luminosity rather than cast shadows. Cards hover over the #05070d canvas through 1px border strokes (#1a2130) and internal localized radial gradients that simulate light sources behind generative graphics. Recessed elements like code snippets and form inputs invert this hierarchy by dropping into an even darker tone (#080c14).
IMAGERY
Visual assets consist of programmatic, high-density particle-wave wireframes and celestial planetary spheres rendered with diffuse neon gradients. Imagery feels computational, generative, and mathematical rather than photographic. Avoid generic enterprise stock photos, 3D clay illustrations, or hand-drawn doodles.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-tone neon particle aesthetic embedded directly within dark Bento cards, pairing a cold blue generative sphere with an offset magenta cosmic arc. If replaced with flat illustrations or photographic cards, the design loses its distinct AI/developer infrastructure identity.
MUST
- Keep card stroke borders at strictly 1px with very low opacity (0.06 to 0.1) on dark backgrounds.
- Use solid electric blue (#2363eb) exclusively for high-intent conversion buttons.
- Pair monospace code accents with 11px or 12px labels to maintain technical precision.
- Incorporate organic particle and cosmic glow artwork strictly within card boundaries.
AVOID
- Do not introduce sharp rectangular corners; all containers require at least 8px radius.
- Never use drop shadows with heavy black spread; rely on hairline borders and inner glow.
- Do not saturate entire card backgrounds with bright color; keep base fills near-black (#0d111a).
- Avoid standard flat icon packs; use precise geometric wireframe graphics and monospaced glyphs.
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 中尝试 
