Design a light-mode website section: clean enterprise intelligence framed in soft atmospheric gradients and sequentially linked feature cards.
LAYOUT
The section is constructed as a centralized vertical stack. At the apex sits a pill eyebrow followed by a tight 2-line display title and subtitle. The center stage belongs to a continuous 5-column grid of equal-width process cards interconnected by floating chevron circles. Anchoring the bottom is a consolidated horizontal multi-column metric card, concluded by a subtle centered social proof tag ('Trusted by data-forward teams').
PALETTE (use these exact hex values)
- #F8FAFD — Canvas Ice: Global page background with very soft ambient blue tinting
- #FFFFFF — Surface White: Card containers, stat container, and elevated elements
- #0F172A — Ink Navy: Primary headings, step numbers, and hero copy
- #64748B — Slate Muted: Body copy, supporting explanations, and metric footnotes
- #E2E8F0 — Border Soft: Subtle card outlines, chevron circles, and structural dividers
- #2563EB — Electric Blue: Primary brand icons, key step pill badges, and directional cues
- #10B981 — Emerald Tint: Success states, autonomous system indicators, and validation badges
- #F59E0B — Amber Glow: Explainability badges and performance multiplier highlights
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700/800. Sizes 11px caption, 13px body-sm, 15px body, 17px subheading, 22px heading, 32px heading-lg, 44px display. Tracking -0.03em at display, -0.01em at body. The typography is clean, authoritative, and clinical yet welcoming, perfectly embodied by Plus Jakarta Sans or Inter. Tight letter spacing (-0.03em) on headlines conveys density and modern software craftsmanship, while open counters in the body copy ensure high legibility in small 12px-13px informational footnotes. It projects effortless computational competence.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through micro-contrast rather than layered 3D shadows. Cards sit atop a faintly tinted off-white background with a delicate border stroke (#E2E8F0) and an ultra-diffused, ambient shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.03). This creates a crisp, lightweight feel suited to complex enterprise software.
IMAGERY
The visual system relies entirely on vectorized line icons encased in 44px tinted squircle containers rather than photography or 3D renders. Icons use 1.5px to 2px stroke weights with rounded caps and joins, matched in tone to their respective category badges. Photographic or realistic imagery would break the precise, diagrammatic clarity of this system.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal 5-stage sequential card train connected by floating circular chevron nodes, grounded directly by a unified quantitative metrics ledger. Removing the connecting chevrons or the bottom credential pills reduces the system to generic feature boxes, eliminating its distinctive procedural flow.
MUST
- Maintain strict 1:1:1:1:1 width proportions across all 5 horizontal workflow cards.
- Use distinct semantic pastel tints for bottom validation pills to differentiate functional layers.
- Align all metric values horizontally across the bottom summary container with bold 32px numbers.
- Ensure connecting chevrons sit exactly on the horizontal axis between workflow step cards.
AVOID
- Do not use dark, saturated solid backgrounds for cards or badges.
- Do not drop the connecting chevrons, as they convey essential pipeline chronology.
- Do not use sharp 0px corners; maintain soft radii (8px to 16px) throughout.
- Do not let secondary text exceed 13px inside step cards to avoid text overcrowding.
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 中尝试 
