Design a dark-mode website section: deep navy void punctuated by precise glowing cyan-blue accents and enterprise-grade compliance signifiers.
LAYOUT
The layout features a deliberate two-tier vertical structure. The top tier is a center-aligned CTA zone anchored by a 40px headline, concise paragraph, dual CTA buttons, and inline security proofs. The bottom tier transitions into a structured 6-column grid containing brand meta, four navigation columns, and an integrated newsletter card, grounded by an edge-to-edge legal bar.
PALETTE (use these exact hex values)
- #030712 — Deep Midnight Void: Foundational canvas background for the lower footer and overall dark structure.
- #050D1A — Atmospheric Navy: Subtle top-section backdrop with ambient cyan edge gradients.
- #2563EB — Electric Cobalt: Primary CTA fill, keyword accent highlights in headlines, and active focus cues.
- #1D4ED8 — Cobalt Hover: Hover state for primary action buttons.
- #60A5FA — Cyan Sky Glow: Gradient highlight text and ambient side illumination color.
- #FFFFFF — Pure White: Primary headline text, prominent button labels, and high-visibility titles.
- #94A3B8 — Slate Mist: Secondary paragraphs, column headers, form placeholders, and sublines.
- #64748B — Muted Steel: Footer navigational links, copyright notes, and de-emphasized compliance text.
- #1E293B — Surface Border: 1px hairline borders on secondary buttons, input wrappers, and icon boxes.
- #0B132B — Surface Dark Plate: Fill background for input boxes and social icon tiles.
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 40px display. Tracking -0.02em at display, -0.01em at body, 0 at micro. The typographic tone is authoritative, austere, and deeply technical, reminiscent of high-end developer tools and cloud infrastructure platforms. Inter or a closely related modern neo-grotesque delivers crisp geometric balance without quirky humanistic flourishes. The tight tracking on the display headline conveys precision and enterprise scale.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous layers rather than physical drop shadows. Dark navy surfaces sit directly on pure near-black canvases, while soft horizontal gradients and cyan ambient side-lights provide atmospheric depth. Subtle 1px borders (#1E293B) create razor-sharp containment without raising surfaces.
IMAGERY
No photographic imagery is present. Visual assets are strictly vector-based: geometric logo marks, minimalist 14-16px line icons, subtle dot-matrix patterns in the glowing periphery, and compliance shield emblems. Photographic or playful cartoon assets would clash with the stern enterprise tone.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the dual-tone display headline where the final phrase shifts into illuminated blue, perfectly echoed by the electric blue primary CTA and bracketed by glowing cyan edge fog. This creates an optical tunnel focusing all eye movement directly onto the conversion core.
MUST
- Use electric cobalt (#2563EB) strictly for primary actions and intentional text emphasis.
- Maintain high contrast by keeping primary body copy between #94A3B8 and #FFFFFF.
- Retain soft cyan radial glow blurs strictly at the viewport periphery, never center-stage.
- Pair trust micro-badges with 12px stroke icons to reinforce enterprise compliance.
AVOID
- Do not use saturated background fills; stick to deep near-black navy (#030712).
- Never apply rounded pill buttons (999px) to CTAs; stick firmly to 8px radius.
- Avoid bright white borders or drop shadows that destroy the moody, ambient atmosphere.
- Do not color all headline text blue; restrict the color accent to the closing phrase.
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