# gather.town

Source: https://gather.town/
Captured: 2026-09-20
Tags: saas, landing, light, both, playful, corporate-clean, minimal, friendly, warm, human, optimistic, trustworthy
Colors: #f7f5f4, #cfd1d4, #171311, #78777a, #aba9a9, #545155, #3e3029, #8b8d93
Type (h1): Graphik Web Semibold · 64px/73.6px · 400 · tracking -3.2px — "A virtual workspace that feels refreshingly human"
Type (h2): Graphik Web Semibold · 56px/64.4px · 400 · tracking -2.8px — "What is a virtual office?"
Type (h3): Graphik Web Semibold · 16px/19.2px · 400 · tracking -0.32px — "See who's free"
Type (body): Graphik Web Regular · 20px/30px · 400 · tracking -0.4px — "The remote collaboration tool where you can meet, chat, and work together like y"
Type (small): Inter · 12px/16px · 500 — "Natasha"
Type (button): sans-serif · 12px/normal · 400 — "What's new"
Button: "What's new" — text #5f4dc5, radius 9px, border 0px, padding 4px 12px 4px 9px, height 28px, type 12px/400
Radii: 12px (30), 8px (21), 10px (12), 32px (10), 16px (8)

## Images

- Hero (desktop): https://media.lvly.design/library/gather-town/hero.webp?v=72330d03
- Page crop (mid-1): https://media.lvly.design/library/gather-town/mid-1.webp?v=9b015e7d
- Page crop (mid-2): https://media.lvly.design/library/gather-town/mid-2.webp?v=6a3d2f86
- Hero (mobile): https://media.lvly.design/library/gather-town/mobile-hero.webp?v=1a313a40
- Full page (desktop): https://media.lvly.design/library/gather-town/full.jpg?v=be533b8e
- Full page (mobile): https://media.lvly.design/library/gather-town/mobile-full.jpg?v=189df1a5
- Clip preview (mp4): https://media.lvly.design/library/gather-town/video-v5q1w0.preview.mp4?v=921cd0fc

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.

## Steal-worthy details

- Display type carries the page: 64px semibold at `-3.2px` letter-spacing and a 73.6px line height (1.15), centered and deliberately broken to two lines, so the headline is a dense rectangle of type with no rule, no eyebrow and no background behind it
- An announcement capsule floats above the headline instead of a banner across the top: white pill on the warm ground, 13px ink label, an emoji doing the illustration, and a circular chevron puck at the right edge that reads as "there is more" without a word of link text
- The hero preview is switchable — a white segmented capsule (Meetings / Chat / Activity) with a mint-tinted active segment and an icon before each label — placed *between* the copy and the media, so the product shot below is a tab panel rather than a static screenshot
- Product shots are shipped as near-black slabs with their own title bar (document name, a lock chip, view-mode icons at the right) at a 12px radius, edge to edge across the content column — the dark frame both crops the app honestly and gives the light page its only heavy mass
- One micro-component does all the status work: a hairline white pill holding a 6px green dot plus a 12px label, reused for "What's new" beside the wordmark, an "Event" eyebrow, and an "Available" marker mid-page — the dot is the only place a second accent color is allowed
- The header starts chromeless — transparent on the page ground, centered links at wide even gaps, no border — and on scroll collapses into a white bar pinned to the top with *rounded bottom corners only*, so the nav reads as a card sliding down rather than a sticky strip
- Cards nest at two radii: a ~32px white outer card holding a ~12px inner media tile with its own tinted inset, which keeps a big feature block from looking like a plain white rectangle and gives the media a visible mount
- The testimonial wall is a three-column masonry that simply fades into the page ground at the bottom, with a "View all testimonials" pill (plus-icon, white, hairline) sitting on the fade — no carousel, no pagination, and the cut-off rows advertise that there are more

## Style recipe

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.