---
name: Fathom
description: "The site is a prime example of a clean, focused SaaS design that uses simplicity and whitespace to communicate trust and ease of use."
version: alpha

colors:
  background: "#F7F8F7"
  primary: "#181B19"
  secondary: "#636965"
  tertiary: "#846BFF"
  neutral: "#B0B5B2"
  line: "rgba(24, 27, 25, 0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A simple, privacy-first Google Analytics alternative.

*A calm, minimalist dashboard for web analytics that prioritizes privacy over complexity.*

## Colors

Neutral, high-contrast palette with a single vibrant purple accent for primary actions.

- **Background (`#F7F8F7`)** — uses `bg` token
- **Primary text (`#181B19`)** — uses `ink` token
- **Secondary text (`#636965`)** — uses `ink-soft` token
- **Accent (`#846BFF`)** — uses `accent` token
- **Muted (`#B0B5B2`)** — uses `muted` token
- **Borders (`rgba(24, 27, 25, 0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Use -webkit-font-smoothing: antialiased for crisp text rendering.
- Limit line length to approximately 680px for optimal readability.
- Use monospace font for code snippets or data tables.

## Layout

Single-column centered layout with a 2-column feature grid below the hero.

*Rhythm:* 4px base grid with generous whitespace to emphasize simplicity.

## Elevation & Depth

- None: None
- Borders: 1px solid rgba(24, 27, 25, 0.1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Solid rounded buttons with high contrast, primary uses accent color, secondary uses a dark neutral.
- **card:** Clean cards with minimal borders or subtle shadows, used for feature highlights and data tables.
- **chip:** Small rounded tags with light background and dark text, used for labels like 'New'.
- **input:** Simple text inputs with clean borders and subtle focus states.
- **hero:** Large, bold typography on the left with a data visualization or mock-up on the right.

## Do's and Don'ts

**Don't:**
- Don't use complex gradients or heavy textures — the screenshot shows a clean, flat background.
- Don't use bright, multi-color palettes — the screenshot uses a single purple accent.
- Don't use decorative, script, or overly stylized fonts — the screenshot uses a clean sans-serif.
- Don't overcrowd the UI with too many elements — the screenshot prioritizes whitespace and clarity.
- Don't use dark mode as the default — the screenshot shows a light-themed interface.
- Don't use rounded corners on all elements — the screenshot uses sharp corners for some UI elements.

---

## System Prompt (paste into AI agent)

```
Fathom Analytics is a privacy-first, simple alternative to Google Analytics. The design uses a clean, light palette with a #F7F8F7 background and #181B19 text, accented by a single high-chroma purple (#846BFF) for primary CTAs. Typography is a humanist sans-serif category, prioritizing readability and clarity. Key critical donts include: do not use complex gradients or heavy textures, do not use bright multi-color palettes, and do not overcrowd the UI with elements. The overall feel is calm, trustworthy, and focused on ease of use.
```