Design a dark-mode website section: deep-space midnight glass illuminated by high-voltage cobalt conduits and tactile synthetic workflow artifacts.
LAYOUT
The page utilizes an asymmetrical two-column hero architecture nested in a 1360px central container. The left column (approximately 45% width) holds brand messaging, dual CTA buttons, and a horizontal triplet of trust micro-features. The right column (55% width) is an arranged constellation of operational cards orbiting a central code window. The composition resolves with a centered social-proof attribution and horizontal pill-filter rack anchored at the bottom.
PALETTE (use these exact hex values)
- #030614 — Void Canvas: Deep primary canvas background beneath all layout layers and global grid
- #1d4ed8 — Atmospheric Radial Glow: Diffuse 300px blur background ambient radial lighting behind primary headline and cards
- #2563eb — Electric Blue Accent: Primary CTA fill, active terminal glow border, and gradient headline anchor
- #38bdf8 — Cyber Cyan: Monospace syntax keywords, category badges, and active state highlights
- #0a1024 — Glass Surface: Background fill for floating artifact cards with 0.75 opacity backdrop filter
- #1e293b — Card Border Subtle: Resting hairline stroke across unselected cards and pill tags
- #ffffff — Text Pure White: Main display headline, active card titles, and high-contrast button labels
- #94a3b8 — Text Muted Slate: Body copy, secondary metadata, unselected nav links, and syntax keys
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 24px heading, 56px display. Tracking -0.03em for headlines, 0 for body. The typographic tone is ultra-modern, programmatic, and authoritative. The bold grotesque sans conveys enterprise stability without decorative indulgence, while the monospace code engine injects immediate technical authenticity. For open-source implementations, Inter paired with JetBrains Mono achieves an indistinguishable aesthetic cadence.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created strictly through optical luminosity rather than traditional drop shadows. Ambient background radial light emerges behind cards, while cards themselves use deep translucent navy fills over a dark canvas. The primary active terminal card achieves foreground presence via a bright cobalt perimeter neon stroke and soft external blue diffusion.
IMAGERY
The visual language excludes photographic human imagery entirely in favor of synthetic UI primitives: audio waveforms, JSON payloads, chat bubbles, review stars, and receipt breakdowns. These miniature mockups mimic live product components rendered inside dark-mode glass cards. Any figurative photography or lifestyle stock would completely undermine the technical precision.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the glowing code terminal surrounded by orbiting dark-mode input tiles. It creates an explicit 'data in, structured schema out' visual narrative where varied chaotic inputs visually resolve into a single illuminated, perfectly typed JSON block.
MUST
- Anchor the right half of the hero layout with a clustered orbit of dark glass artifact cards.
- Use uppercase 11px tracked text (0.08em) for operational category tags like SUPPORT and SALES.
- Maintain high contrast on the code terminal with an active illuminated blue border.
- Render code syntax strictly in a dedicated monospace font with muted line numbers.
AVOID
- Do not introduce sharp 0px corners; every card and chip requires an 8px to 16px radius.
- Never use saturated flat colored backgrounds for artifact cards; keep them dark glass (#0a1024).
- Avoid bright white borders on floating cards; use faint translucent slate tones (#1e293b).
- Do not mix serif or ornamental typefaces into this technical cybernetic system.
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 中尝试 
