Design a dark-mode website section: deep cosmos navy illuminated by warm reactor coral and cool electric violet glows.
LAYOUT
Two-zone vertical rhythm: The top zone is a split hero CTA with copy and action groups stacked on the left half and a glowing physical product render occupying the right. The lower zone is a standard corporate footer anchored by a massive stacked typographic mark on the left, four navigation columns in the center, and a newsletter capture form on the far right.
PALETTE (use these exact hex values)
- #060810 — Void Canvas: Deepest canvas background behind the footer and bottom legal bar
- #0A0D16 — Abyssal Slate: Background tone across the primary CTA section container
- #1E2436 — Border Subtle: Hairline separator lines, input borders, and icon button stroke outlines
- #F4796B — Reactor Coral: Primary conversion button fill giving a warm, tactile thermal signature
- #7A68DD — Ion Lavender: Secondary action button fill and subtle ambient backlighting
- #FFFFFF — Pure White: High-impact headlines, section eyebrow, and primary active navigation labels
- #939BAE — Muted Periwinkle: Body copy, supporting descriptions, input placeholders, and inactive nav links
- #5E6678 — Dim Gray: Legal text, copyright notices, and inactive icon tints
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px heading, 64px display. Tracking -0.03em on display, 0.08em on uppercase labels. Engineered, institutional, and commanding. Inter provides an authoritative, neutral voice that prioritizes clarity, while tight negative tracking at display scales conveys extreme density, precision, and technological power.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 32px gaps, 100px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely via volumetric light sources rather than traditional drop shadows. The 3D containment module emits an ambient violet back-glow and sits atop an illuminated circular floor rim, while buttons and form fields sit flush against deep navy backgrounds delineated only by hairline 1px strokes.
IMAGERY
Photorealistic 3D hardware rendering featuring precision-machined brushed steel, transparent high-index glass enclosure, and circular ultraviolet ground illumination. Avoid low-poly renders, flat illustrative clipart, or generic stock photography.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an intense glowing 3D hardware capsule against an ultra-dark canvas, balanced by a sharp coral CTA button (#F4796B). To use it, illuminate physical hardware renders with purple edge-glow and balance with a warm thermal accent; misuse occurs when the glowing object competes with busy backgrounds instead of isolated darkness.
MUST
- Anchor the right half of the primary CTA with a high-fidelity glowing 3D render on a dark pedestal.
- Use warm coral (#F4796B) exclusively for the primary CTA to create an irresistible focal punch.
- Pair coral primary buttons with text-only arrow links for balanced secondary actions.
- Set input borders to thin 1px #1E2436 on dark slate (#0D111D) fills for clean form aesthetics.
AVOID
- Do not use saturated blues or greens; stick strictly to violet and coral accents.
- Avoid solid pure white divider lines; keep rules barely visible at 1px opacity (#1E2436).
- Do not center-align the footer links or copy; keep all columns strictly left-aligned.
- Avoid fully rounded pill buttons; preserve the technical 10px corner radius.
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