Design a dark-mode website section: deep midnight glass interfaces bound by electric azure telemetry and cryptographic neon nodes.
LAYOUT
The viewport is governed by an asymmetrical two-column desktop hero grid inside a 1240px container. The left column (roughly 52% width) stacks identity badge, two-line heading, descriptive body copy, dual CTAs, and a four-part metric strip. The right column holds a centered, multi-node hub-and-spoke schematic displaying real-time middleware decision logic.
PALETTE (use these exact hex values)
- #060814 — Abyssal Canvas: Primary full-bleed background tone behind all interface elements and atmospheric particle fields
- #0f1629 — Frosted Vitrine: Translucent background for telemetry cards and diagram nodes with backdrop blur
- #4f75ff — Electric Azure: Solid primary action buttons, key node glows, and dominant brand indicators
- #7952ff — Violet Radiance: Secondary radial gradient lighting, hexagonal core ring, and particle dust hues
- #38bdf8 — Cyan Pulse: Subtle data flow highlights, connection paths, and high-energy particle sparkles
- #10b981 — Verification Mint: Status indicator dot and pill icon denoting authorized execution states
- #ffffff — Starlight White: Primary headings, high-contrast metrics, button labels, and prominent icons
- #94a3b8 — Muted Spec: Explanatory body copy, sub-labels, diagram node descriptions, and inactive nav items
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 52px display. Tracking -0.025em for display, 0 for body. The typographic tone is authoritative, highly disciplined, and enterprise-grade. It pairs the neutral clarity of an engineered neo-grotesque like Inter with precise tabular spacing for numerical metrics. If Inter is unavailable, Geist Sans or SF Pro should be used to retain the clean, developer-first legibility.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through layered optical lighting rather than traditional drop shadows. Translucent glass containers (rgba(15, 22, 41, 0.75)) sit over soft neon radial washes, while the central authorization crest features multi-tiered concentric glows that float it above the canvas.
IMAGERY
No photographic elements are used. The visual identity relies strictly on schematic UI nodes, vectorized mono-line icons, glowing network paths, and a starry celestial particle dispersal representing computational volume.
SIGNATURE DETAIL — the thing that makes this design itself
The multi-ring glowing hexagonal shield core linked by glowing dashed circuit paths to satellite glass telemetry cards, visualizing cryptographic middleware mediation.
MUST
- Use dark obsidian backgrounds paired with selective atmospheric cyan and violet radial blurs.
- Anchor complex multi-node diagrams with a central illuminated hexagonal graphic.
- Keep all card borders at exactly 1px with low opacity to preserve subtle glass boundaries.
- Utilize #4f75ff exclusively for key action triggers and dominant authorization nodes.
AVOID
- Do not use bright white card backgrounds or opaque high-contrast container fills.
- Avoid sharp 0px corners; maintain between 8px and 14px across all nested elements.
- Do not apply saturated yellow, red, or warm orange hues to this strict cool-spectrum palette.
- Never clutter the headline area with decorative illustrations; restrict graphics to the right half.
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 中尝试 
