Design a dark-mode website section: mission-critical infrastructure aesthetics rendered in deep voids, structured grids, and cobalt focal burns.
LAYOUT
The section employs a balanced two-column asymmetric hero (text copy left, live software viewport right) capped at a max-width of 1240px. A full-bleed hairline horizontal divider demarcates the CTA section from the lower zone. The lower area splits cleanly into an identity-and-newsletter stack on the left third, while the right two-thirds distribute four balanced navigation columns followed by a compact legal utility bar at the baseline.
PALETTE (use these exact hex values)
- #080b11 — Obsidian Base: Primary screen canvas and deepest layer background behind all content
- #0e131f — Console Surface: Elevated dashboard preview container and interactive card base
- #1b2333 — Subtle Outline: Hairline card boundaries, input borders, and full-width layout dividers
- #2563eb — Electric Cobalt: Primary CTA button background, key highlighted typography, and brand monogram
- #1d4ed8 — Atmospheric Glow: Soft radial blurred illumination positioned directly behind the floating product UI
- #22c55e — Operational Green: Live system status badge dot and positive telemetry sparkline metrics
- #ffffff — Primary Text: Display headlines, column header labels, stat metrics, and logo wordmark
- #8492a6 — Muted Slate: Descriptive copy, secondary actions, footer navigation links, and input placeholders
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, system-ui), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 20px subheading, 28px heading, 44px display. Tracking -0.025em for display, 0 for body. The typographical voice is technical, highly objective, and authoritative, perfectly encapsulated by Inter or a tailored neo-grotesque sans. Display sizes utilize tight tracking (-0.03em) and generous line heights to avoid visual crowding on dark backgrounds. Licensing is friction-free via standard open-source Google Fonts (Inter or Plus Jakarta Sans), which seamlessly handle tabular numeric figures for data dashboards.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly via luminance stratification rather than muddy drop shadows. A dark canvas (#080b11) sits furthest back, elevated components adopt slightly lighter navy fills (#0e131f to #141a29), and edge clarity is guaranteed by a 1px border stroke (#1b2333). Atmospheric height is achieved by a diffuse 120px radial backlight in cobalt (#1d4ed8) positioned behind the primary preview window.
IMAGERY
No photographic imagery or stock lifestyle shots are permitted. Visual interest relies solely on high-density, vector-rendered SaaS telemetry mockups: data sparklines, terminal badges, and clean micro-icons. Any iconography must use a clean, geometric 1.5px monoline stroke style matching the typography weight.
SIGNATURE DETAIL — the thing that makes this design itself
The singular identifying move is the dual-tone headline paired directly with an atmospheric sapphire-backed interactive console mockup. Without the electric blue text accent mirrored by the background glow of the data panel, the composition would collapse into a generic dark-mode footer.
MUST
- Reserve vibrant cobalt blue (#2563eb) exclusively for actionable buttons and primary headline emphasis.
- Maintain strict 1px borders using #1b2333 around floating panels and data surfaces.
- Use a diffuse sapphire radial glow behind software mockups to create atmospheric separation from the black canvas.
- Keep footer column headers crisp white (#ffffff) while muting link lists to slate (#8492a6).
AVOID
- Do not use warm tones, red gradients, or yellow accents; keep the palette strictly cobalt and slate.
- Never apply high-opacity drop shadows; use border definition and subtle radial backlight instead.
- Avoid pill-shaped roundings on major UI cards; confine pills strictly to badges and secondary tags.
- Do not set headline typography in pure white entirely without highlighting the core phrase in blue.
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 中尝试 
