Design a dark-mode website section: deep cosmos call-to-action anchored to an airy, hyper-structured corporate utility footer.
LAYOUT
The vertical composition is split into two distinct tiers: a 480px tall centered dark CTA block stacked directly over a light, expansive 320px directory footer. Inside the CTA, content aligns strictly center with a 16px to 32px vertical rhythm. The footer organizes horizontally into a 2-column brand anchor, four evenly spaced navigation columns, and a right-aligned 340px newsletter card, concluding with an edge-to-edge legal bar separated by a hairline border.
PALETTE (use these exact hex values)
- #09080e — Obsidian Canvas: Primary background for the CTA section, absorbing ambient glow
- #fafafc — Light Footer Canvas: Primary background for the multi-column directory footer
- #5e5ce6 — Electric Violet: CTA primary action button background, newsletter subscribe button, and key headline accents
- #7064f5 — Soft Lavender Glow: Secondary phrase text coloring in the main dark CTA heading
- #f4f4f7 — Newsletter Surface: Background fill for the self-contained email subscription card
- #e4e4e7 — Border Subtle: Hairline borders on footer inputs, social icon squares, and horizontal dividers
- #27243d — Orbital Wire: Hairline circular orbital paths and eyebrow pill border in CTA
- #111827 — Text Dark Primary: Footer column headings, newsletter title, and brand name typography
- #6b7280 — Text Dark Secondary: Footer navigation links, descriptive subheaders, and copyright attribution
- #9ca3af — Text Light Secondary: CTA body paragraph and dark pill label caption text
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 44px display. Tracking -0.02em at display, 0.05em at caps badge. The typographic tone is authoritative, highly structured, and technical yet approachable. By pairing neutral grotesque forms like Inter with rhythmic multi-colored headlines, the typography communicates fintech reliability without appearing rigid. Legibility is prioritized via open counters and tight display tracking.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 32px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth in the dark CTA is entirely atmospheric, relying on deep radial blur gradients (#5e5ce6 at 15% opacity) and glowing button shadows rather than stacked box-shadow planes. In the footer, depth is flat and structural, relying on subtle tint variation (#f4f4f7 against #fafafc) and hairline 1px borders (#e4e4e7) to delineate interactive areas.
IMAGERY
Vector-based celestial geometry dominates the CTA background, featuring ultra-thin orbital wire arcs and glowing micro-nodes. No photographic imagery, 3D renders, or human portraits are permitted in this section. The footer is strictly typographic and iconographic, relying on clean line-art icons for mail and social networks.
SIGNATURE DETAIL — the thing that makes this design itself
The stark bimodal canvas transition: a deep space obsidian banner illuminated by violet orbit paths and split-color headlines, snapping directly into an ultra-clean, clinical light-mode directory footer. To preserve identity, the CTA must maintain its dual white/violet headline typography and cosmic radial background.
MUST
- Keep the sharp, un-blurred split between the dark cosmic CTA and the light-mode footer.
- Use violet (#7064f5) specifically for secondary action verbs within display headlines.
- Restrict orbital decorative lines to hairline stroke weights (1px) with faded opacity.
- Enclose the footer newsletter form in its own dedicated card surface (#f4f4f7).
AVOID
- Never merge the CTA and footer into a single continuous dark background.
- Do not color the first sentence of the CTA headline in violet; keep it white.
- Avoid heavy drop shadows or skeumorphic borders on the footer newsletter card.
- Never make the footer column headers all-caps; use clean Title Case.
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. 在 DraPub 中尝试 
