Design a dark-mode website section: dual-chassis corporate ergonomics pairing an ultra-clean floating white cta slab over an immersive deep navy telemetry footer.
LAYOUT
The section adheres to an orderly top-to-bottom hierarchy: an overarching CTA floating slab, followed directly by an expansive multi-tier footer. The floating CTA splits into an asymmetric 60/40 grid—left for persuasive headline and CTAs, right for two balanced feature modules. Beneath, the dark footer distributes identity on the left, four balanced link columns in the center, and an isolated newsletter capture column on the right demarcated by a hair-thin divider.
PALETTE (use these exact hex values)
- #0B0F17 — Telemetry Base: Primary footer canvas background providing depth and framing the lighter floating CTA card.
- #FFFFFF — Pure White: Background for floating CTA container and text highlights on dark surfaces.
- #1E5EFF — Electric Cobalt: Primary actionable elements including call-to-action buttons, subscribe triggers, and focal icons.
- #EBF2FE — Muted Sky: Background fill for trust icon badging on light sub-cards.
- #111722 — Sub-card Dark: Dark metric tile inside the light CTA card and newsletter field background.
- #F3F5F9 — Off-White Floor: Surrounding page background behind the floating white CTA card.
- #0A0D14 — Text Primary Dark: Main headlines and primary content text on white surfaces.
- #64748B — Text Secondary Muted: Descriptions and metadata on light card surfaces.
- #94A3B8 — Text Footer Links: Navigation link labels, copyright, and secondary copy within the dark footer.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px subheading, 20px heading, 38px display. Tracking -0.025em for display, 0 for body. The typography communicates aerospace precision, structural engineering, and corporate assurance. Utilizing an ultra-neutral geometric grotesque like Inter or Plus Jakarta Sans allows technical acronyms, data metrics, and sitemap links to read effortlessly without stylistic distortion. Licensing should favor robust open-source variable sans typefaces with excellent tabular figure support.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through layered tonal contrast rather than heavy drop shadows. The top white card casts an extremely diffuse, low-opacity ambient occlusion (0 20px 40px rgba(0,0,0,0.04)) over the pale background, while the primary action button employs a concentrated chromatic glow (0 8px 20px rgba(30,94,255,0.35)). Nested dark cards visually sink back, implying physical hardware or glass panels.
IMAGERY
Imagery is almost completely abstracted into vector wireframe geometries and technical diagrams. The telemetry card incorporates a very faint, low-contrast 3D point-cloud mesh in the top-right quadrant, signaling robotics spatial awareness. Photographic assets or illustrated humans would break the clinical engineering tone.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the dual-chassis floating card: placing a large, soft-cornered pure-white canvas with embedded dark and light sub-pods directly over an uncompromising deep-navy footer. This avoids the monotony of an all-dark or all-light transition. It is commonly misused by flattening the CTA into the footer without radius isolation or by failing to balance the internal dark sub-card against the larger dark floor beneath.
MUST
- Retain the sharp tonal contrast between the white upper CTA slab and the #0B0F17 footer.
- Use electric cobalt (#1E5EFF) sparingly and exclusively for critical directional actions.
- Maintain generous 24px corner radii on the parent card and 18-20px on nested inner cards.
- Keep typography tight with -0.02em letter spacing on all titles above 18px.
AVOID
- Do not merge the white CTA slab into the dark footer without the distinct overlapping card radius.
- Avoid using saturated accent colors other than cobalt blue for controls and active indicators.
- Never set footer link columns in bold weights; keep body links regular weight at 13px.
- Do not remove the subtle ambient glow beneath the primary 'Book a strategy call' button.
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 中尝试 
