gather.town

Gather sells a virtual office by making its marketing page feel like a calm, well-lit room rather than a pitch. Everything sits on a single warm off-white ground (#f7f5f4, 72% of the pixels) with no section stripes and no dividers — depth comes only from white cards floating at generous radii and from near-black product frames dropped in like windows. The type does almost all of the work: Graphik Semibold at 64px with a brutal -3.2px of tracking (about -0.05em) and a 1.15 line height, centered over a 20/30 body line, so the headline reads as one tight typographic block instead of a banner. The accent is a single violet (#5f4dc5) that appears only in eyebrows, small links and the primary button, which lets the page stay effectively monochrome while never feeling corporate-cold. The warmth comes from elsewhere: real photographic faces in the hero's meeting grid, a 16-bit pixel-art office map further down, green status dots, and a scattering of emoji in the microcopy. That mix — restrained Swiss-ish typography and neutral ground, plus deliberately unserious illustration — is the whole trick, and it is why a remote-work tool reads as human rather than as enterprise software.

Build on one warm off-white ground, #f7f5f4, for the entire page — no alternating section backgrounds, no full-width color bands, no horizontal rules. Surfaces are pure white cards on that ground; the only dark surfaces are product screenshots and the closing CTA/footer slab.

Type. One grotesque for everything (Graphik, or Inter/Söhne/Neue Haas as a substitute). Display: 64px / 73.6px, semibold, letter-spacing -3.2px (-0.05em). Section headings: 56px / 64.4px, semibold, -2.8px. Card and feature titles: 16px / 19.2px, semibold, -0.32px — deliberately small, so the jump from heading to body is a cliff, not a ramp. Body: 20px / 30px, regular, -0.4px, in a gray around #545155. Micro labels, avatars, chips: 12px / 16px at weight 500. Never set a heading above 400–600 weight; the tracking, not the weight, supplies the density.

Color roles. Ink #171311; secondary text #545155; tertiary and captions #78777a; hairlines #cfd1d4 at low opacity. Exactly one accent, a violet #5f4dc5, spent only on eyebrows, inline links, the primary button fill and small icons. Add one status green used solely as a 6px dot. Resist any second brand color: warmth must come from imagery, not from the palette.

Shape and spacing. A radius scale of 8 / 10 / 12 / 16 / 32px: 8–10px for chips and buttons, 12px for media tiles and product frames, 32px for the big content cards. Buttons are ~28–44px tall with 4px 12px (compact) to 14px 28px (primary) padding and a 9px radius. Borders are 1px hairlines at ~10% ink, or absent entirely. Shadows are near-invisible — at most 0 1px 2px rgba(0,0,0,.04) under a floating pill; separation comes from the white-on-warm-gray value step, not from elevation. Sections breathe at 120–200px of vertical padding; the content column caps around 1120–1240px and hero copy is centered at roughly a 60-character measure.

Composition moves that make it recognizable. (1) Center-align the hero stack — pill, headline, sub, single button — then let the product media go full column width immediately below it. (2) Put a small violet eyebrow word above every section heading and center both. (3) Give every feature block a control the visitor can press — a segmented switcher, a tab row, an accordion — so the page reads as a demo rather than a brochure. (4) Pair restrained typography with unserious illustration: pixel-art, isometric scenes, real photographic faces, an emoji in the microcopy. (5) Cut long lists off with a gradient fade to the page ground and a single centered pill to expand.

Motion. Short and small: 150–250ms ease-out. The header fades its white bar in on scroll; cards lift ~2px with a barely-there shadow on hover; the segmented switcher slides its active pill; media tiles cross-fade when the tab changes. Nothing parallaxes and nothing slides in from off-screen.