Design a light-mode website section: deep galactic command cards grounded by crisp editorial enterprise whitespace.
LAYOUT
The interface features a rigid vertical sequence: a prominent dark full-width CTA block with centered messaging and a horizontal metric bar at the base, transitioning directly into a multi-column light-themed directory. The footer divides into three zones: brand identification on the left, four equidistant link columns separated by hairlines in the center, and a dedicated newsletter capture form on the right. A simple horizontal rule demarcates the copyright and legal links at the absolute bottom.
PALETTE (use these exact hex values)
- #0C0D17 — Void Black: Background canvas of the top cosmic CTA banner card
- #FFFFFF — Pure White: Global page canvas and light footer background
- #7E88EB — Iris Lavender: Primary CTA fill in dark banner and newsletter submit button
- linear-gradient(90deg, #9B9CF5 0%, #E29EA8 100%) — Brand Highlight Gradient: Emphasized editorial text span inside the serif headline
- #111424 — Deep Charcoal: Primary headings, brand wordmark, and newsletter title in footer
- #5D6175 — Muted Slate: Navigation links, footer body copy, and secondary CTA link
- #FFFFFF — Starlight White: Headlines and metric values within the dark CTA section
- #E5E7EB — Light Border Hairline: Vertical column separators and newsletter input border in footer
TYPOGRAPHY
Typeface Newsreader (or Canela, Playfair Display, Cormorant Garamond), weights 400. Sizes 12px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 44px display. Tracking -0.02em. The typographic pairing bridges classical editorial authority with modern SaaS precision. The display serif feels literary, thoughtful, and high-trust, while the clean neutral sans provides instant legibility across complex multi-tiered navigation and micro-stats. For substitutions, Cormorant Garamond or Canela match the serif's grace, paired with Inter or Plus Jakarta Sans.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through stark surface polarity and photographic texture rather than simulated drop shadows. The top CTA card acts as an opaque dark monolith against the bright white footer plane. Form fields in the footer rely exclusively on 1px borders (#E5E7EB) without inner or outer shadow.
IMAGERY
The only imagery present is an atmospheric cosmic dust/nebula field subtly layered behind the dark CTA container. It is soft, grainy, and deep purple-hued, fading toward pure black near the center. Stylized 3D renders, vector illustrations, or stock photography would severely compromise this clean, technical aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the abrupt yet elegant transition from a 24px rounded dark cosmic container into an expansive, grid-divided white editorial footer. To implement correctly, keep the dark banner self-contained with a subtle starlight texture, transitioning immediately to a crisp 1px hairline-bordered enterprise footer without any transitional dropshadows.
MUST
- Use a refined editorial serif for high-level dark CTA titles with tight (-0.02em) tracking.
- Restrict the iridescent pink/periwinkle gradient strictly to inline keyword highlights within headings.
- Preserve 1px vertical hairline dividers between statistical KPIs and footer column groupings.
- Maintain exactly 8px border-radius across all interactive elements including inputs, buttons, and social squares.
AVOID
- Do not use full pill (999px) border-radii; buttons must stay softly rounded at 8px.
- Do not use colored backgrounds for the footer directory; it must remain pure white (#FFFFFF).
- Never replace the delicate 1px metric dividers with thick or solid-colored lines.
- Do not apply drop shadows to the dark CTA card; rely on sharp tonal contrast against white.
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 
