Design a dark-mode website section: crystalline light-glow cta melting into a disciplined deep midnight corporate footer.
LAYOUT
Vertically stacked two-tier architecture: the top half is a wide, centered light-mode hero banner flanked by soft abstract ribbons and floating cards; the bottom half is an edge-to-edge dark navy footer container. The footer organizes horizontally into a 6-part layout: brand column on the left, 4 middle link columns, and a right-hand newsletter block, capped by an understated bottom copyright row.
PALETTE (use these exact hex values)
- #0B1323 — Midnight Base: Primary footer canvas background color delivering deep contrast and solidity
- #2F65F6 — Electric Cobalt: Primary brand accent, used for prominent CTA buttons, headline highlights, and active states
- #FFFFFF — Luminous White: Light section base canvas, text color on dark surfaces, and button labels
- #131C31 — Navy Elevated: Background fill for input fields and social icon circles in the dark section
- #18243E — Deep Midnight Border: Subtle borders for input containers and footer bottom divider rule
- #111827 — Obsidian Text: Dominant headline color on the light CTA section
- #8E9BAE — Muted Slate: Secondary text, footer links, privacy subtexts, and placeholder labels
- #98F5E1 — Pale Mint Glow: Soft atmospheric gradient glow on the right flank of the light CTA
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Manrope, DM Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 44px display. Tracking -0.02em at display, 0 at body. Clean, contemporary technical geometric sans-serif that projects modern enterprise rigor with consumer-grade approachable warmth. Setting the display headline tightly tracked (-0.02em) with a colored keyword focal point lends it instant clarity, easily matched with Plus Jakarta Sans or Inter.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 32px gaps, 100px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered organically in the upper tier through soft atmospheric light diffusions and translucent frosted glass tiles with subtle outer glows. The lower footer tier is deliberately flat, relying on low-contrast surface shifts (#0B1323 base to #131C31 inputs) rather than cast drop shadows.
IMAGERY
Abstract, luminous light waves resembling flowing silk ribbon streaks in pale cobalt (#2F65F6) and mint (#98F5E1) overlaying clean white space. Floating 3D frosted glass tiles with rounded corners contain pale UI wireframe symbols (charts, shield, bars) to suggest product capability without literal screenshots.
SIGNATURE DETAIL — the thing that makes this design itself
The dramatic zero-divider split between the ethereal light ribbon CTA section and the deep midnight navy directory footer, anchored by an electric blue keyword accent in the headline.
MUST
- Use a sharp, unbordered edge between the light CTA background and the midnight navy footer.
- Highlight key headline keywords with #2F65F6 while keeping the rest in #111827.
- Pair primary blue filled buttons alongside plain text secondary actions with matching arrow glyphs.
- Maintain uniform 12px vertical spacing between links in each footer navigation column.
AVOID
- Never add a visible dividing border or drop shadow between the light CTA and dark footer.
- Do not use dark backgrounds for the upper conversion headline area.
- Avoid uppercase or heavy tracking on footer navigation column headers; use simple Title Case.
- Do not round buttons to full pills—maintain standard 10px corner radius on buttons and inputs.
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 中尝试 
