Design a dark-mode website section: deep midnight canvas punctuated by neon twilight glows and precision linear wireframes.
LAYOUT
The view is anchored by a centered full-width banner container that commands the upper two-thirds of the viewport, vertically ordered by display header, support copy, CTA button row, and inline feature trust indicators. Directly beneath, the footer is organized into an asymmetric split: brand summary and socials on the far left, a 4-column structured link directory in the center, and a newsletter subscription field on the far right. A minimalist copyright and legal bar caps the bottom.
PALETTE (use these exact hex values)
- #07090e — Void Black: Root page background behind the floating CTA card and footer section
- #0d111e — Nebula Card Surface: Background fill of the main rounded CTA callout container
- linear-gradient(135deg, #7c6cf0 0%, #f472b6 60%, #ff6b57 100%) — Gradient Lavender Orange: Primary button fill and key highlighted word 'trustworthy' in the heading
- #705df2 — Electric Violet: Submit button fill on newsletter and subtle top gradient ambiance
- #ff6d43 — Prism Ember: Inner core illumination of the isometric 3D crystal element
- #ffffff — Text Pure White: Hero display headings, brand wordmark, column titles, and primary button labels
- #94a3b8 — Text Slate: Subtitle paragraphs, navigation links, and feature badges
- #475569 — Text Dim Muted: Copyright text, input placeholders, and tertiary legal footers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px subheading, 16px body-lg, 20px heading, 44px display. Tracking -0.02em at display, 0.01em at body. The typographic tone is authoritative, highly precise, and developer-infrastructure focused. A clean sans-serif like Inter or Geist conveys absolute reliability, with tight letterspacing on display headlines countering wide, readable spacing in the navigation links. Gradient color injection on headline keywords brings emotional warmth to an otherwise clinical technical voice.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is rendered entirely through subtle lighting gradients and translucent linear borders rather than traditional cast shadows. The CTA panel sits gently elevated via a faint top-edge internal glow and a deep ambient drop blur. The floating isometric 3D prism creates high-contrast visual depth with intense point-source radiance.
IMAGERY
Abstract 3D geometric hardware/crystal metaphor rendered with smooth translucent matte glass and internal laser-like star illumination. Paired with fine-line vector geometry (soft rounded shields/triangles) in low-opacity purples along card edges. Avoid real-world photography, messy illustrations, or flat cartoon art.
SIGNATURE DETAIL — the thing that makes this design itself
The singular focal point is the dual-tone gradient treatment bridging cool violet to warm coral, applied simultaneously to the keyword 'trustworthy' in the display heading, the primary CTA button, and the glowing isometric prism. This cohesive triad of light anchors the user's attention down the conversion funnel without overwhelming the dark mode environment.
MUST
- Use 1px semi-transparent border strokes (rgba(255, 255, 255, 0.08)) to delineate dark containers against pure black.
- Restrict bright saturated gradients strictly to primary conversion actions and key narrative words.
- Maintain generous padding (minimum 56px vertical) inside the CTA banner container.
- Keep typography strictly geometric and neutral to retain an enterprise infrastructure feel.
AVOID
- Do not use harsh 100% white borders; always keep strokes below 15% opacity.
- Never apply colored glow effects to generic body copy or routine links.
- Avoid heavy drop shadows; depth must come from surface tone shifts and lighting accents.
- Do not clutter the CTA card with dense paragraph blocks—keep body text under three lines.
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