<!-- Generated by ExtractVibe — https://extractvibe.com/brand/kobbe.io -->
<!-- Extracted: 2026-08-14T15:48:46.446Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Kobbe: Web analytics that respect your visitors"
description: "Kobbe projects a calm, trustworthy, and utilitarian vibe, prioritizing clarity and privacy over flashy marketing. The aesthetic is grounded in a muted, earthy palette with a focus on readability and functional simplicity, appealing to users who value data integrity and understated design."
colors:
  primary: "#0b313e"
  surface: "#eee7e3"
  border: "#eee7e3"
typography:
  headline-lg:
    fontFamily: "LTRemark"
    fontSize: "36px"
    fontWeight: "400"
    lineHeight: "40px"
  headline-md:
    fontFamily: "InterVariable"
    fontSize: "16px"
    fontWeight: "500"
    lineHeight: "24px"
  headline-sm:
    fontFamily: "InterVariable"
    fontSize: "16px"
    fontWeight: "500"
    lineHeight: "24px"
  body-md:
    fontFamily: "InterVariable"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "4px"
  md: "8px"
  lg: "14px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    rounded: "8px"
    padding: "0px 16px"
    fontSize: "12px"
    fontWeight: "500"
    borderWidth: "1px"
  button-ghost:
    rounded: "4px"
    padding: "6px 8px"
    fontSize: "12px"
    fontWeight: "500"
---

# Kobbe: Web analytics that respect your visitors — Design System

## Overview

Kobbe’s interface embodies a utilitarian calm, prioritizing data integrity and privacy over decorative flair. The design atmosphere is grounded in the archetypes of The Sage and The Caregiver, projecting trustworthiness through clarity and functional simplicity. Like Linear and Arc Browser, the UI minimizes cognitive load, allowing users to focus entirely on the analytics without distraction. The aesthetic is minimalist and editorial, avoiding the flashy, high-contrast tropes common in SaaS marketing. Instead, it offers a serene, earthy environment that respects the user’s attention and their visitors’ privacy. The design is not aggressive, noisy, or overly complex. It does not rely on dark mode gimmicks or neon accents. It is a quiet, reliable workspace for serious analysis, where every element serves a clear purpose. The visual language is restrained, using ample whitespace and subtle textures to create a sense of spaciousness and order. This approach fosters a feeling of control and transparency, aligning with the brand’s core promise of respectful analytics. The overall experience is one of understated confidence, where the data speaks for itself without the need for visual shouting. By stripping away non-essential elements, Kobbe creates a focused environment that feels both professional and humane. This design philosophy ensures that the tool remains accessible and easy to navigate, even for users who are not design experts. The result is an interface that feels like a trusted partner in understanding web traffic, rather than just another dashboard to manage.

**Key characteristics:**

- Vibe — privacy-first, utilitarian, calm, trustworthy, minimalist, editorial
- Archetypes — The Sage, The Caregiver
- Comparable to — Plausible Analytics, Fathom Analytics, Linear, Arc Browser
- Design era — contemporary-minimal
- Emotional tone — reassuring-professional
- Target audience — Privacy-conscious developers, product managers, and small-to-medium business owners who prefer straightforward, non-intrusive tools.
- Visual energy — 3/10 (calm/understated)

## Colors

The palette utilizes muted, earthy tones to establish a calm and trustworthy atmosphere. The primary color #0b313e provides a deep, stable foundation that conveys authority and seriousness without being harsh. The surface color #eee7e3 offers a warm, organic backdrop that reduces eye strain and enhances readability. This combination avoids the coldness of pure white or the intensity of stark black, creating a balanced, grounded visual experience. The colors work together to signal privacy and data integrity, reinforcing the brand’s utilitarian and minimalist character through subtle, natural hues.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#0b313e` | Charcoal |
| background | `#eee7e3` | Linen |
| border | `#eee7e3` | Linen |

## Typography

The type system relies on InterVariable for its clarity and versatility, ensuring excellent readability across all screen sizes. LTRemark is used sparingly for editorial accents, adding a touch of sophistication and human touch to key headings. The hierarchy is strict and logical, using weight and size to guide the eye without introducing unnecessary visual noise. This approach communicates precision and trust, aligning with the brand’s focus on data integrity. The consistent use of clean, modern sans-serif fonts reinforces the utilitarian vibe, ensuring that information is presented in a straightforward, accessible manner.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| InterVariable | body | self-hosted | 400, 500, 600 |
| LTRemark | heading | self-hosted | 400 |
| InterVariable | heading | self-hosted | 500 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | LTRemark | 36px | 400 | 40px | — |
| Heading 3 | InterVariable | 16px | 500 | 24px | — |
| Heading 4 | InterVariable | 16px | 500 | 24px | — |
| Body | InterVariable | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 12, 12, 0.1) 0px 8px 28px 0px, rgba(15, 12, 12, 0.12) 0px 12px 18px -6px, rgba(15, 12, 12, 0.1) 0px 0px 2px 0px, rgba(15, 12, 12, 0.1) 0px 1px 3px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 12, 12, 0.12) 0px 12px 36px 0px, rgba(15, 12, 12, 0.14) 0px 18px 24px -8px, rgba(15, 12, 12, 0.1) 0px 0px 2px 0px, rgba(15, 12, 12, 0.1) 0px 2px 4px 0px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 12, 12, 0.06) 0px 3px 14px 0px, rgba(15, 12, 12, 0.08) 0px 6px 8px -4px, rgba(15, 12, 12, 0.09) 0px 0px 2px 0px, rgba(15, 12, 12, 0.09) 0px 1px 2px 0px` |
| button | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(1 0 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px` |

