Design a light-mode website section: crisp daylight b2b canvas grounded by an encompassing midnight cockpit footer with electric cobalt directional cues.
LAYOUT
The layout follows a progressive dual-stage funnel. The upper stage splits into a two-column hero: left-aligned copy, badges, and dual CTAs balanced against an expansive floating UI dashboard preview on the right. Below the hero features an icon-driven social proof bar. The page terminates into an architectural footer with an integrated newsletter signup on the left, four distinct navigational columns in the center, and a self-contained conversion card on the right.
PALETTE (use these exact hex values)
- #0B1220 — Midnight Ground: Background surface for the overarching footer container, framing the lower boundary of the page
- #F8FAFC — Daylight Canvas: Dominant background for the hero section, offering airy contrast against UI preview cards
- #FFFFFF — Pure White: Surface for floating dashboard preview mockups, pill buttons, and text contrast on dark backgrounds
- #2858FF — Cobalt Blue: Primary conversion button, active navigation icon, sparkline trend line, and interactive highlights
- #0F172A — Deep Charcoal: Primary typography color for display headings and high-emphasis body text in light mode
- #64748B — Cool Slate: Secondary description text, subheadings, and metadata indicators across the daylight canvas
- #94A3B8 — Footer Muted: Navigation column links, copyright notice, legal links, and input placeholder within dark footer
- #E2E8F0 — Border Subtle: Hairline outlines enclosing white dashboard cards and light secondary buttons
- #111C2E — Midnight Elevation: Surface color for secondary CTA card embedded within the dark footer
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 24px heading, 32px heading-lg, 48px display. Tracking -0.025em at display, 0 at body. Plus Jakarta Sans delivers an engineered, crisp operational clarity. The font's geometric circular counters and slightly squared terminals fit automated intelligence and high-efficiency tooling. Its tight tracking at large sizes provides commanding authority without feeling harsh.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through contrasting tonal planes rather than harsh skeuomorphism. The light hero uses a subtle, wide-diffusion drop shadow (0 20px 40px rgba(15, 23, 42, 0.06)) beneath the primary interface mockup to hover it over the canvas. Inside the dark footer, depth is entirely flat and border-driven, utilizing 1px strokes (#1E2D44) to delineate the demo card and input fields.
IMAGERY
Visual assets are strictly vectorized product UI previews and minimalist technical glyphs (such as four-pointed sparkles, security locks, and trend arrows). Photorealistic imagery or generic corporate photography is completely absent. Everything represents operational clarity through data density, sparklines, and conversational agent bubbles.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the massive 36px top-rounded midnight footer (#0B1220) that embraces the bottom of the daylight canvas, containing an internal elevated CTA card alongside a classic multi-column site map. Misusing it involves making the footer square-cornered or adopting a standard light footer, which instantly strips the design of its grounded enterprise cockpit feel.
MUST
- Use 36px corner rounding on the top corners of the dark footer container to soften the transition.
- Reserve the cobalt blue (#2858FF) exclusively for primary triggers, line trends, and active brand glyphs.
- Keep dashboard preview surfaces clean white (#FFFFFF) with a 1px soft border (#E2E8F0) and diffused shadow.
- Format footer navigation in clean multi-column lists with 12px vertical gaps and #94A3B8 text color.
AVOID
- Do not use sharp 0px corners anywhere; the aesthetic demands 8px to 36px soft radii across all components.
- Avoid colored backgrounds for the hero; keep the light canvas near-neutral (#F8FAFC) so the preview card floats cleanly.
- Do not make the footer light gray; it must be deep midnight navy (#0B1220) to anchor the viewport.
- Never drop raw drop shadows onto elements inside the dark footer container.
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 中尝试 
