Design a dark-mode website section: deep northern light streaks radiating behind high-conversion saas conversion points and structured architectural footers.
LAYOUT
The page flows vertically from an airy, centered CTA container into a dense, multi-column navigation footer. The footer arranges brand information, four discrete link columns, and a dedicated newsletter form into an asymmetric 6-part grid, sealed by a balanced bottom legal row.
PALETTE (use these exact hex values)
- #021318 — Deep Teal Canvas: Solid base canvas color for the footer section and dark shadow recesses.
- #0d9488 — Aurora Emerald: Midtone green used in the atmospheric background flares and primary brand accents.
- #2ce080 — Vibrant Mint: Highlighted hero text wordmark, logo accent bar, and newsletter button fill.
- #f97316 — Solar Orange: Primary conversion button background, engineered for maximum focal contrast against emerald canvas.
- #ffffff — Text Primary: Main headings, high-priority links, and prominent labels.
- #94a3b8 — Text Secondary: Subheadlines, standard footer navigation links, and body copy.
- #475569 — Text Muted: Copyright text, legal sub-navigation links, and subtle icon strokes.
- #1e293b — Surface Glass Stroke: Borders on newsletter input and subtle separator dividing lines.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 14px subheading, 16px body-lg, 20px heading, 48px display. Tracking -0.02em at display, 0.05em at eyebrow. The typography is understated, sharp, and enterprise-grade. Inter or equivalent neutral sans-serifs convey developer clarity and SaaS credibility, relying on precise weight shifts from 400 to 700 to establish hierarchical relationships without visual clutter.
GEOMETRY & SPACING
Corner radii — cards 12px, 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 optical atmosphere rather than drop shadows. The top CTA shines with vertical aurora light beams on an obsidian base, while the footer utilizes flat, un-elevated surfaces grounded in near-black cyan.
IMAGERY
The visual hero is an abstract Northern Lights/aurora-style field featuring vertical light flutes, ranging from forest emerald to vivid yellow-green. Photographic imagery or illustrated characters are strictly absent.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the contrast between the warm solar-orange pill button and the cold, vertical emerald aurora background, which pulls the viewer's eye immediately into the primary action before settling into the architectural footer.
MUST
- Use orange (#f97316) exclusively for the primary CTA button to maintain peak conversion contrast.
- Restrict the display typography to clean geometric sans with tight tracking (-0.025em).
- Keep footer column headers in white (#ffffff) and their child links in slate (#94a3b8).
- Ensure the vertical ray texture blurs smoothly across the emerald and chartreuse spectra.
AVOID
- Do not use orange anywhere in the footer; reserve it solely for the primary conversion action.
- Never use stark white borders around the newsletter input; keep strokes dark and subtle (#1e293b).
- Do not center-align the footer columns; keep all footer blocks strictly left-aligned.
- Avoid standard serif fonts or decorative scripts in this technical product context.
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 
