Design a dark-mode website section: deep-space dark glass telemetry paired with electric azure light blooms for autonomous software platforms.
LAYOUT
A balanced horizontal 50/50 split desktop composition. The left column stacks category pill, bold multi-line headline, description paragraph, dual CTA buttons, a 3-item horizontal trust badge group, and a client logo row. The right column holds the glowing product interface card containing a narrow icon sidebar and a modular telemetry grid.
PALETTE (use these exact hex values)
- #030712 — Void Black: Root background canvas framing the hero section and absorbing visual noise.
- #0b1322 — Panel Slate: Elevated backdrop for the telemetry dashboard frame and interactive feature badges.
- #070c18 — Card Interior: Nested surface fill for individual metric modules and activity tables.
- #1e293b — Subtle Border: 1px structural dividers defining card perimeters and low-contrast pills.
- #0084ff — Electric Azure: Dominant call-to-action fill, headline text emphasis, and glow source.
- #38bdf8 — Telemetry Cyan: Secondary trendline strokes, sparkline points, and active navigation indicators.
- #10b981 — Status Emerald: Operational status badges, positive delta metrics, and live pulse dots.
- #f8fafc — Text Primary: Main headlines, hero metrics, card titles, and high-priority labels.
- #94a3b8 — Text Secondary: Descriptive copy, metadata timestamps, and inactive iconography.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 28px heading, 56px display. Tracking -0.03em for display titles, 0 for body text. The typographic tone is programmatic, precise, and authoritative. Using a geometric neo-grotesque sans like Plus Jakarta Sans or Inter provides sharp terminal cuts, open apertures, and excellent legibility at tiny 11px dashboard scales. For production substitutions, Inter or General Sans are exact zero-cost architectural equivalents.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through surface luminance and localized neon backlighting rather than standard drop shadows. Foreground tiles utilize a marginally darker fill (#070c18) inside a lighter shell (#0b1322), separated cleanly by 1px subtle strokes (#1e293b). A 100px-150px radial cyan glow tucked behind the upper right perimeter of the primary product card creates depth against the #030712 base canvas.
IMAGERY
This design eschews photography and abstract illustration in favor of literal, high-fidelity UI telemetry. The focal visual asset is an intricate software dashboard displaying real-time metrics, live sparklines, and status logs. Any lifestyle imagery or hand-drawn sketches would entirely break the technical, enterprise-grade machine voice.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the concentrated cyan-blue ambient bloom spilling from behind the top right quadrant of the telemetry container. It transforms a standard dark UI mockup into an illuminated high-energy hardware console, bridging the gap between deep dark mode and vibrant interactivity. It is misused when applied globally to every card, which degrades clarity into visual mud.
MUST
- Reserve #0084ff electric blue exclusively for primary buttons and intentional emphasis words.
- Use 1px hairline borders in #1e293b to delineate surfaces instead of drop shadows.
- Apply cyan or blue gradient blurs strictly behind preview frames, keeping canvas edges crisp.
- Maintain strict tabular alignments inside dashboard cards with muted column headers.
AVOID
- Do not use multi-color gradients inside body typography or button backgrounds.
- Do not add heavy white drop shadows or diffuse dark elevation blurs.
- Do not set dashboard mockups on light backgrounds; they require dark slate embedding.
- Never let line heights on the display title exceed 1.15; keep it locked and punchy.
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 中尝试 
