kobbe.io

Kobbe sells privacy-friendly web analytics with a page that refuses to look like an analytics product. The ground is warm paper (#f9f8f7), the type is Inter at a single 36px/45px weight-400 size with −0.9px tracking, and the hero is not a headline over a screenshot but one long sentence set flush-left in two inks — near-black (#181919) for the claim, warm gray (#938f89) for the rest — with nothing else in the top 700px. What carries the personality is a hand-drawn ink-and-watercolour frieze of townsfolk walking a stone quay across the full width of the fold: a wordless "real visitors" illustration where every other analytics site would put a chart. Further down the product appears as a huge, quietly scaled-down dashboard mock (#f9f8f7 sidebar, hairline tables, one pink refund figure) sitting in a tonal panel a shade darker than the page, the paragraphs above and below it blurring in and out as a scroll reveal. Navigation is two pill groups in a slightly darker gray on the same paper, the only saturated object being the near-black "Try free for 15 days" button. Radii sit at 10px everywhere. The effect is a small, honest European utility with a picture-book heart — Swiss restraint in the type, organic warmth in the drawing.

Set the page on warm paper: background #f9f8f7, never pure white. Use Inter for everything. Display and body share one size — 36px/45px, weight 400, letter-spacing −0.9px — and hierarchy comes from ink color only: #181919 for the statement, #938f89 for the supporting clause, run together as one paragraph. Body paragraphs 18px/28px, weight 500, in #565655. Keep the left margin fixed at ~108px and let text columns stop around 60% of the width; leave the right side empty. Build chrome from tint, not lines: nav groups and cards are the paper darkened one step (#f1efec to #ecebe8), radius 10px, no border, no shadow. Allow exactly one dark object per viewport — a #181919 pill button with white 14px text, radius 10px, 12px×16px padding. For imagery, commission or draw a horizontal ink-line illustration with light watercolour fill in muted earth tones (grays, ochres, one brick red) and place it full-bleed at the bottom of the fold; treat product screenshots as scaled-down artefacts inside a tonal panel, never as a hero. Reserve saturated color for data that means something (a red negative number, a single underlined link). Reveal sections on scroll by blurring the adjacent text rather than fading it. The tone throughout is plain-spoken and humane: short declarative sentences, no exclamation marks, no gradients, no icons larger than 16px.