Design a dark-mode website section: deep midnight canvas punctuated by electric cyan nodes, circuit lines, and photorealistic AI video feeds.
LAYOUT
Asymmetric split layout across a 1360px container: the left 45% is dedicated to high-impact typography, dual CTAs, and a baseline enterprise trust triad. The right 55% presents an orchestrated node graph featuring four avatar cards, a telemetry panel, and an API terminal linked by orthogonal cybernetic traces.
PALETTE (use these exact hex values)
- #060b11 — Deep Space Canvas: Deepest background layer across the entire page.
- #38bdf8 — Cyan Primary Accent: Primary CTA fill, headline gradient/color span, active status markers, and circuit lines.
- #4ade80 — Signal Green: Live audio visualizer waveform and active operational checkmarks.
- #ffffff — Text Primary: High-emphasis display typography, card headers, and button icons.
- #94a3b8 — Text Secondary: Body descriptions, compliance subtitles, and inactive nav links.
- #475569 — Text Muted: Micro-labels, timestamps, and subtle telemetry captions.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 56px display. Tracking -0.03em at display, -0.01em at body, 0.08em at eyebrow. The voice is authoritative, technical, and relentlessly modern. The heavy weight Inter headline conveys corporate stability, while the single-span cyan accent delivers cutting-edge AI credibility. Code snippets in clean monospace reinforce developer-first enterprise reliability without feeling chaotic.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through atmospheric layering: a deep dark sky, an organic mountain horizon, a luminous cybernetic fiber-optic floor wave, and foreground frosted glass cards. Elevated nodes do not use muddy dark drop shadows, but instead glow with 1px semi-transparent sky-blue perimeter strokes (rgba(56, 189, 248, 0.25)) and gentle outer ambient luminescence.
IMAGERY
Photography consists of studio-lit, hyper-realistic video call portraits of enterprise professionals against neutral office backdrops. They are framed inside rounded interface cards accompanied by precise digital waveforms. Avoid cartoonish illustrations, 3D avatars, or overly casual consumer imagery.
SIGNATURE DETAIL — the thing that makes this design itself
The interconnected node topology: photorealistic enterprise video call cards wired together with 1px right-angled glowing cyan traces, anchored by a floating live API call and an audio waveform HUD.
MUST
- Anchor modular floating cards with strict 90-degree orthogonal connector lines in 1px cyan.
- Use solid sky blue (#38bdf8) exclusively for high-intent primary interactions and headline focus.
- Display active voice streams with vibrant green waveforms centered over avatar portraits.
- Keep typography crisp: pure white (#ffffff) for display text, slate-400 for secondary explanations.
AVOID
- Never use curved, bezier-smoothed routing wires; all system node connectors must be right-angled.
- Avoid solid, opaque grey card backgrounds; always use subtle frosted glass transparency.
- Do not introduce multi-colored gradient buttons; keep the primary CTA flat, high-contrast cyan.
- Never clutter the left typography column with decorative badges or complex illustrations.
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. Try in DraPub