Design a dark-mode website section: luminescent cyan conduits cutting through deep obsidian enterprise infrastructure.
LAYOUT
The composition follows an inverted pyramid: the upper half is an expansive conversion bento card split horizontally between value narrative on the left and a 2x2 metric matrix on the right. Below the card, an expansive footer opens up into two zones: brand manifesto with social icons on the left, four navigation columns in the center, and a newsletter capture box on the right. The page terminates in an edge-to-edge utility row with a system status pill on the left and legal links on the right.
PALETTE (use these exact hex values)
- #070b12 — Canvas Background: Root background tone behind the hero card and footer section
- #0a1320 — Hero Card Surface: Deep blue-tinted container background for the upper conversion section
- #0d1a2d — Stat Card Surface: Elevated backdrop for 2x2 grid feature metrics inside the hero
- #248aff — Primary Gradient Start: Deep vivid blue start tone for text gradients and primary button gradient
- #3be4c5 — Primary Gradient End: Vibrant cyan-mint end tone for primary action buttons, links, and text gradients
- #34d399 — Indicator Mint: Operational status dots, live indicator badges, and active tags
- #1a2c42 — Card Stroke Border: 1px hairline outlines defining hero cards, stat modules, and input fields
- #f8fafc — Text Primary: High-contrast headings, active navigation links, and primary metric numbers
- #94a3b8 — Text Secondary: Body copy, supporting explanations, and navigation category headers
- #64748b — Text Muted: Footer sublinks, input placeholder, and copyright metadata
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 44px display. Tracking -0.03em at display, 0 at body, 0.05em at caps. The typographic character is austere, calculated, and high-performance, communicating enterprise-grade stability. The clean geometric grotesk (matching Inter or Geist) provides maximum legibility at tiny metric captions (11px) while remaining commanding at 44px display scales with tight negative tracking (-0.03em). A freely available open-source pair like Inter and Plus Jakarta Sans perfectly reproduces this utilitarian voice without licensing friction.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 72px between sections, 1200px container, comfortable density.
DEPTH
Depth is rendered purely through chromatic layering and hairline boundaries rather than drop shadows. Surface level 0 (#070b12) recedes while cards (#0a1320) and inner metric tiles (#0d1a2d) step forward via incremental lightening of navy values. Subtle 1px borders (#1a2c42) establish razor-sharp planar separation against the deep canvas.
IMAGERY
Vector line graphics and abstract luminous wireframe waves subtly overlay the right side of the main card, evoking real-time data streams and telemetry. Pure photography is absent; visual rhythm relies on geometric vector icons (lightning, cube, shield, lock) enclosed in subtle cyan lines. Any photorealistic imagery or illustrative cartoons would violate the strict infra-engineering aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-tone headline pairing crisp white typography with a cyan-to-sky gradient phrase ('Scale with confidence') echoed identically by the primary gradient CTA button below it. This creates an immediate cognitive lock between the promise and the conversion trigger. Misusing it across all headlines or applying it to multiple secondary buttons dilutes its focal pull and ruins visual hierarchy.
MUST
- Use subtle 1px border outlines (#1a2c42) to separate dark cards from the darker canvas.
- Limit vivid cyan-to-sky gradients strictly to primary CTAs and key headline emphasis words.
- Pair live status dots (#34d399) with operational labels to communicate reliability.
- Maintain high contrast by keeping primary metrics and titles in crisp white (#f8fafc).
AVOID
- Do not use saturated flat bright backgrounds; preserve the deep obsidian and navy tones.
- Never make secondary links full gradient buttons—reserve gradients for sole primary conversion.
- Avoid colored background fills on navigation links; use muted gray (#94a3b8) text instead.
- Do not drop border strokes on cards, as dark surfaces will bleed illegibly into each other.
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 中尝试 
