Ramp

Ramp's design system is a study in controlled complexity. 290 CSS custom properties govern everything from spacing scales to color tokens to animation timing — a level of systematization that most startups only aspire to. The result is a site that packs an enormous amount of information into every viewport without ever feeling cluttered. Product screenshots, feature comparisons, customer logos, pricing tiers, and integration grids all coexist in a rhythm that feels inevitable rather than overwhelming.

The typography stack spans 18 font files across multiple weights and optical sizes, a commitment to typographic precision that most teams would consider excessive. But on Ramp's site, the difference between a 400-weight body paragraph and a 450-weight feature label creates micro-hierarchies that guide the eye through dense content blocks. The 74 inline SVGs serve a similar function — each one a carefully crafted icon or illustration that earns its place through informational utility rather than decoration.

Video is central to Ramp's storytelling. Twelve embedded product demos walk through expense management, bill pay, procurement, and accounting workflows — each one a polished screen recording with UI animations that demonstrate the product's speed and clarity. These aren't marketing fluff; they're the closest thing to using the product without signing up. The videos, combined with the dark navy (#1A1A2E) color anchors and precise grid system, create a visual language that positions Ramp not as a fintech startup but as financial infrastructure.

This was the most complex capture in our entire portfolio. The initial page load triggered 867 network requests before stabilizing — a combination of SPA hydration, lazy-loaded assets, analytics payloads, and CDN-distributed media. Our Playwright instance required a 30-second page timeout just to let the full render cycle complete, compared to the 10-15 seconds typical for most captures.

The WebGL canvas hero presented the first major challenge. Ramp's animated gradient mesh runs entirely in JavaScript through a canvas element — no fallback image, no CSS equivalent. Our pipeline captured it as a static screenshot, preserving the visual impression at the cost of the animation. The 12 video assets required CDN domain whitelisting and parallel download across our 12-worker pool, totaling 77 MB of media alone.

Navigating the SPA architecture meant our scroll-to-reveal strategy had to account for intersection observer thresholds, dynamically injected DOM nodes, and CSS transitions that gate visual content behind JavaScript execution. Several sections rendered empty on initial scroll and only populated after specific interaction events fired. The static rebuild required neutralizing these conditional renders while preserving the visual structure they produced. The final capture demonstrates that even the most technically complex marketing sites can be deconstructed into their visual components — and that understanding the engineering is prerequisite to preserving the design.