Design a dark-mode website section: deep space canvas lit by warm coral beacons and luminous circuit telemetry nodes.
LAYOUT
The design follows a top-to-bottom hierarchy starting with a prominent contained hero CTA card spanning full width up to 1240px. Inside this card, a split layout positions headline copy and dual action triggers on the left, counterbalanced by an intricate node-network telemetry illustration on the right. Directly below, the footer spans a 6-column modular grid with brand presence on the far left, four categorized link columns in the center, and a newsletter capture form on the right, capped off by a bottom legal rule bar.
PALETTE (use these exact hex values)
- #05090e — Canvas Void: Deepest background layer behind the CTA container and footer area
- #090e15 — Elevated Container: Background fill of the floating rounded hero CTA card
- #131b24 — Node Slate: Background fill for floating diagram nodes and newsletter input bar
- #e65342 — Coral Radiant: Primary conversion button fill, brand mark glyph, and headline accent gradient
- #4eed9a — Mint Pulse: Success node halo glow, completion checkmarks, and positive metric indicators
- #3b82f6 — Cyan Spark: Secondary integration nodes (document and lightning glyphs) and circuit links
- #ef4444 — Bottleneck Red: Warning node icon background and alert badge border/tint
- #ffffff — Text Primary: Primary headings, dominant brand logotype, and bold callout text
- #818c99 — Text Muted: Descriptive copy, secondary links, column headers, and legal disclaimers
- #182230 — Border Subtle: Node strokes, divider rules, and input field container boundaries
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,General Sans,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.03em on headings, 0.05em on badges. The typographic tone is authoritative, understated, and technically sophisticated, realized through a precise geometric neo-grotesque like Inter Display. The generous x-height and tight tracking at large sizes ensure the display headline feels punchy and confident without appearing playful. For production builds, Plus Jakarta Sans or General Sans serve as seamless open-source replacements.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly through surface tint layering rather than traditional drop shadows. The bottom base (#05090e) recedes while the CTA card (#090e15) rises forward via its perimeter outline and soft inner atmosphere. Flowchart nodes pop out from the container using localized radial aura glows (mint, red, cyan) that visually illuminate the dark backdrop.
IMAGERY
This interface avoids photographic imagery entirely, relying instead on high-precision schematic iconography and telemetry diagrams. Abstract data nodes, circuit lines, and glow halos construct an atmosphere of complex autonomous software working silently in the dark. Introducing real-world photography or organic 3D clay characters would completely contradict this technical aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the glowing multi-node telemetry flowchart embedded inside the CTA container, where orthogonal cyan lines connect rounded tool nodes into a luminous green AI processing core with an offset red alert callout. To execute correctly, wire paths must follow rigid 90-degree bends with soft rounded elbows, keeping the neon halo diffuse and low-opacity. It is ruined if lines overlap chaotically or if glowing glows clip against card boundaries.
MUST
- Use the coral color (#e65342) strictly for key focal conversions and selective gradient headline emphasis.
- Maintain high contrast by keeping non-active diagram nodes in dark slate (#131b24) with low opacity connecting lines.
- Give the main CTA container a prominent 24px radius to separate it cleanly from the foundational background void.
- Ensure the telemetry diagram lines use crisp orthogonal 90-degree curved corners with consistent 1px stroke weights.
AVOID
- Do not use pure black (#000000); always lean into deep midnight navy tones (#05090e to #090e15).
- Do not saturate secondary footer links; they must remain muted slate (#818c99) to avoid competing with headings.
- Never make secondary links full button pills; use simple dotted text underlines or plain hover chevrons.
- Do not apply heavy multi-color gradients across whole surfaces; confine gradients to fine halos and text clips.
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 中尝试 
