Design a light-mode website section: an upward-stepped pipeline of light card artifacts connected by subtle dashed trajectories.
LAYOUT
The header sits top-left with an uppercase kicker and an asymmetrical two-phrase headline. Below it, a 5-step journey ascends across the canvas with cards placed on varying vertical offsets to build an upward slope toward step 05. The lower half balances the composition with a 4-column Bento grid featuring proof points, logs, partner badges, and control toggles.
PALETTE (use these exact hex values)
- #F9F9F8 — Canvas Background: Global backdrop surface supporting floating white cards
- #FFFFFF — Card Surface: Background for all interactive and modular journey containers
- #F5F5F3 — Subtle Well Surface: Background for nested micro-widgets, pills, and preview chips
- #ECECE9 — Hairline Border: 1px structural boundary for all cards, dividers, and inner boxes
- #171717 — Text Primary: Primary headings, step titles, stat counters, and dark labels
- #737373 — Text Muted: Descriptive paragraphs, step subtitles, and metadata labels
- #8C8C89 — Text Secondary Heading: Secondary clause in the main display title ('done for you.')
- #E25C4D — Coral Accent: Kicker text, early step counter tags, and step 1-4 icon strokes
- #38A169 — Success Emerald: Final outcome radial gauge, step 05 badge, and positive deltas
- #1D64EC — Trust Cobalt: Verification checkmarks, progress bars, toggle track, and badges
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 18px heading, 28px heading-lg, 38px display. Tracking -0.03em for display titles, 0 for body copy, +0.08em for uppercase kickers. Clean, highly modern, and disciplined. A modern grotesque sans-serif like Inter or Plus Jakarta Sans lends operational authority and clarity. Strong weight hierarchy separates actionable stats and headlines from featherlight secondary explanations.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created strictly through minimal layer overlap, faint hairline strokes (#ECECE9), and soft, diffuse ambient shadows (0 4px 20px rgba(0,0,0,0.02)). Surfaces float effortlessly over the warm grey ground without aggressive elevation levels or heavy drop shadows.
IMAGERY
Avoids photographic imagery entirely in favor of lightweight micro-UI UI component mockups, line icons, sparklines, and metric cards. Visuals are clean vector abstractions of software interfaces such as progress rings, mini tables, status pills, and bar charts.
SIGNATURE DETAIL — the thing that makes this design itself
The rising 5-stage card pipeline connected by airy dashed bezier threads that terminates in a prominent emerald green circular completion gauge.
MUST
- Stagger the horizontal process cards upward from left to right to reinforce the sensation of progress and ascension.
- Use hairline 1px borders (#ECECE9) consistently across all outer cards and internal nested previews.
- Limit saturated green (#38A169) strictly to the final milestone card to visually reward task completion.
- De-emphasize the trailing clause of the main display heading with neutral grey (#8C8C89) rather than black.
AVOID
- Do not align all 5 process cards on the same horizontal baseline; the vertical stagger is essential.
- Avoid heavy drop shadows or dark borders; cards must look airy and near-planar.
- Do not use saturated green on steps 01 through 04; keep them restricted to coral and blue tones.
- Never make connector curves solid or overly thick; they should be delicate 1px dashed guide paths.
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 
