Design a light-mode website section: sober enterprise teal anchored by precise metric columns and structured high-trust architectural darks.
LAYOUT
The screen uses a two-zone vertical composition. The top CTA zone features an asymmetrical two-column layout: left column contains badge, 44px display title, body paragraph, twin CTA buttons, and security note; right column contains the structured 4-column metric card. Below, the full-bleed dark footer breaks into a 6-column grid (brand summary, four link columns, newsletter) capped by a bottom legal bar.
PALETTE (use these exact hex values)
- #FAFCFB — Canvas Light: Background canvas for the upper CTA hero container
- #FFFFFF — Surface White: Interior metric card and secondary button fill
- #041F2D — Midnight Pine: Deep structural base for the multi-column footer surface
- #137A63 — Spruce Primary: Primary CTAs, metrics figures, badge icons, and brand markers
- #EBF6F3 — Spruce Mint Tint: Metric icon circular backplates and eyebrow badge fill
- #0F1A1F — Text Primary Light: Headlines and high-emphasis display type in the light section
- #50636D — Text Secondary Muted: Body descriptions, disclaimers, and metric card subtitles
- #F1F5F7 — Footer Text Active: Footer column headings, primary brand logo, and active links
- #899DA8 — Footer Text Muted: Footer navigation items, subheaders, and copyright copy
- #E1E8E6 — Border Subtle: Outlines on metric card, badge, and secondary button
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, General Sans, Work Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 32px heading, 44px display. Tracking -0.025em on headings, 0.05em on eyebrow caps. The voice is institutional, precise, and reassuringly technical. Inter provides neutral, highly legible sans-serif mechanics where negative letter spacing at display scale prevents corporate looseness. Its dense tabular numeric tracking makes audit percentages look scientifically verified.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is strictly architectural and planar rather than atmospheric. No blurred drop shadows are visible; elevation is achieved through high-contrast boundary changes (light canvas meeting dark teal footer) and crisp 1px borders (#E1E8E6) that define inner white modules.
IMAGERY
Avoid photography entirely; use precise linear vector iconography (shields, locks, charts) rendered with 1.5px stroke weight. A faint, low-opacity generative wireframe wave sits subtly in the far right background of the CTA, signaling algorithmic intelligence without visual clutter.
SIGNATURE DETAIL — the thing that makes this design itself
The four-column horizontal benchmark panel embedded in an enclosed white card right beside the primary value proposition, turning abstract compliance claims into immediate statistical proof.
MUST
- Keep all enterprise metrics in spruce teal (#137A63) to reinforce authoritative credibility.
- Enclose statistical data inside the 16px bordered card to prevent loose, floating numbers.
- Pair primary dark green buttons with an inline trailing directional arrow icon.
- Maintain high value contrast between the light CTA stage and the #041F2D footer band.
AVOID
- Do not introduce bright saturated greens; stick to deep pine and desaturated mint tones.
- Never drop the 1px subtle border around the white metrics card against light backdrops.
- Do not make the newsletter input transparent; keep it crisp solid white for contrast.
- Avoid heavy drop shadows; rely on 1px borders and surface color shifts for depth.
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 中尝试 
