Design a light-mode website section: airy enterprise saas canvas anchored by diffuse azure lighting, clinical typography, and modular multi-column footer architecture.
LAYOUT
The layout features a centered, single-column conversion block followed by a clean horizontal trust grid and a six-column footer architecture. The upper hero CTA flows vertically from pill badge to 44px heading, supporting copy, dual buttons, and metric row across an 80px vertical envelope. The footer is divided into a 2-column brand and compliance block on the left, three 1-column link stacks in the center, and a contained newsletter module on the right, terminating in a single-row copyright bar.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary background surface across the entire page canvas and footer body.
- #f0f7ff — Atmospheric Glow: Diffuse ambient cyan-blue radial gradient bloom softening the upper CTA zone.
- #2563eb — Primary Blue: Primary interactive button fill, active text links, and focused brand accents.
- #0f172a — Ink Slate: High-contrast headings, logo wordmark, and footer category column titles.
- #64748b — Muted Slate: Subheadings, descriptive paragraphs, footer links, and legal fine print.
- #e2e8f0 — Subtle Border: Hairline card borders, input borders, and badge outlines.
- #dbeafe — Pill Accent Blue: Hairline stroke framing the top announcement pill badge.
- #f3e8ff — Lavender Metric Tint: Soft circular icon background for the implementation speed metric item.
- #dcfce7 — Mint Metric Tint: Soft circular icon background for security and compliance badge.
- #fef3c7 — Amber Metric Tint: Soft circular icon background for the outcomes metric item.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 14px subheading, 15px heading, 16px body-lg, 44px display. Tracking -0.025em at 44px, -0.01em at 14px, 0 at 12px. The typographic tone is objective, surgical, and confident, speaking with the measured restraint expected of infrastructure software. Inter (or high-grade neo-grotesque equivalents like Plus Jakarta Sans) provides geometric legibility at small sizes while tightening visibly at 44px to prevent loose display letterforms. Weights stay strictly partitioned between 400 for continuous reading, 500 for navigation links, and 600–700 for headlines.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 6px, buttons 8px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is rendered purely through chromatic luminescence and soft atmospheric shadows rather than multiple grey tiers. The CTA primary button utilizes a diffuse blue drop shadow (0 8px 20px rgba(37,99,235,0.28)) that elevates it off the canvas. All other modules, like the newsletter box and compliance pills, sit flat with single-pixel hairline borders (#e2e8f0) without casting dark drop shadows.
IMAGERY
Iconography is strictly vector, linear, and stroke-based with 1.5px to 2px uniform line weight inside 40px pastel circular backdrops. No photographic assets or illustrative skeuomorphic art are permitted. The brand mark consists of an abstract metallic-hued geometric ribbon emblem that pairs cleanly with the modern grotesque wordmark.
SIGNATURE DETAIL — the thing that makes this design itself
The design's identifying signature is the four-part horizontal value-prop strip divided by delicate hairline vertical rules and anchored by soft pastel-tinted circular icon nodes. Positioned directly underneath the CTA button cluster, it converts cold space into an immediate enterprise confidence engine. Breaking the vertical rules or turning the circular badge icons into harsh solid colors instantly destroys the balanced airy cadence.
MUST
- Keep the atmospheric blue gradient extremely soft and centered strictly behind the main CTA text.
- Use 1px vertical hairline dividers between trust metrics to maintain structured horizontal rhythm.
- Set the primary CTA button shadow to a diffused blue tint rather than a generic neutral black.
- Enclose security compliance logos inside a dedicated segmented rounded container for enterprise legitimacy.
AVOID
- Do not place hard geometric box shadows on buttons; maintain diffuse low-opacity color glows.
- Do not make footer link columns unequal in vertical line-height or baseline alignment.
- Never replace the pastel metric icon circular tints with high-contrast primary colors.
- Do not use dark backgrounds or saturated panels in this airy high-key layout.
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 中尝试 
