Design a light-mode website section: pristine light-mode conversion floating serenely above an enterprise midnight operational console.
LAYOUT
The composition follows a top-down stacked hierarchy with strict horizontal alignment. The upper zone features a centered maximum 1280px container holding the elevated CTA card, split evenly into an editorial pitch stack on the left and a 4-capsule metric strip on the right. Immediately below, the viewport transitions into the full-width midnight footer organized into an asymmetric 6-column grid: brand and status telemetry on the left, four distinct link taxonomies in the center, and a newsletter utility on the far right.
PALETTE (use these exact hex values)
- #0A101D — Midnight Navy: dominant grounding surface for the entire footer section and technical link array
- #FFFFFF — Pure Canvas White: elevated floating CTA card surface delivering high contrast against the soft page backdrop
- #F0F2F7 — Atmospheric Mist: upper page canvas backdrop creating subtle separation behind the floating hero card
- #2B59FF — Electric Cobalt: primary interactive CTA button fills, inline focal text emphasis, and active arrow indicators
- #0F172A — Charcoal Slate: high-contrast primary headline and metric data value typography in the light section
- #5F6B7C — Muted Cobalt Grey: supporting body text, metric unit sublabels, and secondary CTA ghost links
- #94A3B8 — Footer Slate: inactive text navigation links and secondary descriptions in the dark footer
- #64748B — Column Header Slate: tracked uppercase column titles and sub-footer copyright metadata
- #111C2E — Dark Console Fill: background surface for newsletter inputs, social icon buttons, and status pill
- #10B981 — Telemetry Emerald: live operational status dot signaling complete infrastructure availability
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans,-apple-system), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 16px subheading, 28px heading, 44px display. Tracking -0.025em for display, +0.05em for uppercase headers. Plus Jakarta Sans delivers a clean, high-precision developer-to-enterprise tone that feels engineered rather than expressive. Its wide apertures and crisp geometry provide effortless legibility at 11px uppercase metadata and formidable authority at 44px display weights. Inter or General Sans serve as frictionless direct drop-in alternatives without degrading structural alignment.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through an exaggerated, multi-layered diffuse drop shadow beneath the floating hero card (0 24px 64px -12px rgba(43,89,255,0.07)), creating an optical hover state above the background canvas. In contrast, the lower footer plane is completely flat and matte (#0A101D), using subtle 1px inset borders (#1E293B) to articulate sub-components rather than shadows.
IMAGERY
Visual assets are strictly non-photographic and vector-driven. The system utilizes minimal line icons encapsulated in pastel tinted square badges (lavender, cyan, light indigo, mint) alongside faint, generative background line-art curves resembling security banknotes or vector contour meshes. Organic photography, heavy 3D renders, or cluttered screenshots would thoroughly rupture this clean developer-first aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the 'floating bimodal shelf': a bright, friendly white SaaS billboard with heavy 24px rounded corners and soft atmospheric shadows suspended directly over a serious midnight command-center footer. Recreating this requires precise handling of ambient grey margins (#F0F2F7) surrounding the floating card before plunging the user into the dense dark-mode information architecture below.
MUST
- Retain the sharp 24px border-radius on the primary floating CTA card to preserve visual lift.
- Restrict the electric cobalt (#2B59FF) exclusively to active intent triggers and key typographic punctuation.
- Display metric figures in 28px bold typography directly beneath their respective tinted icon blocks.
- Keep footer column headers strictly uppercase with +0.05em tracking at 11px.
AVOID
- Do not merge the white CTA card directly into the footer without the ambient mist background transition.
- Never use sharp 0px corners; this design requires unified 8px, 14px, and 24px rounding.
- Avoid colored gradients for the primary CTA button; rely on flat, confident #2B59FF.
- Do not make footer navigation links full white; use #94A3B8 to prevent competing with the CTA card.
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 中尝试 
