Design a dark-mode website section: an ethereal light-mode conversion banner anchored directly into an ultra-dense, compliance-certified midnight footer canvas.
LAYOUT
The frame is divided into two distinct horizontal tiers. The top tier features a two-column conversion hero inside a rounded rectangular container: copy and dual CTA buttons occupy the left 60%, while a live metric card sits on the right 40%. The lower tier is a multi-column enterprise footer: company bio and feature bullets on the far left, four equidistant link columns in the center, and a newsletter capture module on the right, completed by a bottom legal bar with centralized security trust marks.
PALETTE (use these exact hex values)
- #070e1b — Midnight Abyss: Primary grounding background canvas for the multi-column footer and copyright tray.
- #ffffff — Elevated Paper: Background for the upper CTA canvas card and floating status metric widgets.
- #f8fafc — Tile Substrate: Fill color for metric data tiles inside the live status overview card.
- #1d4ed8 — Cobalt Blue: Primary conversion button fill, heading keyword accent, and brandmark glyph hue.
- #10b981 — Operational Emerald: Live system status indicator dot and SOC 2 security compliance bullet.
- #6366f1 — Electric Indigo: Uppercase announcement badge text, sparkle glyph, and category dot identifier.
- #0f172a — Ink Navy: Main heading text and dark-surface elements in the top light section.
- #64748b — Slate Muted: Light mode body subheadings, metric labels, and helper descriptions.
- #94a3b8 — Footer Muted Slate: Navigation link labels, subfooter legal items, and footer informational body copy.
- #1e293b — Hairline Border Dark: Subtle container boundaries, inputs, and horizontal separators in the footer.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 36px display. Tracking -0.02em on headings, +0.05em on micro badges. The typography is clean, engineered, and distinctly authoritative, driven by Plus Jakarta Sans. Its crisp geometry balances operational seriousness with modern software fluidity, especially through the use of -0.03em letter-spacing on display headlines and loose tracking on uppercase micro-badges. Substitution with Inter or DM Sans maintains the crisp B2B SaaS tone.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created using a dramatic light-on-dark surface step rather than aggressive layering. The top CTA card appears elevated via ambient blur-heavy drop shadow (0 20px 40px -15px rgba(0, 0, 0, 0.08)) and a soft violet-blue ambient bleed behind it. The bottom footer operates entirely flat with 1px hairline border separators (#1e293b) to retain strict architectural clarity.
IMAGERY
This design avoids raster lifestyle photography entirely, replacing it with an authentic UI status widget displaying live system metrics. Decorative visual interest is generated via vector line icons housed in soft chromatic pill badges and a fine geometric grid texture faintly visible on the upper card.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the dual-line button architecture ('Book a Demo' over 'See it in action') paired with the high-contrast light conversion island that bleeds soft cyan-purple radiance against an absolute midnight navy footer foundation.
MUST
- Preserve the strict juxtaposition between the light-mode floating CTA island and the deep abyss footer background.
- Use color-coded 4px circular indicator dots before all uppercase column headers in the footer directory.
- Highlight key verbs or phrases in display headings using rich cobalt blue (#1d4ed8) against ink navy.
- Include descriptive secondary sublabels beneath action button primary titles.
AVOID
- Never invert the layout into an all-dark or all-light uniform block; the split-canvas duality is mandatory.
- Avoid standard one-line CTA buttons; primary actions must carry an accompanying micro-phrase.
- Do not omit the live telemetry indicator dot above the platform status module.
- Never use raw #000000 black for the footer; stick strictly to navy-tinted midnight (#070e1b).
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 中尝试 
