Design a light-mode website section: an upward-stepping pipeline of crisp white cards against cool paper, turning complex automation into a lucid climb.
LAYOUT
The section employs an asymmetric two-tier architecture. The top tier features an anchor headline on the left alongside an upward-cascading five-card workflow that steps diagonally to the upper-right corner. The final step functions as an interactive dashboard summary. The lower tier re-stabilizes the layout into a symmetric, four-column grid of modular benefit cards featuring KPI counters.
PALETTE (use these exact hex values)
- #f7f9fc — Canvas Background: dominant page backdrop creating soft contrast against white cards
- #ffffff — Card Surface: pure white container fill for all pipeline stages and feature cards
- #0f172a — Text Primary: headlines, step titles, metric values, and primary card headings
- #64748b — Text Secondary: body copy, step descriptions, and secondary metadata labels
- #4f46e5 — Step Number Indigo: prominent step index numbers (01-05) and category eyebrow tag
- linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%) — Brand Gradient: gradient fill applied to the emphasis text 'runs' and hero badge
- #3b82f6 — Hero Card Accent: vibrant blue surface on the brand health score card module
- #10b981 — Success Mint: positive percentage delta indicators and active status indicator dot
- #edf2f7 — Border Subtle: 1px hairline borders bounding cards, pills, and sparkline axes
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, DM Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 36px display. Tracking -0.02em at display, 0.04em at captions. The typographic tone is authoritative, clean, and modern SaaS-editorial. Plus Jakarta Sans provides crisp geometry with tall x-height and circular terminals that look clean at dense UI sizes (11-13px). Caveat introduces an informal, human engineering voice that softens the programmatic precision of the interface.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered with extreme restraint to maintain a clean paper-like finish. Surfaces sit on level-0 (#f7f9fc) and pop forward using level-1 pure white with a dual shadow: 0 1px 3px rgba(15, 23, 42, 0.03) and 0 8px 24px -4px rgba(15, 23, 42, 0.05). Borders remain active at 1px (#edf2f7) to eliminate fuzziness on non-retina displays.
IMAGERY
The interface avoids photographic imagery entirely, relying purely on programmatic and informational artifacts. Visual interest is generated through subtle UI chrome: mini line sparklines with 10% gradient fills, metric pills with directional green arrows, and tinted 36px icon badges. Photographic cutouts or 3D renders would contradict the systematic, low-noise aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the staggered 'stepped progression' layout—five white cards ascending diagonally from left to right, capped with a delicate dashed trajectory and handwritten annotation. Misusing it by aligning cards horizontally or flattening card heights completely destroys the narrative metaphor of an ascending AI pipeline.
MUST
- Offset each successive pipeline step card vertically by 32px to 48px to create the climbing visual staircase.
- Keep stage cards 01 to 04 at identical widths while giving stage 05 roughly double width to represent destination impact.
- Use faint 1px borders (#edf2f7) and ultra-diffuse shadows so white cards cleanly separate from the #f7f9fc ground.
- Limit gradient fills exclusively to the focal headline keyword and the finale component accent.
AVOID
- Do not connect step cards with heavy solid arrows or thick pipeline tubes; preserve the delicate dashed arc.
- Never make all step cards the same vertical alignment; the stepped offset is the defining metaphor.
- Avoid harsh black drop shadows; keep elevation values below 0.06 opacity on rgba(15, 23, 42).
- Do not clutter early step cards with complex charts; keep data viz strictly isolated to the final card (05).
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. Try in DraPub 
