The visual approach
Webflow's marketing site operates within a deliberately narrow visual range. The primary palette is anchored by #1856F5 (Primary Blue) against white (#FFFFFF) and true black (#000000), with gray values (#4A4A4A, #F7F7F7) used sparingly for hierarchy. The only soft accent is #EEF0FF (Blue 50), reserved for card backgrounds that need to separate from the page without introducing a second hue.
Typography is set in Aeonik, a geometric sans-serif that reads neutral enough for body copy but maintains enough personality at display scale. Headlines top out at 96px (6rem) with a line-height of 1.0, creating tight, compact lockups that feel engineered rather than expressive. The body sits at 16px with a generous 1.6 line-height—enough breathing room to keep product explanations legible without adding visual weight.
Spacing follows an 8px base unit, scaling to 16px, 24px, 32px, 48px, 64px, 80px, 120px. Border radii stay in the conservative range: 4px, 8px, 12px, 16px, 24px, with 9999px reserved for pill-shaped CTAs. The effect is a system that feels measured rather than opinionated, designed to recede behind the product screenshots and customer-built sites that dominate the page.
What works
The motion system does more work than the color or type. Pricing cards lift on hover with transform: translateY(-4px) and a deepened shadow (0 12px 24px rgba(0,0,0,0.12)), timed at 250ms ease-out—slow enough to feel intentional, fast enough to avoid lag. Primary CTAs use transition: all 200ms cubic-bezier(0.2, 0.8, 0.2, 1) with a brightness bump rather than a scale transform, which keeps the interaction subtle and avoids the bouncy, over-enthusiastic feel common in SaaS landing pages.
Text links pair an arrow glyph with a 3-4px rightward translate on hover, a small touch that reinforces directionality without requiring an underline or color shift. The sticky nav applies backdrop-filter: blur(12px) after 60px of scroll, maintaining legibility over page content without resorting to a solid background that would block the composition underneath.
The scroll behavior is conservative: hero text fades up with a 0→16px Y-transform on viewport entry, staggered by ~50ms per line. Card grids use fade + translate-up with an 80-120ms stagger between items. These are stock interaction patterns, but the timing keeps them from feeling automatic or template-driven.
What a builder can borrow
The most portable decision is the constraint on color. Webflow's single-accent palette (#1856F5 + neutrals) is a forcing function: every UI decision has to work within that range, which prevents the incremental bloat that happens when teams add a new blue for every new feature. If you're building a platform where user-generated content is the star, limiting your own palette to one or two hues keeps the chrome from competing.
The hover timing deserves study. The 200–250ms range with ease-out curves produces interactions that feel responsive without being twitchy. Compare that to the 100ms snaps common in component libraries, which often read as mechanical. The cubic-bezier(0.2, 0.8, 0.2, 1) curve on CTAs—fast start, slow finish—gives buttons a sense of weight that linear or ease-in-out transitions miss.
Finally, the spacing system's jump from 32px to 48px is worth noting. That 16px gap creates a meaningful difference between "related" and "separate" without requiring a designer to pick from a dozen intermediate values. Webflow's scale stops at 120px, which is tight for a marketing site but forces vertical rhythm decisions earlier in the design process. If you inherit a spacing system with 20+ tokens, collapsing it down to six or seven values will clarify your layouts faster than any grid.