# kobbe.io

Source: https://kobbe.io/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, editorial, organic, calm, human, trustworthy, warm, confident
Colors: #f9f8f7, #d3d1ce, #b2b0ab, #938f89, #757370, #313131, #565655, #181919
Type (h1): Inter · 36px/45px · 400 · tracking -0.9px — "Real visitors deserve real numbers. At Kobbe, we follow the money, not the peopl"
Type (h2): Inter · 21.6px/27px · 400 · tracking -0.54px — "Numbers you can finally trust, with every bot filtered out. Modern bots run real"
Type (h3): Inter · 16px/24px · 400 — "How does event-based pricing work?"
Type (body): Inter · 18px/28px · 500 — "Funnels from pages and events you already collect"
Type (button): Inter · 14px/20px · 500 — "Try free for 15 days"
Button (primary): "Try free for 15 days" — fill #2b2b2b, text #faf9f8, radius 8px, border 0px, padding 6px 12px, height 32px, type 14px/500
Button (secondary): "Menu" — text #2b2b2b, radius 0px, border 0px, padding 6px 10px 6px 6px, height 32px, type 14px/500
Radii: 10px (13), 8px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/kobbe-io/hero.webp?v=ae0071d9
- Page crop (mid-1): https://media.lvly.design/library/kobbe-io/mid-1.webp?v=e32a4707
- Page crop (mid-2): https://media.lvly.design/library/kobbe-io/mid-2.webp?v=56a0af45
- Hero (mobile): https://media.lvly.design/library/kobbe-io/mobile-hero.webp?v=a2ad5c8c
- Full page (desktop): https://media.lvly.design/library/kobbe-io/full.jpg?v=23cd28bb
- Full page (mobile): https://media.lvly.design/library/kobbe-io/mobile-full.jpg?v=38dc91ae
- Clip preview (mp4): https://media.lvly.design/library/kobbe-io/video-pe89bt.preview.mp4?v=ec6b16f1

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.

## Steal-worthy details

- Two-tone running sentence as the hero: the claim in ink, the explanation in warm gray, same size and weight, no separate heading/subheading hierarchy.
- A full-bleed hand-drawn illustration strip anchored to the bottom of the first viewport, standing in for the usual product screenshot.
- Paper ground #f9f8f7 with pill nav groups in a barely-darker gray (#f1efec-ish) — layering by tint only, no borders, no shadows.
- The dashboard mock rendered small and in full detail inside a tonal panel, so it reads as an artefact rather than a hero shot; its one color is the red refund number.
- Scroll-driven paragraph reveal: text above and below the focus block is blurred, not faded, which keeps the page's texture while directing attention.
- Underlined inline links ("Revenue attribution") in the body copy doing the work of section CTAs.
- One dark CTA pill (#181919, white text, 10px radius) as the only high-contrast object on the page.

## Style recipe

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.