# Fathom · Design system migration spec

> Source: https://usefathom.com  ·  Curated by OpenDesign  ·  en

> The site is a prime example of a clean, focused SaaS design that uses simplicity and whitespace to communicate trust and ease of use.

## 1. Identity DNA

Fathom's design language operates like a minimalist dashboard for web analytics, where every component serves the singular goal of presenting data with clarity and calm. The system is built on a foundation of privacy-first simplicity, treating trust as a structural element rather than a decorative one.

**One-liner:** A simple, privacy-first Google Analytics alternative.
**Keywords:** analytics · privacy-first · simplicity · clarity · trust
**Analogy:** A calm, minimalist dashboard for web analytics that prioritizes privacy over complexity.

## 2. Color

The color system is defined by its restraint: a neutral, high-contrast foundation of light gray and near-black, animated by a single high-chroma purple accent reserved for primary calls to action.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F7F8F7` | main background |
| `--ink` | `#181B19` | body text |
| `--ink-soft` | `#636965` | secondary text |
| `--muted` | `#B0B5B2` | placeholder |
| `--accent` | `#846BFF` | single accent |
| `--line` | `rgba(24, 27, 25, 0.1)` | divider |

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

The palette's discipline ensures that the accent color functions as a clear navigational beacon within a field of visual quiet.

## 3. Typography

Typography employs a humanist sans-serif category, chosen for its warm legibility and straightforward voice. A monospace counterpart is designated for data-rich contexts like code snippets and tables, reinforcing the system's functional honesty.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 500 | -1px | Hero headline |
| heading | 40px | 1.2 | 500 | -0.5px | Section headlines |
| body | 18px | 1.6 | 400 | normal | Primary body text |
| caption | 14px | 1.5 | 400 | normal | Supporting text and labels |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows a strict 4px base grid, applied with generous whitespace to let content breathe and to underscore the principle of simplicity.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with generous whitespace to emphasize simplicity.

## 5. Surfaces

Surfaces are rendered with a single, subtle elevation shadow for cards and a consistent 1px border using a semi-transparent dark tone. This creates depth and definition without introducing visual noise.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - None: None
- **Borders:** 1px solid rgba(24, 27, 25, 0.1)

## 6. Layout

The layout skeleton begins with a single-column, centered narrative flow to establish focus and readability. This structure then yields to a two-column grid for feature presentation, creating a clear visual hierarchy between storytelling and specification.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy is one of minimal, purposeful reinforcement. Animations are limited to subtle fade-ins and smooth state transitions, designed to guide attention and confirm interaction without becoming a subject of focus.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle fade-ins for content as it enters the viewport.
  - Smooth color and background transitions on interactive elements.

- **Hover:** Color changes or subtle background shifts on buttons and links.
- **Click:** Slight scale or color change to indicate active state.
- **Transition:** Standard 0.2s ease for color and text-decoration changes.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The voice is clear, direct, and reassuring, translating technical capability into benefit-driven statements that emphasize simplicity and privacy. Headlines are bold and declarative, while calls to action are framed as straightforward invitations.

- **Tone:** Clear, direct, and reassuring.
- **Headline style:** Bold, benefit-driven statements that emphasize simplicity and privacy.
- **CTA style:** Action-oriented phrases like 'Start free trial' with a lightning bolt icon.
- **Avoid:** Technical jargon or complex marketing speak. / Aggressive or high-pressure sales language. / Vague or overly abstract benefits.

### Don'ts
- ❌ 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.

The system deliberately avoids complex gradients, decorative typography, high-pressure language, and a dark default theme, rejecting visual and rhetorical clutter in favor of transparent utility.

## System Prompt (paste into AI tool)

```
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.
```