Fathom Analytics

---
version: alpha
name: Fathom Analytics landing-page reference
description: An approachable analytics landing page with a compact left-aligned text
  hero, hand-drawn cat-and-chart illustrations, charcoal actions, restrained purple
  accents and extensive customer proof.
colors:
  primary: '#333740'
  surface: '#FFFFFF'
  on-surface: '#1F2126'
  secondary: '#F2F4F7'
  accent: '#6858E8'
typography:
  headline-sample:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif
    fontSize: 56px
    fontWeight: 900
    lineHeight: 53.2px
    letterSpacing: -1.68px
  secondary-sample:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif
    fontSize: 24px
    fontWeight: 700
    lineHeight: 30px
  mobile-heading-sample:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif
    fontSize: 36px
    fontWeight: 900
    lineHeight: 34.2px
    letterSpacing: -1.08px
  paragraph-sample:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
---

# Fathom Analytics landing-page reference

## Overview

Observed at https://usefathom.com/ on 2026-09-19 at 1440px desktop and 390px mobile widths. An approachable analytics landing page with a compact left-aligned text hero, hand-drawn cat-and-chart illustrations, charcoal actions, restrained purple accents and extensive customer proof. This is an independent visual reference, not an official brand specification.

## Colors

Tokens record sampled CSS RGB values, converted to hex. Artwork and interface imagery contain additional colors; the tokens are a compact reference palette, not an exhaustive brand system.

## Typography

The first measured headline sample uses -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif at 56px, weight 900, line height 53.2px and tracking -1.68px. The YAML records this sample, a secondary heading, a mobile heading and a substantial paragraph where available. These are observed elements, not an invented universal scale. Font-family declarations are measured; exact glyph rendering depends on font availability and licensed assets.

## Layout

Use a relatively narrow centered content column. In the hero, pair a bold two-line left headline and explanatory paragraphs with a small chart illustration on the right. Center the trial/demo actions below. Follow with a two-column illustrated benefit area, a smaller feature grid, setup steps, dashboard screenshot, logo proof, testimonial columns, FAQ rows and closing action.

Collapse the desktop navigation into a right menu icon. Use 18px side gutters and a 354px headline block. The illustration moves below the text; the two actions become wide stacked buttons. The headline changes from 56px to 36px while keeping tight leading. No horizontal document overflow was detected at either inspected width. Intermediate breakpoints and full mobile scroll behavior were not visually reviewed. Section spacing and component arrangements are visual observations rather than an exhaustive measured spacing scale.

## Elevation & Depth

Most content sits directly on white without card shadows. A contained analytics window and a few pale callout panels provide just enough separation. Exact shadow values were not measured.

## Shapes

Mix simple rounded rectangular controls with informal line-art cats and rounded pale illustration backplates. Keep testimonial portraits small and circular. Radius descriptions are visual estimates.

## Components

Retain the explanatory copy and gentle illustrations as a pair. Keep the purple accent limited to selected links, graphics and calls to action. Do not replace the readable benefit grid with an oversized full-bleed dashboard hero. The desktop overview supplies the section ordering; the mobile evidence supplies only the inspected opening composition. Video previews and animation frames are static captured states, not a specification for playback.

## Do's and Don'ts

- Do preserve the reference-specific hierarchy, imagery and responsive ordering described above.
- Do maintain legibility when adapting the palette or replacing fonts.
- Don't infer hover, focus, open-menu or form-validation states: those interactions were not exercised.
- Don't treat a single capture as a complete animation or carousel specification.