Design a light-mode website section: precision enterprise financial tooling softened by luminous chromatic accents and pristine white containment.
LAYOUT
The layout is horizontally centered within an 1120px container following a vertical hero-to-proof cadence. It begins with the top badge, flows into a stacked two-line headline, centers a two-line value statement, and provides paired action buttons with trust micro-copy. Directly underneath rests an enclosed proof unit composed of a 4-column metrics grid stacked above a unified social proof footer bar.
PALETTE (use these exact hex values)
- #F8FAFC — Base Surface: ambient viewport background providing contrast against pure white cards
- #FFFFFF — Card Surface: elevated card surfaces and secondary button backgrounds
- #0F172A — Text Primary: headline typography, main titles, and high-emphasis body text
- #475569 — Text Secondary: supporting body text, card labels, and partner attribution
- #94A3B8 — Text Muted: micro-copy checklist items, secondary card descriptions, and icon outlines
- #2563EB — Primary Blue: primary CTA button fill, focus state, and first metric accent
- linear-gradient(90deg, #2563EB 0%, #9333EA 50%, #DB2777 100%) — Headline Gradient: applied exclusively to the 'Grow with AI.' display phrase
- #7C3AED — Metric Violet: second stat card value and icon background tint
- #DB2777 — Metric Magenta: third stat card value and icon background tint
- #0D9488 — Metric Teal: fourth stat card value and icon background tint
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, system-ui), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 18px body-lg, 24px heading, 50px display. Tracking -0.025em at display, -0.01em at body. The typographic tone is authoritative, corporate, and technological, realized through a clean neo-grotesque sans-serif (Inter). It projects trust through disciplined weight hierarchy—bold display titles paired with precise medium-weight metadata. If Inter is unavailable, Plus Jakarta Sans provides an equally precise, modern alternative without losing geometric structure.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 72px between sections, 1120px container, comfortable density.
DEPTH
Depth is achieved almost entirely without prominent drop shadows. The design relies on flat, crisp 1px borders (#E2E8F0) and subtle contrast between the #F8FAFC page floor and #FFFFFF card containers. The only visible shadow is a delicate, diffuse 8px-16px blue glow underneath the primary CTA button.
IMAGERY
Imagery is limited to functional micro-elements: clean vector line icons (chart, clock, user, shield) contained within pastel-tinted square badges, and tiny 24px circular photographic user avatars overlapping inside the trust footer. Photographic imagery is strictly avoided in the hero cards to preserve high data density.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive move is the chromatic metric quartet: four side-by-side white cards, each assigned a singular vivid accent color (blue, violet, magenta, teal) reflected identically in its icon badge and stat readout, anchored by the gradient-punctuated headline directly above. Misusing this pattern by turning all icons blue or applying multiple colors within a single card breaks the rhythmic visual scanning.
MUST
- Use distinct semantic colors (blue, violet, magenta, teal) for each of the four metric columns to aid visual categorization.
- Apply the vibrant AI text gradient strictly to the operative phrase 'Grow with AI.' to maintain restraint.
- Maintain high-contrast white card surfaces against the off-white #F8FAFC canvas.
- Ensure secondary buttons match the exact 10px corner radius and height of the primary action button.
AVOID
- Do not apply the chromatic text gradient to the entire headline or body copy.
- Avoid harsh black #000000; strictly adhere to deep slate #0F172A for dark text.
- Do not remove the pill-shaped icon badge styling inside metric cards.
- Avoid high-elevation drop shadows; keep elevation flat, soft, and hairline-bordered.
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 中尝试 
