Design a dark-mode website section: deep midnight telemetry illuminated by vibrant electric cyan pulses and disciplined monospace schema.
LAYOUT
The composition follows a split CTA hero above a structured five-column footer. The upper half pairs a left-aligned enterprise headline and action stack against an orchestrator network diagram on the right. The lower half transitions into a rich multi-column footer containing brand metadata, category links, an email capture field, and a bottom telemetry status bar.
PALETTE (use these exact hex values)
- #030712 — Void Black: Deep foundational background canvas across the entire viewport
- #08101e — Midnight Surface: Card backgrounds, input fields, and diagram node containers
- #00d2ff — Electric Cyan: Primary CTA fill, glow highlights, active node pulses, and accent text
- #0ea5e9 — Deep Cyan Glow: Node radial shadows, connector energy tracks, and focused borders
- #10b981 — Terminal Green: Live system badges, node activity indicators, and API status dots
- #1e293b — Border Hairline: Dividers, node containers, input strokes, and card borders
- #ffffff — Primary Text: High-visibility headings, logo typography, and primary button labels
- #94a3b8 — Muted Text: Secondary copy, footer link labels, and column header keys
- #475569 — Ghost Text: Micro-labels, copyright statements, and inactive diagram descriptions
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Display,Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 36px heading, 44px display. Tracking -0.03em at display, 0.01em at body. The typographic tone is authoritative, highly technical, and meticulously calibrated. Inter provides unadorned clarity for rapid enterprise executive scanning, while JetBrains Mono reinforces low-level API credibility and infrastructure precision. For licensing independence, Roboto Mono and Geist Sans form seamless drop-in replacements.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly through chromatic luminance rather than standard diffused black shadows. Surfaces sit on dark void planes and gain prominence via 1px border strokes (#1e293b) and localized radial cyan glows (#00d2ff at 15-30% opacity) that emanate from active network nodes.
IMAGERY
No photographic elements are used. Visuals are entirely composed of vector architecture schemas: rounded node cards, dotted dynamic data-flow splines, terminal code windows, and clean outline stroke iconography.
SIGNATURE DETAIL — the thing that makes this design itself
The interconnected node diagram centered on a glowing AI core card with dashed telemetry circuits. To implement correctly, keep lines thin (1-1.5px) and dashed, with cyan glowing pulse dots along the transit lines. It fails when nodes look like arbitrary floating bubbles without deliberate circuit logic.
MUST
- Use pure electric cyan (#00d2ff) sparingly as the apex visual beacon for primary actions.
- Pair monospace code labels with structural diagrams to reinforce high developer trust.
- Ensure network node connector paths use dashed tracks with illuminated cyan pulses.
- Maintain strict multi-column vertical hierarchy across the site footer navigation.
AVOID
- Never introduce warm colors like orange, red, or yellow outside of system error states.
- Avoid solid, flat-white backdrops or opaque grey modal containers.
- Do not omit status indicator dots from architectural diagrams and live operational bars.
- Avoid standard serif typography; it conflicts with the technical developer aesthetic.
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 中尝试