Design a dark-mode website section: mission-critical devsecops infrastructure cloaked in deep void black with neon cyan photon trails.
LAYOUT
The viewport is vertically stacked into two major bands: a centered, spacious CTA banner followed by an expansive footer. The CTA section nests the badge, headline, paragraph, dual-button group, and reassurance checks in strict center alignment. The footer below resolves into a 6-column layout: brand info on the far left, four link groups centrally, and email newsletter on the far right.
PALETTE (use these exact hex values)
- #040711 — Void Canvas: Primary surface behind hero CTA and base page background
- #020409 — Footer Abyss: Deep grounding floor surface for links, legal line, and newsletter
- #141f33 — Border Chasm: Hairline 1px section division lines, input borders, and icon containers
- #38bdf8 — Cyan Photon: Light wave trails, trust badge glyphs, and gradient start point
- #2b8bf5 — Electric Cobalt: Headline emphasis text, primary button fill, and logo brand mark
- #ffffff — Pure White: Main display headline, prominent link titles, and brand wordmark
- #8b9bb4 — Steel Slate: Descriptive body copy, link items, and secondary button label
- #475569 — Muted Cobalt: Uppercase section headings, placeholder text, and sub-footer copyright
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.03em at display, 0.05em at micro caps. The typography relies on an authoritative, engineered sans-serif (matching Inter or Geist Sans) set with tight display tracking (-0.03em) to convey enterprise stability and developer precision. The visual weight transitions cleanly from 700 bold headlines down to 400 weight for dense lists. The clean neo-grotesque geometry ensures rapid scannability across multi-tier navigation.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 112px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely through optical illumination and planar darks rather than box shadows. The background features a sweeping cyan photon streak that casts ambient blue luminance over the dark void canvas. Secondary surfaces like buttons and inputs rely on 1px stroke definitions (#141f33) to separate from the background.
IMAGERY
The visual backdrop features an abstract cybernetic particle stream resembling long-exposure light trails or optic fibers, arcing diagonally from lower-left to upper-right. It combines pin-sharp particle scatter with smooth ethereal luminescence. Photo assets or figurative illustrations are strictly avoided in favor of procedural tech lighting.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive signature is the high-velocity electric-blue photon wave curving diagonally across an obsidian canvas behind high-contrast typography. It transforms an otherwise utilitarian developer footer/CTA into an immersive, sci-fi command deck. It must never be blurred into a generic blob; sharp particle fidelity at the edges is essential.
MUST
- Use single-line cyan-to-blue text highlights sparingly to signify core capability words.
- Maintain strict 1px hair-thin dividers using deep slate navy (#141f33) rather than gray.
- Keep footer column category headers uppercase with wide letter spacing (0.08em).
- Pair light photon wave textures with pitch dark base tones to preserve terminal contrast.
AVOID
- Do not introduce solid pure-white card containers or light-mode surface patches.
- Avoid heavy drop shadows; depth must come entirely from lighting graphics and opacity.
- Do not center-align footer navigation lists; keep them strictly left-aligned.
- Avoid multi-colored badge pills; keep pre-headers minimal and free of heavy container outlines.
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