Design a dark-mode website section: deep devtools black saturated with directional cyan, mint, and scarlet ambient photon blooms.
LAYOUT
Asymmetric two-column split layout contained within a 1280px frame. The left column (approximately 45% width) holds product typography, dual CTAs, and trust metrics. The right column (55% width) holds a floating architectural deployment graph connected by dotted orthogonal vectors.
PALETTE (use these exact hex values)
- #07090E — Canvas Background: Deep void black canvas for the full hero viewport
- #0D1117 — Card Surface: Semi-opaque dark surface for interactive cards and diagram blocks
- #1F2937 — Surface Border: Hairline 1px border framing diagram nodes and secondary buttons
- #1F6FEB — Primary Blue: Primary button fill, brand cube icon, and focused VM card aura
- #388BFD — Cyan Accent: Keyword emphasis in headline text and active border glow
- #3FB950 — Mint Emerald: Secondary keyword highlight, live status dots, and checkmarks
- #F0F6FC — Text Primary: High-contrast hero heading, stat numbers, and primary button labels
- #8B949E — Text Muted: Navigation links, body copy, stat labels, and architecture metadata
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 56px display. Tracking -0.03em at display, 0.08em at micro-uppercase. Technical, precise, and authoritative. Crisp neo-grotesque sans-serif with tight display tracking evokes developer platform rigor and modern cloud infrastructure. Cleanly replaces with Geist or SF Pro without losing tone.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created strictly through luminous layered light instead of drop shadows. Deep black background surfaces (#07090E) sit under atmospheric radial color glows, while foreground cards cut through with 1px structural strokes (#1F2937). Active target nodes cast soft outer neon halos using box-shadows matched to their border color.
IMAGERY
No photographic imagery is present. Visual storytelling is carried out entirely via structural vector nodes, monochrome provider logos (GitHub, AWS, Google Cloud, Cloudflare), and minimalist isometric line art.
SIGNATURE DETAIL — the thing that makes this design itself
The two-stage deployment flowchart with thin dotted orthogonal connector lines linking upper pipeline stages to lower multi-cloud target nodes, paired with an active glowing destination card.
MUST
- Use dual-tone ambient radial glows in opposing corners to create depth against deep dark background.
- Highlight specific semantic keywords in the hero title using cyan (#388BFD) and emerald (#3FB950).
- Keep diagram cards dark (#0D1117) with crisp 1px borders (#1F2937) and consistent 12px corner radii.
- Track micro-typography uppercase headers out to +0.08em at 11px font size.
AVOID
- Do not use white or light backgrounds; the aesthetic strictly requires deep space-grade blacks.
- Do not allow ambient glows to wash out text readability; keep contrast ratios above 7:1.
- Do not use heavily rounded pill buttons for the primary and secondary hero CTA pair.
- Do not use colored borders on diagram cards except for the single active target node.
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 中尝试 
