Design a light-mode website section: deep space container nested inside clean enterprise daylight.
LAYOUT
The page transitions vertically from high-contrast conversion to modular utility. At top, a floating, centered 1280px rounded dark card commands immediate focus with a tight vertical stack: badge, heading, description, button pair, and security checks. Below, the background remains clean white, introducing a 6-column grid featuring company info, four link pillars, and an email capture form, finalized by a thin 1px horizontal rule above bottom legal credits.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: pure light foundation for the entire lower navigation and footer ecosystem
- #080c16 — Abyssal Navy: deep background for the high-impact floating CTA hero card
- #2563eb — Cobalt Action: primary interactive fill for key conversion buttons and logo mark accents
- linear-gradient(135deg, rgba(37,99,235,0.4) 0%, rgba(8,12,22,0) 70%) — Luminescent Blue Glow: ambient corner gradients creating curved dimensional lighting in the dark banner
- #0f172a — Charcoal Slate: high-contrast typographic color for light-surface headings and column titles
- #64748b — Cool Slate: body copy, input placeholders, legal links, and secondary footer navigation
- #f1f5f9 — Surface Mist: subtle background fill for small social media icon square buttons
- #e2e8f0 — Border Rule: hairline divider separating navigation blocks from the bottom legal bar
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 36px heading, 44px heading-lg. Tracking -0.025em for display titles, 0 for body and captions. The typographic tone is authoritative, corporate, and technologically adept. Using a geometric neo-grotesque sans-serif like Inter or Plus Jakarta Sans provides crisp legibility at tiny 12px compliance labels as well as impact at 44px display titles. High weight contrast between headers (600/700) and link lists (400/500) prevents corporate monotony.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through contrasting surface fills rather than heavy drop shadows. The dark CTA card stands out dramatically by floating as an #080c16 island over the pure white canvas. Subtle internal atmosphere comes from vector line glows rather than blurred elevation shadows.
IMAGERY
Abstract mathematical curved vector lines glowing in electric blue flank the CTA card, symbolizing AI data streams and network precision. Realistic photographs, illustrative cartoons, and 3D mascots are strictly absent. Any graphic imagery must remain purely generative, dark-field, and linear.
SIGNATURE DETAIL — the thing that makes this design itself
The floating 'deep space' rounded container hosting neon cobalt wireframe edge-glows embedded immediately above an ultra-clean, clinical white corporate footer. It achieves high conversion urgency without compromising the enterprise stability of the lower footer. Replicate it by keeping the card inset with 24px outer margins and framing it with symmetric, subtle blue vector curve gradients.
MUST
- Retain the dark CTA card within a generous 24px to 32px margin against the white canvas.
- Use solid electric blue (#2563eb) exclusively on high-priority conversion targets.
- Keep typography crisp and legible with tight letter-spacing (-0.02em) on large display headings.
- Ensure security and compliance checkmarks stay muted in #94a3b8 rather than bright colors.
AVOID
- Never stretch the dark CTA container full-bleed to the viewport edges.
- Do not use high-opacity colored borders around the floating dark container.
- Avoid replacing the blue ambient mesh lines with literal photography or busy illustrations.
- Do not use multiple contrasting accent colors; stick purely to cobalt blue.
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. Try in DraPub