Nextdoor Design System

Nextdoor's homepage makes a move that few social products attempt: it puts a full-bleed photograph of an actual park in the hero slot, and places the sign-up form over it as a floating white card. The headline reads "Discover your neighborhood" in a 22px semi-condensed weight of the brand's proprietary Saans typeface. There is no gradient, no illustrated scene, no abstract shape. The implication is that the neighborhood is already there, and the product is the window. Where Facebook's marketing surface uses studio photography of product UI and Instagram leans on a gradient-branded icon wall, Nextdoor bets on documentary photography of public outdoor space.

The brand voltage is a single forest green — saturated and unmistakably outdoorsy — wired into every interactive surface: the logo mark, the primary CTA button in the hero card, and the "Join Nextdoor" pill in the mid-page feature row. Every other surface on the page is white or a blue-gray near-ink. The typography runs on Saans, a custom variable sans, at fractional weights that don't correspond to the CSS standard steps — 420 for body, 620 for headlines and labels, 700 for bold emphasis. The weight names suggest a variable font axis, and the result is a type hierarchy that feels calibrated rather than pulled from a preset.

Feed this file to an AI coding tool and it reproduces Nextdoor's moves: forest-green single-voltage on white, floating card over photograph for the hero, Saans-equivalent variable weight typography, and full-pill rounding reserved for CTAs while cards use the 12px contained tier. The one distinctive bet worth noting: the photo-as-hero strategy only reads as "neighborhood authenticity" when the photography itself is warm, outdoor, and non-staged — substitute a studio shot of a phone screen and the visual argument evaporates entirely.