Design a light-mode website section: atmospheric cerulean mountain haze grounded by a crisp, compliance-forward architectural white footer sheet.
LAYOUT
The page vertically flows from a centered hero section to an expansive, highly structured 6-column footer grid. The upper hero aligns the pill badge, 44px display title, supporting copy, and dual CTA buttons along the central vertical axis. Below, the white footer sheet opens into a 1240px container featuring branding and contact details on the left, four navigation columns in the center, and a newsletter capture on the right. A full-width horizontal hairline rule neatly buffers the bottom legal and compliance row.
PALETTE (use these exact hex values)
- #ffffff — Base Sheet: Primary surface for the lower sheet container, input borders, and primary CTA button fill.
- #5e84d4 — Haze Horizon Blue: Dominant ambient atmospheric background behind hero typography and badge callouts.
- #2563eb — Action Royal: High-intent accent fill for newsletter subscription button and logo accent ribbon.
- #0f172a — Slate Heading: High-contrast text for footer headings, brand wordmark, and primary button labels.
- #64748b — Slate Body: Muted text for column navigation links, legal disclaimers, and metadata copy.
- #f8fafc — Input Surface: Subtle cool-toned fill applied to the newsletter email input field.
- #e2e8f0 — Rule Line: Hairline separator above the legal and compliance bar and around social icon tiles.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 44px display. Tracking -0.02em at display, 0 at body. The typographic tone is institutional, precise, and highly regulated, pairing geometric clarity with understated authority. Using Inter or an equivalent high-x-height neo-grotesque ensures high legibility at 12px and 13px for legal and navigational text while remaining authoritative at 44px. The design relies on weight changes (400 regular to 600 semi-bold) rather than font swapping to indicate hierarchy.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is completely flattened and architectural rather than layered with drop shadows. The boundary between the photographic mountain haze and the crisp white footer is established purely via edge contrast and a 24px top border radius. Subtle tactile depth exists only on interactive inputs through 1px border outlines (#e2e8f0).
IMAGERY
Full-bleed atmospheric photography depicting misty, layered mountain ridges in cool twilight cerulean and periwinkle tones. The imagery must be serene, hazy, and free of human subjects or high-frequency urban clutter. Sharp, busy cityscapes or synthetic 3D shapes would be completely off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive architectural transition where a calm, ethereal photographic sky is abruptly capped by an immaculate paper-white container with curved 24px top corners. It provides an immediate feeling of landing from high-altitude strategy into structured operational reality. Misusing it with dark footer panels or heavy drop shadows destroys the lightness and authority.
MUST
- Use a rounded sheet motif (24px top radius) to crisply terminate scenic or atmospheric hero sections.
- Limit pure blue (#2563eb) strictly to direct interactive conversion actions like newsletter submission.
- Maintain strict left alignment across navigation link columns with 13px font size and #64748b text.
- Pair photographic atmospheric backgrounds with crisp white display typography and high contrast.
AVOID
- Do not use dark-themed or black containers for the footer sheet; the crisp white transition is essential.
- Never apply drop shadows to the primary footer container; edge transition is defined strictly by corner curvature.
- Avoid colored background fills for the primary demo CTA button; it must remain solid pure white.
- Do not increase the footer link font size beyond 14px, which degrades enterprise information density.
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 中尝试 
