Fathom — design system & UI screens
Dark space-themed hero with floating product cards, a 5.0 rating and a HubSpot/Zapier logo wall.
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 →