Design a dark-mode website section: deep midnight canvas electrified by luminous blue plasma rings and frosted glass nodes.
LAYOUT
Asymmetric two-column split layout across a 1240px grid. The left column (roughly 45% width) holds product typography, dual CTAs, and a metrics summary. The right column (55% width) showcases a centered 3D shield surrounded by 4 orbital agent nodes linked by thin glowing curves.
PALETTE (use these exact hex values)
- #030712 — Obsidian Black: Deep background canvas providing high contrast for glowing elements
- #2B59FF — Electric Cobalt: Primary interactive CTAs, button backgrounds, and core graphic aura
- #5CE1E6 — Cyber Cyan: Live status indicators, gradient text starts, and bright particle glows
- #A78BFA — Soft Lavender: Trailing gradient tone on key headline typography
- #FFFFFF — Text Primary: Main headline copy, logo, and active badge text
- #94A3B8 — Text Secondary: Subtitles, inactive nav links, and metric descriptions
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 28px heading, 56px display. Tracking -0.03em on headlines, 0.05em on uppercase tags. Technical, precise, and authoritative. A modern neo-grotesque sans with tight display tracking communicates institutional reliability blended with bleeding-edge artificial intelligence infrastructure.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely via luminous back-lighting, neon plasma gradients, and frosted glass transparency rather than traditional drop shadows. Light sources radiate from behind the central shield emblem, casting soft atmospheric blue fog forward through translucent interface cards.
IMAGERY
Abstract 3D digital artifacts rendered with glossy blue glass, inner refraction, and luminous particle orbits. Purely synthetic, programmatic, and geometric; photography of humans or physical objects is completely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The frosted glass node network orbiting a glowing refractive blue shield, visually tethering abstract AI concepts to tangible security and insurance.
MUST
- Use a gradient clip strictly on the word 'cover' to maintain semantic visual focal point.
- Encase all metric and floating agent cards in backdrop-filter blur with subtle 1px border strokes.
- Anchor the right visual field with a centralized glowing 3D shield and radial light bloom.
- Pair primary blue buttons with a top-right angled arrow icon.
AVOID
- Never use solid opaque backgrounds for node cards; always use translucent frosted layers.
- Avoid warm colors (red, orange, yellow) except for minuscule utility icons like lightning.
- Do not remove the glowing horizon line that grounds the 3D shield graphic.
- Do not apply drop shadows to text elements; readability relies on canvas contrast.
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 中尝试