Design a light-mode website section: airy enterprise logistics with vibrant indigo highlights, crisp dual-card metrics, and structured multi-column navigation.
LAYOUT
The section is structured in two major bands within a 1280px container. The top band uses a two-column grid: a dominant 7-column primary CTA card on the left opposing two vertically stacked 5-column feature cards on the right. Below, a generous 64px gap transitions into a balanced 6-column footer array capped by a hairline divider and a 3-part utility bottom bar.
PALETTE (use these exact hex values)
- #F8F9FC — Canvas Ground: Background canvas surrounding cards and framing the entire page footer.
- #FFFFFF — Card Surface: Card base fill for primary CTA and secondary metric panels.
- #6352E8 — Electric Indigo: Primary action button, brand marks, headline accent text, and interactive highlights.
- #EEECFE — Brand Lavender Tint: Background fill for uppercase status pills and subtle subscription buttons.
- #111827 — Heading Slate: High-contrast headings, stat values, and heavy title copy.
- #596474 — Body Neutral: Explanatory subtext, card descriptions, and secondary category links.
- #E8ECF2 — Muted Border: Structural outlines for cards, input containers, and social icon buttons.
- #E05656 — Alert Coral: Stat percentage highlight and trend-up icon tile color.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 42px display. Tracking -0.02em at display, 0 at body. The typographic tone is authoritative, systematic, and tech-forward, leaning on clean grotesk sans letterforms. High visual hierarchy is achieved through extreme contrast between 42px display headings and delicate 13px link groups, projecting modern B2B logistical intelligence.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is nearly flat, defined through crisp 1px strokes in #E8ECF2 rather than blurry drop shadows. Surfaces gain dimensionality from the interplay between the cool off-white canvas #F8F9FC and elevated pure white #FFFFFF card modules.
IMAGERY
Avoids photographic imagery entirely in favor of lightweight geometric UI tokens, vector iconography enclosed in soft pastel squircles, and an ethereal harmonic wireframe line-pattern in the primary CTA card. Any added imagery must stick to minimalist vector diagrams or clean monochrome logistics illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric dual-column CTA structure where the massive primary message card is counter-weighted by stacked, tinted metric cards featuring pastel icon squircles and quantified operational data.
MUST
- Reserve the bold #6352E8 indigo exclusively for primary actions, badges, and headline accents.
- Use 20px border radius uniformly across all major top-level cards.
- Keep card stroke borders at precisely 1px with cool-gray #E8ECF2.
- Apply the subtle topographical linework only inside the primary CTA card at under 8% opacity.
AVOID
- Do not introduce dark theme containers or saturated colored cards into this layout.
- Avoid drop shadows with heavy spread; depth relies almost exclusively on 1px borders.
- Never make the newsletter input or button full dark or heavily shadowed.
- Do not omit the trailing chevron on secondary text buttons like 'Talk to an expert'.
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 中尝试 
