Design a dark-mode website section: deep oceanic midnight illuminated by a bio-synthetic emerald and cobalt dawn for autonomous robotics infrastructure.
LAYOUT
The composition flows in two vertical blocks: a dramatic centered conversion space followed by a structured 6-column information architecture footer. The top block stacks an eyebrow pill, a massive two-line headline, a concise paragraph, and a dual-button row centered on the light source. The footer organizes brand/newsletter in column 1, four thematic navigation columns in the center, and a trust module in column 6, resolved with a balanced bottom legal row.
PALETTE (use these exact hex values)
- #020610 — Deep Midnight Abyss: Primary footer background and outer ambient boundary for the viewport canvas
- #034ea2 — Horizon Cobalt Glow: Atmospheric radial backlight creating depth and grounding the central call-to-action
- #0d7a53 — Emerald Signal: Primary conversion button background, newsletter submit button, and brand logo mark accent
- #7ee0b8 — Mint Phosphor: Gradient finish on display headline typography and micro status indicator dot
- #ffffff — Pure Starlight: First line of hero headline, primary button labels, and column section headers
- #8ea3bf — Steel Slate: Subheading paragraph text, footer links, input placeholder, and trust module narrative
- #162844 — Midnight Border: Subtle hair-width dividers, secondary button contours, and input field boundaries
TYPOGRAPHY
Typeface Inter Display (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 32px heading, 56px display. Tracking -0.03em at display, 0.05em at micro badges. The typographic tone is ultra-precise, technical, and authoritative—befitting industrial robotics and autonomous machine intelligence. Inter Display (or Geist) provides neutral, neo-grotesque structural clarity with zero decorative indulgence. The subtle mint tinting on the headline softens the sterility without compromising engineering rigor.
GEOMETRY & SPACING
Corner radii — cards 12px, links 2px, inputs 8px, buttons 8px. Spacing on a 4px unit, 32px gaps, 120px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered entirely through atmospheric optical illumination rather than drop shadows. A powerful cobalt-to-cyan radial bloom emerges from the baseline of the CTA section, silhouetting the buttons and elevating the headline. Sub-surfaces like inputs, cards, and secondary buttons rely on low-opacity borders (1px solid rgba(255, 255, 255, 0.08)) to cleanly separate from the abyss.
IMAGERY
No photographic elements are used; the visual atmosphere is built purely with simulated volumetric light gradients and vector iconography. Icons are razor-thin 1.5px stroke geometries, specifically the spiral brand mark, safety shield, and directional arrow glyphs. Any added imagery must resemble dark LIDAR scans, autonomous wireframes, or telemetry maps—never candid human photography.
SIGNATURE DETAIL — the thing that makes this design itself
The defining hallmark is the 'planetary horizon' lighting illusion: a radiant cobalt blue radial flare emerging from behind the primary action controls against a pitch-black cosmic canvas. It transforms an otherwise standard CTA block into an epic cinematic threshold, guiding the eye directly to the emerald conversion button.
MUST
- Ground the CTA section with a broad, centered radial cobalt glow emerging from the bottom horizon.
- Render the secondary line of the display headline with a subtle mint-green gradient.
- Enforce a strict 6-column distribution across the footer grid with equal vertical alignment.
- Keep all button corner radiuses strictly at 8px to maintain an engineered aesthetic.
AVOID
- Do not allow the background cobalt glow to bleed harshly into the footer content grid.
- Never use sharp 0px or fully rounded pill shapes for primary action buttons.
- Avoid warm colors like red, orange, or yellow anywhere in the CTA or footer palette.
- Do not separate the legal sub-footer with a harsh solid dividing line; rely on whitespace.
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