The visual approach
Figma's web presence is built on a disciplined four-color system that directly references the tool itself. The brand palette—--color-brand-red: #F24E1E, --color-brand-purple: #A259FF, --color-brand-blue: #1ABCFE, --color-brand-green: #0ACF83—maps to the cursor colors users see in multiplayer editing sessions. This isn't decoration. It's a visual mnemonic that connects the marketing experience to the product's core collaborative promise.
The primary interface color sits at --color-primary: #5551FF, a slightly desaturated purple that anchors interactive elements without competing with the louder brand hues. Typography leans entirely on Inter, set at a tight range of weights and sizes: --font-display at 72px/700 for hero statements, --font-heading-xl at 48px/600 for section titles, and --font-body at 16px/400 for running text. The restraint is notable. No decorative serif, no contrast typeface, no playful display cuts. The system assumes Inter's variable weight range will carry the hierarchy.
Grayscale sits at three stops—--color-gray-900: #2C2C2C, --color-gray-600: #666666, --color-gray-300: #E5E5E5—which creates enough contrast for layering cards and borders without introducing mid-tone clutter. The palette is lean enough to memorize, which matters when a design system needs to scale across product, marketing, and community surfaces.
What works
The motion system does the real work. Hero sections animate with a translate-y-8 opacity-0 to translate-y-0 opacity-100 fade-up over 500ms ease-out when entering the viewport. Pricing cards and feature grids stagger their entrance with +80ms delays per item, which creates a cascading reveal that guides the eye left-to-right without requiring a single arrow or annotation.
Carousel slides move horizontally at 400ms with cubic-bezier(0.25, 0.8, 0.25, 1), a curve that starts aggressive and settles smoothly. This is faster than the typical 600–800ms carousel seen on SaaS sites, and the choice is intentional. Figma's product is about real-time collaboration; the marketing site borrows that sense of immediacy. Background thumbnails add subtle parallax at 0.5× scroll speed, which introduces depth without the nausea-inducing effect of full-speed parallax.
Hover states follow a consistent lift pattern: primary buttons translate up 2px with shadow expansion over 200ms ease-out. Toggle switches slide their knob with 240ms ease-in-out while crossfading the background color. Tab indicators slide horizontally under the active item at 300ms using cubic-bezier(0.4, 0, 0.2, 1), Apple's standard easing curve. These durations sit in the 200–300ms range where motion feels responsive rather than sluggish or twitchy.
The navigation bar adds backdrop-blur-md and a subtle shadow once the user scrolls past 80px. This is a small detail, but it signals a state change without blocking content or introducing a jarring color shift. The blur keeps the nav legible over varied background imagery while maintaining a sense of layering.
What a builder can borrow
Start with the stagger delay. If you're animating a list or grid, don't make everything appear at once. Add 60–100ms per item, capped at five or six items to avoid a slow reveal. Figma uses +80ms, which means the fourth card in a row appears 240ms after the first. That's enough to create rhythm without making users wait.
Use translate-y values between 8–16px for fade-up animations. Anything larger reads as a slide; anything smaller is imperceptible. Pair with opacity transitions and keep the duration at 400–500ms with ease-out easing. This combination feels natural because it mimics how objects settle under gravity.
Borrow the two-tier easing strategy: ease-out for entrances (cubic-bezier(0.25, 0.8, 0.25, 1)) and ease-in-out for toggles and state changes (240ms). Entrances benefit from a fast start that decelerates; toggles need symmetry so the motion doesn't feel lopsided when reversed.
Steal the hover lift pattern, but apply it selectively. Primary CTAs get the -translate-y-0.5 with shadow expansion; secondary buttons get a border or text color shift. If everything lifts, nothing feels elevated. Figma reserves the lift for black-fill buttons, which makes those actions feel primary without requiring a size increase or color change.
Finally, consider the parallax scroll at 0.5× speed for background elements. Full-speed parallax is disorienting; half-speed adds depth without making users feel like they're controlling two layers at once. Apply it to decorative elements, not text or interactive components.