Design a light-mode website section: dual-column operational comparison anchored by electric cobalt milestones and crisp telemetry time-savings badges.
LAYOUT
The page opens with a centered header module featuring a top kicker pill, a massive two-line display headline, and a two-line explainer paragraph. Beneath lies a three-part comparative stage: a 5-step manual workflow card on the left, an overlapping automated workflow card in the center with a connecting arrow bridge, and an auxiliary value card on the right. The page terminates on a centered horizontal compliance strip with thin vertical tick dividers.
PALETTE (use these exact hex values)
- #ffffff — Canvas Background: Primary background for page canvas and card surfaces
- #f8faff — Active Card Tint: Ultra-light blue wash for the highlighted automated workflow card
- #0d111c — Ink Primary: Main headlines, card titles, and high-emphasis metric counts
- #596475 — Ink Secondary: Body copy, workflow subtexts, and auxiliary metric labels
- linear-gradient(135deg, #6366f1 0%, #a855f7 100%) — Accent Gradient: Hero headline accent emphasis on transformed capability text
- #2563eb — Electric Cobalt: Active step icon circles, comparison arrow icon, and key telemetry glyphs
- #93c5fd — Active Border Blue: Outer border stroke for the featured right workflow container card
- #e5e7eb — Neutral Border: Hairline outlines for legacy cards, divider rules, and footer separators
- #dcfce7 — Velocity Emerald Fill: Background pill fill for automated turn-around time estimates
- #15803d — Velocity Emerald Text: Text and icon tint inside rapid automated completion tags
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 16px subheading, 20px heading, 24px heading-lg, 44px display. Tracking -0.03em at display, 0.05em at caps metadata. The typography is technical, exact, and confident. Plus Jakarta Sans provides clean geometric apertures and rounded punctuation that balance aerospace engineering authority with friendly SaaS legibility. Inter or DM Sans function as flawless zero-cost drop-in substitutes.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is minimal and planar. The manual card rests flat at border level with zero elevation, while the automated card uses a delicate 1px cobalt-tinted border stroke (#93c5fd). The central arrow badge and the rightmost value-prop card rely on subtle ambient shadows (0 10px 25px -5px rgba(0, 0, 0, 0.05)) to float slightly above the canvas.
IMAGERY
This interface avoids raster photos, 3D renders, or decorative illustrations entirely. It expresses identity strictly through clean vector telemetry icons (calendar, clock, shield, rocket, code bracket) enclosed in uniform rounded bounding geometries.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-column stepping pipeline bridged by a centered, floating transition arrow—where the left column decays in monotone delays while the right column snaps into cobalt execution nodes with mint '< 1 hour' completion chips.
MUST
- Use solid electric blue (#2563eb) nodes solely on the transformed active workflow card.
- Style duration chips on manual steps in muted gray to signify friction and waiting time.
- Wrap transformed workflow duration chips in soft emerald (#dcfce7) with green text (#15803d).
- Keep step node icons at precisely 36px diameter with centered single-color line glyphs.
AVOID
- Never add saturated colors or high-contrast borders to the left legacy workflow card.
- Avoid solid dark backgrounds; the system relies on pristine white and faint periwinkle tints.
- Do not drop the dotted vertical connector line; without it the sequential workflow breaks.
- Never style the hero headline entirely in gradient; only accent the final transformative phrase.
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 中尝试 
