Design a dark-mode website section: deep midnight canvas electrified by glowing cyan gradients and live developer terminal telemetry.
LAYOUT
The layout descends vertically from high excitement to structured utility. At top, a large two-column card anchors the conversion zone: marketing proposition on the left, live CLI proof on the right. Directly below lies a full-width, single-row system status ribbon that validates infrastructure health. The structure concludes with a six-column footer containing brand identity, categorical directory lists, a newsletter capture card, and bottom legal metadata.
PALETTE (use these exact hex values)
- #04070D — Canvas Deep: Deepest canvas background behind all sections and footer grid
- #080F1B — Card Surface: Background fill for hero CTA container, terminal block, and subtle status bar
- #162338 — Border Subtle: Fine 1px structural dividing lines and container outer borders
- #2B59FF — Electric Blue: Primary action button fill, headline highlight, and glowing ambient halos
- #4EFA8A — Terminal Green: Live system status dots, CLI prompt prefixes, and completion checkmarks
- #3D1326 — Hiring Magenta: Subtle dark background tint for the 'Hiring' pill badge in the footer links
- #F1F5F9 — Text Primary: Primary headings, active tab labels, and primary button labels
- #8B9BB4 — Text Secondary: Descriptive copy, subheadings, and terminal property labels
- #4D5C73 — Text Muted: Inactive tab headers, legal copyright line, and subtle input placeholders
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 36px display. Tracking -0.02em at display, 0 at body. The typography communicates absolute precision and modern autonomous infrastructure. Inter handles the brand narrative with tight tracking (-0.02em) and solid typographic weight, evoking confident enterprise software. JetBrains Mono balances it with clinical, transparent dev-tool reality, reinforcing that the AI agent is an operational reality rather than vaporware.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved entirely through light emission and border contrast rather than dark drop shadows. Cards emerge from the void via 1px border strokes (#162338) and internal radial gradients of deep royal blue that fade out within the container boundaries. The primary button features a focused luminous blue bloom (box-shadow 0 8px 24px rgba(43, 89, 255, 0.45)) making it appear hovered above the glass plane.
IMAGERY
There is no photographic or illustrative imagery present. The interface treats raw system telemetry, monospaced code output, and glowing status pills as visual ornamentation. Any decorative imagery added must take the form of abstract dark vector graphs, terminal windows, or synthetic wireframes.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated terminal simulation card sitting inside the hero CTA container. It bridges the gap between high-level executive pitch ('Put your company on autopilot') and ground-truth execution via command-line execution logs. It is misused if treated as static text without real timing tags (e.g., '1.2s') or genuine CLI tab states.
MUST
- Use a subtle gradient mask on the main CTA card to suggest an electric blue horizon glow.
- Pair terminal green (#4EFA8A) strictly with real-time indicators, prompts, and success checkmarks.
- Set the command prompt and terminal content in a dedicated monospaced typeface like JetBrains Mono.
- Maintain high contrast by keeping non-essential links in #8B9BB4 against the deep #04070D canvas.
AVOID
- Never use pure black (#000000); preserve the midnight blue undertones of #04070D and #080F1B.
- Do not allow terminal green to bleed into non-telemetry body text or marketing headlines.
- Avoid pill shapes on main action buttons; restrict them strictly to micro-badges like 'Hiring'.
- Never omit the 1px subtle boundary line on dark cards, or visual separation collapses on OLED panels.
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