## Shapes

Border-radius scale:

- `sm` — 4px
- `md` — 8px
- `lg` — 14px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Radius — `8px`
- Padding — `0px 16px`
- Font size — `12px`
- Font weight — `500`
- Sample copy — "Start a 15-day free trial"

**Ghost**

- Radius — `4px`
- Padding — `6px 8px`
- Font size — `12px`
- Font weight — `500`
- Sample copy — "Add a note"

## Do's and Don'ts

### Do

- Use InterVariable (weights 400, 500, 600) for all body text and secondary headings, maintaining a strict 24px line-height for optimal readability.
- Use LTRemark (weight 400) for primary H1 headings in sentence-case, ensuring a distinct typographic hierarchy that feels editorial yet modern.
- Apply the primary brand color #0b313e (dark teal) for key text elements, links, and primary interactive states to establish authority and trust.
- Set the global background to #eee7e3 (warm off-white) to create a soft, paper-like canvas that reduces eye strain compared to pure white.
- Style primary CTA buttons as outlines using #0b313e, with 8px border-radius, 0px vertical padding, and 16px horizontal padding for a clean, low-friction look.
- Style secondary/tertiary actions as ghost buttons with 4px border-radius, 6px vertical padding, and 8px horizontal padding, using subtle text colors.
- Maintain a strictly flat design aesthetic: use 0px shadows and 0 gradients on all elements, relying on color contrast and spacing for visual separation.
- Use a base spacing unit of 2px for all margins and paddings to ensure precise, grid-aligned layouts without visual clutter.
- Keep all heading text in sentence-case (capitalizing only the first word and proper nouns) to maintain a conversational yet professional tone.
- Avoid emoji and excessive punctuation in copy; use frequent but measured exclamations only where enthusiasm is strictly necessary for clarity.

### Don't

- Do not use title case for headings; the brand strictly adheres to sentence-case conventions.
- Do not apply any drop shadows, box-shadows, or multi-layer depth effects to cards, buttons, or elements; the design is entirely flat.
- Do not use gradients of any kind for backgrounds, buttons, or text; maintain solid, flat color fills.
- Do not use serif fonts for body text or UI elements; reserve LTRemark exclusively for primary headings.
- Do not use bright, saturated primary colors like pure blue or red; stick to the muted #0b313e and warm #eee7e3 palette.
- Do not use pill-shaped (fully rounded) buttons; maintain the specified 4px and 8px border-radii for a slightly structured, editorial feel.
- Do not use emoji in marketing copy or UI labels; the brand relies on clear, jargon-moderate language instead.
- Do not use exclamation points excessively in technical documentation or feature descriptions; reserve them for high-impact value propositions.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 3/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 4/10 | enthusiastic |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 7/10 | accessible |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — low-friction action-oriented imperatives
- Rhetorical devices — repetition, parallelism

### Sample copy

> Privacy-first web analytics with traffic and revenue in one place.

> Every view you open should answer a real question.

> Private by default. Set up in seconds.

> See when visitors convert.

> Back to marketing by 3:53pm

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | ico | [link](brands/kobbe.io/logo-0.ico) | 95% |
| favicon | — | png | [link](brands/kobbe.io/logo-1.png) | 95% |
| favicon | — | png | [link](brands/kobbe.io/logo-2.png) | 95% |
| favicon | — | png | [link](brands/kobbe.io/logo-3.png) | 95% |
| favicon | — | png | [link](#) | 95% |
| favicon | — | png | [link](#) | 95% |
| primary | color | svg | [link](brands/kobbe.io/logo-6.svg) | 85% |
| primary | color | svg | [link](brands/kobbe.io/logo-7.svg) | 85% |
| primary | color | svg | [link](brands/kobbe.io/logo-8.svg) | 85% |
| primary | color | svg | [link](brands/kobbe.io/logo-9.svg) | 85% |
| primary | color | svg | [link](brands/kobbe.io/logo-10.svg) | 85% |
| primary | color | svg | [link](brands/kobbe.io/logo-11.svg) | 85% |

## Sources

- Live brand page — https://extractvibe.com/brand/kobbe.io
- Raw JSON — https://extractvibe.com/api/brand/kobbe.io
- DESIGN.md (this file) — https://extractvibe.com/api/brand/kobbe.io/design.md
- Extracted — 2026-08-14T15:48:46.446Z
- Generator — ExtractVibe vv1
- Quality score — 90/100