Fathom AI

Overview

Fathom AI embodies a "Cosmic Minimalism" aesthetic—a design philosophy that pairs a deep, space-like dark canvas with vibrant, high-contrast accent colors to create an energetic yet focused user experience. The brand serves professionals who need to capture meeting intelligence without distraction, transforming complex call data into actionable insights. The visual language evokes clarity through contrast: pure black backgrounds (#000000) provide the stage, while cyan (#00beff), purple (#9600ff), and yellow (#fff58c) accents punctuate key interactions and data points. The emotional response is one of technological sophistication paired with approachability—the UI feels advanced but never cold.

Fathom's voice is direct, confident, and slightly irreverent. The tone avoids corporate jargon; instead, it speaks in concrete, action-oriented language. Example: "Fathom summarizes your meetings so you can focus on the conversation. Now available bot-free." The brand personality is that of a capable AI assistant—intelligent, responsive, and genuinely helpful—rather than a generic SaaS product. Typography uses Sora (a modern, geometric sans-serif) at light weights (300) for display text, creating an airy, forward-looking impression while maintaining legibility against the dark background.

Colors

The color system is built on a dark-first foundation with three strategic accent colors that drive interaction and visual hierarchy. **Primary (Cyan #00beff)** is the dominant action color, used exclusively for call-to-action buttons, interactive links, focus states, and key UI affordances. Its high saturation and cool temperature create immediate visual pop against the black background, making it unmissable. **Secondary (Purple #9600ff)** serves as a supporting accent for badges, highlights, and secondary information layers—it adds visual richness without competing with primary actions. **Tertiary (Yellow #fff58c)** is reserved for accent text, highlights, and data callouts that demand attention (e.g., "Now available bot-free"). The surface stack uses pure black (#000000) as the base, wit

Typography

The type system uses Sora across all scales, chosen for its geometric clarity and modern proportions. Display text (75px, 300 weight) is set at a light weight to create visual breathing room and emphasize the brand's forward-thinking nature; this is paired with a tight line-height (84px, -0.03em letter-spacing) to maintain hierarchy without heaviness. Headlines (48px–32px, 600 weight) shift to a bolder weight for emphasis, while body text (17px–18px, 400 weight) remains neutral and readable. The type scale follows a 1.5x progression, ensuring clear visual separation between levels. For small labels over busy backgrounds (e.g., badges on dark cards), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to ensure legibility. Interactive text (buttons, links) uses 600 weight at 14px with 0.01em le

Layout

The layout system uses a 12-column grid with a max-width of 1280px, providing flexibility for both desktop and tablet experiences. The page rhythm is driven by a semantic spacing scale: lg (40px) separates major sections (hero, features, testimonials), md (24px) creates breathing room within sections, and sm (12px) handles component-level spacing. The dark background allows for generous white-space without feeling empty—negative space becomes a design asset rather than a liability. Container max-widths vary by section (990px for content-heavy areas, 1550px for full-bleed hero), but the gutter remains consistent at 24px on all sides. The hero section uses a starfield background (subtle animated dots) to reinforce the "cosmic" aesthetic, while content sections sit on the pure black base. Mar

Elevation & Depth

Depth in Fathom's design is achieved through a combination of subtle shadows, glass-morphism, and color layering rather than traditional drop shadows. **Level 1 (Base):** Pure black background (#000000) with optional starfield texture overlay (opacity 0.3–0.5). **Level 2 (Standard Cards):** backdrop-filter: blur(12px), background: rgba(0, 0, 0, 0.4), border: 1px solid rgba(255, 255, 255, 0.1), box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This creates a frosted-glass effect that feels elevated without being visually heavy. **Level 3 (Modals/Elevated Surfaces):** backdrop-filter: blur(20px), backg

Shapes

The shape language follows a "Soft-Technical" philosophy: rounded corners are generous but not organic, signaling modernity and approachability while maintaining a sense of precision. **Buttons and CTAs** use full radius (border-radius: 56px / 9999px), creating pill-shaped affordances that feel friendly and clickable. **Cards and containers** use lg radius (1rem / 16px), providing enough softness to feel contemporary without appearing playful. **Input fields** use md radius (0.75rem / 12px), slightly tighter than cards to signal functional purpose. **Badges and small UI elements** use full rad

Components

Action Elements Buttons are the primary driver of interaction. **Button-Primary** uses cyan (#00beff) background with black text, 16px vertical padding, 32px horizontal padding, and full radius (56px). On hover, the background shifts to #0088bb (primary-container) over 180ms ease, maintaining the cyan family while providing tactile feedback. **Button-Secondary** mirrors the primary button's dimensions but uses a transparent background with a 2px cyan border and cyan text; on hover, it gains a subtle rgba(0, 190, 255, 0.1) background without changing the border, creating a "fill" effect. Both buttons use 600 font-weight (label-md typography) to signal interactivity.

Containers & Surfaces **Card-Glass** is the workhorse container component: rgba(0, 0, 0, 0.4) background with backdro

Do's and Don'ts

**Do**

• Do use cyan (#00beff) exclusively for primary CTAs and interactive affordances—it's the brand's signature accent and must remain visually distinct.
• Do maintain the dark background (#000000) as the canvas; it's not a limitation but a strategic choice that makes accent colors sing and reduces eye strain.
• Do apply glass-morphism (backdrop-filter: blur(12px), rgba backgrounds, subtle borders) to all elevated surfaces—it reinforces the modern, tech-forward aesthetic.
• Do use Sora at light weights (300) for display text to create visual breathing room and premium feel; reserve 600 weight for headlines and interactive elements.
• Do transition all hover/focus states over 180–200ms ease to provide responsive, polished feedback without feeling sluggish.

**Don't**

• Don't use primary cyan for anything other than interactive elements—it must remain the visual anchor for user actions.
• Don't apply hard shadows (box-shadow: 0 10px 30px rgba(0,0,0,0.5)) to cards; use the specified subtle shadows (0 3px 8px) to maintain the glass-morphic aesthetic.
• Don't mix typefaces—Sora is the only font family used across the system; avoid Arial or system fonts in production.
• Don't use pure white (#ffffff) for text; always use off-white (#faf5f5) to reduce eye strain and maintain warmth against the black background.
• Don't add rounded corners tighter than 0.5rem (8px) to buttons or cards—the soft-technical philosophy requires generous rounding to feel approachable.