Design a dark-mode website section: deep-space midnight canvas illuminated by cybernetic gradients, precision stippled fields, and cool enterprise telemetry accents.
LAYOUT
The layout is divided into two major horizontal bands by a full-width 1px hairline border. The top tier is a center-aligned action hero featuring the headline, description, and dual CTAs surrounded by generous dark space. The lower tier is an asymmetrical multi-column footer: brand block on the far left, four equidistant link columns in the center, and a newsletter capture rail on the right.
PALETTE (use these exact hex values)
- #06080e — Deep Space Canvas: Root background color across hero CTA and footer containers
- #0d1322 — Input Well Surface: Background fill for the newsletter input group and social icon tiles
- #141c2e — Subtle Hairline Border: Horizontal dividers, vertical column separators, and input borders
- #2563eb — Primary CTA Blue: Filled primary action button with subtle radial ambient glow
- linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #67e8f9 100%) — Highlight Gradient: Gradient applied to emphasis words in hero headline and wordmark sheen
- #67e8f9 — Mint Cyan Submit: High-contrast fill on the newsletter subscribe submit button
- #ffffff — Text Crisp White: Primary headings, primary button text, and strong body anchors
- #94a3b8 — Text Slate Muted: Secondary description copy, subheadings, and footer links
- #475569 — Text Deep Muted: Copyright text, placeholder text, and section uppercase headers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 36px heading, 56px display. Tracking -0.03em at display, 0.08em at uppercase labels. The typographic tone is authoritative, technical, and surgical, driven by a neutral neo-grotesque sans-serif. Tight tracking at display sizes (-0.035em) delivers high visual density, while generous tracking (+0.1em) on 11px uppercase category headers mimics terminal telemetry. Inter or Plus Jakarta Sans are ideal open-source substitutions.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered flat with atmospheric back-lighting rather than traditional box-shadows. Sections use faint ambient radial gradients and fine stippling/point-cloud fields in the background to separate foreground text. Interactive layers like input wells visually recede via dark fills (#0d1322) and razor-thin borders (#141c2e).
IMAGERY
No photographic imagery is present. The visual language relies purely on abstract, delicate particle dust clouds and subtle blue-violet point-matrix constellations in the deep background. Any realistic photos or multi-color 3D illustrations would break this sterile, cybernetic telemetry aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the combination of dual-tone blue-to-cyan gradient text highlights on operative action verbs ('every prompt', 'every action') paired with faint stippled cybernetic constellations behind the headline. It establishes immediate enterprise AI observability vibes. Misusing it means applying gradients across entire sentences rather than selective key phrases.
MUST
- Use electric blue-to-cyan gradients strictly on operative keywords inside headlines.
- Maintain high contrast by keeping non-essential UI copy in muted slate (#94a3b8 or #475569).
- Keep hairline borders strictly at 1px with dark slate tones (#141c2e) for understated containment.
- Anchor the newsletter submit button with the distinctive cyan fill (#67e8f9) for deliberate right-rail weight.
AVOID
- Never introduce saturated bright backgrounds; canvas must remain near-black navy (#06080e).
- Avoid heavy drop shadows; rely entirely on 1px borders and subtle radial luminescence.
- Do not capitalize entire body links; uppercase is strictly reserved for 11px section headers.
- Do not make footer link text pure white by default; use #94a3b8 to prevent visual clutter.
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