Design a light-mode website section: luminous cobalt sky suspended over clinical white precision and quiet typography.
LAYOUT
The layout is strictly stacked and container-bound. First, an expansive 1280px wide floating CTA card commands the upper viewport, centering copy and action triggers in a single column with horizontal auxiliary rows. Below, a top border separates into a 6-column footer grid: 1 column for brand info, 4 columns for topical navigation links, and 1 column dedicated to lead capture and contact data. A thin divider terminates into a bottom copyright and compliance bar.
PALETTE (use these exact hex values)
- #1A56DB — Electric Cobalt Base: Primary dominant backdrop for the floating CTA card canvas and high-intent button states.
- #38BDF8 — Atmospheric Cyan: Gradient top-right radial wash and secondary accent highlights inside the hero banner.
- #FAFAFB — Canvas Ice: Global background behind the CTA banner card and footer section.
- #FFFFFF — Card Pure White: Primary CTA button surface, input container background, and badge text colour.
- #0F172A — Text Primary Dark: Wordmark, footer section headers, and high-emphasis labels on the light canvas.
- #64748B — Text Muted Slate: Footer navigation links, descriptive subtext, copyright notes, and placeholder text.
- #E2E8F0 — Border Hairline: Horizontal dividers, newsletter input field borders, and contact card outlines.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,Geist), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 48px display. Tracking -0.03em for display headings, 0 for body text. The typographic tone is authoritative, clean, and unmistakably modern enterprise SaaS. Using an unpretentious grotesque sans like Inter or Plus Jakarta Sans, it leverages tight tracking and heavy weights for display lines to project technological competence, while keeping footer links at a readable 13px with ample leading to ensure utility.
GEOMETRY & SPACING
Corner radii — cards 28px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved purely through color blocking and stark canvas contrast rather than standard drop shadows. The vibrant cobalt-to-cyan gradient card acts as an elevated visual foreground element against the low-contrast neutral grey (#FAFAFB) ground. Layered translucent elements (pills, lines, ghost buttons) inside the banner establish an optical glassmorphism effect without blur complexity.
IMAGERY
No photographic imagery is present; the design leans entirely on abstract atmospheric vector gradients, delicate contour bezier lines, and a subtle half-tone dot matrix pattern radiating from the top right. Any inclusion of human photography or literal corporate stock imagery would break the modern, AI-forward agency ambiance.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the floating, luminous cobalt-to-cyan CTA island featuring 28px rounded corners, atmospheric dot matrix mesh, and an embedded pure-white primary button. It bridges the dark-mode aesthetic of modern AI interfaces with the sterile, trustworthy light-mode design required for enterprise healthcare and agency tooling.
MUST
- Use deep cobalt-blue as the dominant anchor for the floating CTA card.
- Round the main CTA card corners to exactly 28px to maintain the soft island feel.
- Keep footer category headers at 14px bold and link items at 13px muted slate.
- Separate inline trust badges with 1px translucent vertical line dividers.
AVOID
- Do not use sharp 0px corners on the CTA container; it destroys the floating-card motif.
- Do not set footer background to dark; the footer must remain crisp #FAFAFB or pure white.
- Do not allow input fields or buttons inside the newsletter widget to touch the edge without 8px padding.
- Do not use heavy black dropshadows underneath the CTA card; rely solely on color contrast.
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 中尝试 
