Design a dark-mode website section: deep obsidian mission control illuminated by circuit traces and glowing cyan telemetry.
LAYOUT
Two-zone vertical rhythm: top zone splits 45/55 between hero copy and dynamic node diagram; bottom zone is introduced via a notched rule dividing into an expansive 5-column footer directory, newsletter capture, and bottom legal metadata bar.
PALETTE (use these exact hex values)
- #03070d — Void Black: Deepest canvas background behind top hero and footer regions
- #09121d — Obsidian Surface: Base fill for interactive cards, inputs, and diagram node containers
- #2bc5ff — Electric Cyan: Primary brand accent, active CTA buttons, gradient headline highlight, and glowing wire paths
- #0f3a53 — Deep Cyan Glow: Subtle borders and connector glow lines across neural architecture
- #2ce59b — Telemetry Emerald: System status lights, operational badges, and secondary analytical circuit tracks
- #ffffff — Bright White: Primary headline text, active labels, and brand logotype
- #8a99a8 — Muted Slate: Body copy, input placeholder text, and secondary navigation links
- #1b2936 — Subtle Border: Card borders, horizontal divider rule, and newsletter input stroke
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 48px heading-lg. Tracking -0.02em at display, 0.08em at micro labels. Engineered, clinical, and high-velocity. Geometric sans styling with tight display tracking mimics aerospace and developer runtime environments without sacrificing mainstream readability.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is achieved through luminance rather than shadows: layers float on an abyss of black with targeted radial blue/cyan lighting behind interactive clusters. Nodes and cards establish elevation through 1px border strokes with subtle colored inner luminescence.
IMAGERY
Vector-only schematics and abstract system architecture diagrams. Circuit paths, node containers, and minimalist line icons represent data pipelines; photography and organic 3D renders are entirely absent.
SIGNATURE DETAIL — the thing that makes this design itself
The luminous cyan-and-green neural pipeline diagram connecting structured input nodes to an illuminated central engine core, set directly adjacent to dual-color stacked display typography.
MUST
- Use pure white text strictly for primary headings, logos, and critical column titles.
- Maintain electric cyan (#2bc5ff) exclusively for actionable buttons, path traces, and emphasis words.
- Enclose pipeline cards with precise 1px cyan/slate borders rather than solid fill elevation.
- Pair emerald status dots (#2ce59b) with technical status copy like 'All Systems Operational'.
AVOID
- Never introduce warm tones (yellows, reds, purples) into this strict cyan-emerald spectrum.
- Do not drop drop-shadows under cards; depth relies entirely on border glow and radial backdrop light.
- Avoid generic serif or high-contrast display typography; stay within neutral technical grotesks.
- Do not remove the subtle 1px circuit connectors between architectural nodes.
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. Try in DraPub