Fathom — design system & UI screens
This is a landing page for AI-powered creative collaboration and work-management software designed to help teams move work forward smarter and faster. The page uses a bold dark theme with vibrant cyan and magenta accents, featuring a hero section with product imagery, multiple value-prop sections with integrated visuals and callout text, and a rhythm of alternating dark backgrounds with glowing circular graphic elements. Navigation, feature blocks, and CTAs are layered throughout with generous whitespace and cinematic typography to emphasize innovation and modern teamwork.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/fathom.
Decoded design system
Fathom's decoded design system: background #000000, text #ECECEE, accent #00BEFF, link #9600FF, primary #00BEFF; type scale h1 88px / h2 64px / body 18px; 8px spacing base; 20px base radius. The single interactive/action color is #00BEFF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #000000 |
| surface | #0E0E0E |
| border | #232323 |
| text | #ECECEE |
| text_muted | #929293 |
| primary | #00BEFF |
| accent | #00BEFF |
| link | #9600FF |
| secondary | #FFF58C |
| button_bg | #00BEFF |
| button_text | #000000 |
Using these colors
- Action color
#00BEFF— the single interactive color; only on things you click or must notice, never large fills. primary,accent,button_bgare all#00BEFF— one role, not several (the action color).- accent
#00BEFF— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. - link
#9600FF— inline text links and link-styled controls. - secondary
#FFF58C— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Ttroundsneuecond Md
- Body: Sora
- h1: 88px
- h2: 64px
- body: 18px
Spacing
- base unit: 8px
- scale: 3px, 5px, 8px, 9px, 10px, 14px, 16px, 20px, 24px, 32px
Radii
- base: 20px
- button: 56px
Shadows (elevation)
- card:
rgba(172, 171, 171, 0.3) 0px -1px 10px 0px
Motion
Micro-interactions run at 300ms (dominant) with ease.
- durations: 300ms · 2000ms · 200ms
- easings:
ease·cubic-bezier(0.2, 0.8, 0.2, 1) - animated properties: color, transform, opacity, max-height
Native design tokens
| Token | Value |
|---|---|
--link-color--link-primary | #00beff |
--base-color-brand--purple | #9600ff |
--base-color-brand--pink | #ffa8bb |
--base-color-brand--yellow | #fff58c |
--base-color-brand--cyan | #00beff |
--background-color--background-secondary | #00beff |
--background-color--background-tertiary | #ffa8bb |
--base-color-brand--orange | #f55200 |
--base-color-brand--offwhite | #faf5f5 |
--base-color-brand--off-black | #191919 |
Button states (measured)
- primary focus: outline
1px auto rgb(16, 16, 16)
Layout (measured)
- container max-width:
1020px - nav: 89px relative
- common grid: 3 columns
Motion choreography (measured)
Load order: div.padding-global → div.padding-global → div.padding-global → div.accordion2_component
Scroll reveal: 3 elements rest at opacity 0, animate in over 1000ms.
Overlay recipe (measured)
dialog panel: #121212 · radius 6px
Responsive (measured)
- breakpoints: 352px · 425px · 440px · 479px · 576px · 768px
- mobile (390px): hero 57px · nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →