Design teardown
Intercom
Warm paper, regular-weight giants, and tiny square marks instead of shadow.
intercom.com
Design character
Paper with square registration marks
A wide marketing page on white, broken by warm off-white bands. The hero is centered and flanked by cropped photos; later sections sit on a 12-column grid, left-aligned, with a product picture on one side. Headlines are large and regular, not bold. A gray opening phrase and a black remainder share one size. Body copy is a light serif, usually one or two sentences. Actions repeat as a black control and a thin outline. Blue and orange appear only as 8px and 4px squares. Copy is plain and specific: short headlines, a calm paragraph, then the same two actions again.
Typography
Three families, almost no bold. Saans carries headlines, navigation, and controls at 400, with 500 only on small group labels. Serrif at 300 sets the paragraphs. Saans Mono at 12px, uppercase and tracked out, labels sections and prices. Display leading is 1 and tracking is about -0.03em. Hierarchy is size and gray versus black, not weight.
Color system
White and a short run of warm grays. Text is off-black. The black control is the loudest fill. Blue and orange are marks, not backgrounds.
Spacing and geometry
A 4px grid. Controls are compact and 40px tall. Sections are loose, often 80 to 112px of vertical padding.
Layout
A fixed header, a centered hero with photos at the sides, then a wide 12-column story. Pricing returns to a centered slab.
Motion
Motion is a slow linear progress rule and a short color fade. Panels do not lift, bounce, or slide in.
UI fingerprint
- Headlines stay regular. The 80px and 54px lines are weight 400. A gray prefix and a black remainder, at the same size, replace bold.
- Paper steps, not cards. White, off-white, chalk, and clay change the surface. Corners stay square and shadows stay off.
- Squares do the pointing. An 8px blue square marks a frame or a list. A 4px orange square is the only other accent. Blue is also a 2px progress rule.
- A light serif under a sans headline. Serrif at 300 and 16px carries the paragraph. Saans Mono at 12px, uppercase, labels the section. The two actions repeat in the same black and outline pair.