Kobbe

---
version: alpha
name: Kobbe
description: Privacy-first web analytics with traffic and revenue in one place
colors:
  primary: "#000000"
  secondary: "#0b313e"
  neutral: "#ffffff"
  brand-bank-vault: "#747474"
  brand-tangled-web: "#b2b2b2"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: InterVariable
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.19
  headline-md:
    fontFamily: LTRemark
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.33
  headline-sm:
    fontFamily: InterVariable
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.04
  headline-xs:
    fontFamily: InterVariable
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.21
  body-md:
    fontFamily: InterVariable
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  md: 10px
spacing:
  xs: 2px
  sm: 10px
  md: 20px
  lg: 32px
  xl: 100px
components:
  button-primary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 0px 16px
    height: 32px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 0px 16px
    height: 32px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 6px 10px 8px
---

# Kobbe: Dashboard-style landing built from white cards

## Overview

Serious, privacy-first and product-driven. The UI aims for calm clarity: white surfaces, black text, and minimal chrome so metrics lead. Audience is developers, marketers, and product teams who prefer dense information in compact, repeatable modules. Spacing is moderate-to-spacious at section level, with tighter rhythm inside cards for tables and KPIs.

## Colors

- Primary (#000000): Core text, icons, and high-emphasis labels.
- Secondary (#0b313e): Reserved accent for links, data highlights, or emphasis sparingly.
- Neutral (#ffffff): Page and card surfaces.
- brand-bank-vault (#747474): Secondary text such as meta, captions, and quiet labels.
- brand-tangled-web (#b2b2b2): Hairline dividers, borders, input outlines, and subdued UI chrome.
- surface (#ffffff): Default background surface (alias of Neutral).
- on-surface (#000000): Text and icon colour on surfaces (alias of Primary).

## Typography

- InterVariable — custom/self-hosted. Used for headline-lg (32px/700/1.19), headline-sm (23px/400/1.04), headline-xs (19px/400/1.21), and body-md (16px/400/1.5). If InterVariable cannot be loaded, use Inter (Google) as the first substitute, then Roboto (Google) as a secondary fallback.
- LTRemark — custom/self-hosted, not freely obtainable. Used for headline-md (27px/400/1.33) as a characterful display/subhead. Substitutes with similar tone: Source Serif 4 (Google), Crimson Pro (Google), or Domine (Google). Keep tracking tight and avoid heavy weights.
- Roles: headline-lg for hero and primary section leads; headline-md for marketing subheads; headline-sm for prominent numeric values and card titles; headline-xs for table headings and secondary section titles; body-md for all copy and UI text.

## Layout

- Spacing scale: xs 2px (hairline gaps), sm 10px (small insets), md 20px (default gaps and card gutters), lg 32px (block spacing, grid gutters), xl 100px (section separators/top and bottom padding).
- Use a responsive 12-column grid; align cards in 2–4 column tracks depending on width with md (20px) gaps.
- Inside cards, use the component padding 6px 10px 8px; stack titles with sm (10px) gaps and separate groups with md (20px).
- Section headers sit above content with lg (32px) spacing; long sections are separated by xl (100px).

## Elevation & Depth

- Shadows: sm provides a soft, multi-stop drop shadow for floating elements such as tooltips or popovers. md/lg/xl/inner are none.
- Default hierarchy uses tone and structure instead of depth: white cards on white page, separated by brand-tangled-web (#b2b2b2) borders and generous whitespace.
- Apply sm shadow only for overlays and pinned chart notes; avoid shadows on standard cards.

## Shapes

- Radius language is binary and intentional: sm 8px for interactive controls (buttons), md 10px for containers (cards, tiles). Link-style buttons remain square (0px).
- Keep shapes consistent across sections; avoid mixing radii within a single component.

## Components

Buttons
- Primary button: textColor #000000, 32px height, 0 16px padding, 8px radius. Pair with a white or very light surface and a subtle #b2b2b2 border when a stroke is needed.
- Secondary button: Same geometry as primary; use for less critical actions or as an outlined style.
- Link button: Text-only, square corners (0px), inline with copy.

Card
- Background #ffffff, text #000000, 10px radius, padding 6px 10px 8px. Default container for stats, tables, and charts.

### KPI Stat Card Row
- Use card tokens (10px radius). Labels in brand-bank-vault (#747474), values in headline-sm (23px Inter). Gaps: md (20px) between cards.

### Trend Chart with Pinned Note
- Chart inside a card; title in headline-xs (19px). Pinned tooltip or note uses the sm shadow for elevation. Horizontal spacing: md (20px); legend and toggles align with sm (10px) gaps.

### Breakdown Table Grid
- Two-to-three column grid of cards for Pages, Sources, Locations, and Devices. Table headers in headline-xs; rows in body-md. Use brand-tangled-web (#b2b2b2) for 1px dividers.

### Revenue Attribution Summary
- One card with key metrics (gross, net, attributed) using headline-sm for values and body-md for labels. Integration badges sit beneath with sm gaps.

### Funnel Steps Panel
- Three step tiles inside a single card; each step uses headline-xs for the path and body-md for counts. Maintain md gaps between steps.

### Web Vitals Panel
- Metric chips (LCP, INP, CLS, TTFB, FCP) arranged in a card grid. Values in headline-sm, notes in brand-bank-vault.

### Import History Uploader
- A single card with an upload zone and action group. Use body-md for helper text and md gaps between controls.

### Pricing Slider
- Card with a discrete slider and summary. Headline-sm for the tier number, body-md for price. Primary CTA uses the 32px/8px geometry.

## Do's and Don'ts

- Do separate long sections with xl (100px) spacing; keep interior card gaps at md (20px).
- Do use brand-bank-vault (#747474) for secondary text and brand-tangled-web (#b2b2b2) for borders and dividers.
- Do reserve the sm shadow for floating elements like chart notes or popovers, not for every card.
- Don't mix radii; use 8px on buttons and 10px on cards consistently.
- Don't rely on color alone for positive/negative deltas; pair symbols or labels with any contextual color.
- Don't introduce saturated accent backgrounds that would compete with the neutral card system.

## Agent Prompt Guide

Quick colour reference
- Text: #000000
- Background: #ffffff
- Border: #b2b2b2
- Accent: #0b313e

1) Build a KPI stat row
"Create a responsive row of 6 KPI cards using #ffffff backgrounds, 10px radius, and 1px #b2b2b2 borders. Each card has 6px 10px 8px padding. Set labels in Inter, 16px/1.5, color #747474; set values in Inter, 23px/1.04, color #000000. Use 20px gaps between cards and 32px above the row. Page background #ffffff."

2) Traffic chart section with pinned note
"Add a section title in Inter, 19px/1.21, color #000000 with 32px bottom margin. Place a chart container card (10px radius, #ffffff, 20px inner gap) and implement a tooltip using the sm shadow: rgba(15,12,12,0.1) 0px 8px 28px, rgba(15,12,12,0.12) 0px 12px 18px -6px, rgba(15,12,12,0.1) 0px 0px 2px, rgba(15,12,12,0.1) 0px 1px 3px. Use 1px #b2b2b2 gridlines."

3) Revenue attribution panel
"Create a white card (10px radius, 6px 10px 8px padding) with three key figures in Inter 23px/1.04 #000000 and labels in Inter 16px/1.5 #747474. Separate figures with 1px #b2b2b2 dividers and keep 20px gaps. Add an integrations row beneath with 10px icon gaps."

4) Pricing slider with CTA
"Build a pricing card using #ffffff, 10px radius and 20px vertical rhythm. Headline in Inter 23px/1.04 #000000; body copy in Inter 16px/1.5 #747474. Add a primary button 32px tall, 0 16px padding, 8px radius, text color #000000. Keep 32px spacing above/below the card."

## Similar Brands

- Plausible — privacy-focused analytics with a similarly clean, card-driven UI; Kobbe adds funnels and revenue attribution alongside traffic.
- Fathom Analytics — minimal, privacy-first dashboards; Kobbe's landing leans more into product modules and import tools.
- Simple Analytics — straightforward charts and tables; Kobbe's system feels denser and includes Web Vitals and attribution blocks.
- Umami — open-source analytics with white-card patterns; Kobbe's marketing page integrates pricing and integrations more prominently.

:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #0b313e;
  --color-neutral: #ffffff;
  --color-brand-bank-vault: #747474;
  --color-brand-tangled-web: #b2b2b2;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 32px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.19;
  --text-headline-md-size: 27px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.33;
  --text-headline-sm-size: 23px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.04;
  --text-headline-xs-size: 19px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.21;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-intervariable: "InterVariable";
  --font-ltremark: "LTRemark";

  /* Rounded */
  --radius-sm: 8px;
  --radius-md: 10px;

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 32px;
  --spacing-xl: 100px;

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 0px 16px;
  --button-primary-height: 32px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 0px 16px;
  --button-secondary-height: 32px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 6px 10px 8px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Privacy-first web analytics with traffic and revenue in one place",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.043,
          0.192,
          0.243
        ],
        "hex": "#0b313e"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "brand-bank-vault": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.455,
          0.455,
          0.455
        ],
        "hex": "#747474"
      }
    },
    "brand-tangled-web": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.698,
          0.698,
          0.698
        ],
        "hex": "#b2b2b2"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 32,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 100,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 10,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "InterVariable",
        "fontSize": {
          "value": 32,
          "unit": "px"
        },
        "fontWeight": 700
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "LTRemark",
        "fontSize": {
          "value": 27,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "InterVariable",
        "fontSize": {
          "value": 23,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "InterVariable",
        "fontSize": {
          "value": 19,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "InterVariable",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}