Design a light-mode website section: luminous light-canvas cta transitioning sharply into a dense dark-mode multi-column footer.
LAYOUT
Vertically stacked two-act arrangement. Act I features a centered, luminous CTA block with an uppercase kicker, two-line headline, two-line subcopy, dual CTAs, and a micro-trust row framed by light trails. Act II transitions immediately into a dark, structured multi-column footer containing brand summary, newsletter input, four link columns, and a baseline copyright strip.
PALETTE (use these exact hex values)
- #090B10 — Footer Dark Background: Deep structural canvas for the comprehensive site footer
- #F6F8FD — CTA Radiant Base: Bright, ethereal tinted background behind the main CTA block
- #2458EE — Electric Blue Primary: Primary interactive action color for CTA button, brand sparkles, and newsletter send
- #11141A — Headline Charcoal: High-contrast text color for CTA headlines and main copy
- #505869 — Body Slate: Secondary description text, trust badges, and small subheaders
- #848C9E — Footer Text Secondary: Subordinate links and paragraph text on dark footer background
- #181C26 — Footer Border Divider: Horizontal rule delineating copyright row from navigation columns
- #131720 — Input Surface Dark: Background fill for the newsletter input field inside the dark footer
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px heading, 44px display. Tracking -0.03em on display, 0.08em on badges, 0 on body. Pragmatic, high-precision engineering tone created by a modern geometric sans-serif. The massive display headline at 44px feels authoritative and cinematic, while smaller sizes remain clean, highly legible, and utilitarian without quirky stylings.
GEOMETRY & SPACING
Corner radii — cards 16px, links 2px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is rendered entirely through luminescence and transparency rather than drop shadows. Translucent glass-like wireframe cards hover above curved light trails, while the buttons and fields remain flat, relying on crisp color boundaries to float off the surface.
IMAGERY
Abstract geometric UI panels (charts, bar graphs, radial metrics) rendered in ultra-low opacity white with delicate glowing borders. They feel like ambient holographic telemetry rather than concrete product screenshots. Avoid photography or dense iconography in the hero area.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden, unblended transition from a glowing violet-white cinematic light corridor directly into an ultra-dark architectural footer. It gives the feeling of emerging from a high-speed tunnel straight into technical console control.
MUST
- Keep a razor-sharp division between the ethereal light CTA section and the deep black footer canvas.
- Use 8px radius uniformly on buttons and input elements to maintain consistent tactile feedback.
- Letter-space the kicker text ('READY TO ROLL') generously to command authority without heavy visual weight.
- Ensure the blue button (#2458EE) is the highest saturated interactive touchpoint in the viewport.
AVOID
- Do not blur or soften the horizontal seam between the CTA light canvas and the dark footer.
- Never use fully saturated pure black (#000000); keep footer background at #090B10 to preserve softness.
- Do not add solid, high-opacity cards in the background; they must appear as gossamer, frosted wireframes.
- Avoid pill-shaped round buttons in this composition; buttons must strictly adhere to 8px rounded corners.
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 中尝试 
